itinance / itinance/react-native-fs

Uploading Image to Dummy url and Uploaded file is not received in proper format

Open
#650 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
C++
Stars
5k
Forks
1k
PR merge metrics
No merged PRs in 30d

Description

`import React, { Component } from "react";
import {
View,
SafeAreaView,
StyleSheet,
ScrollView,
TouchableOpacity,
Image,
FlatList,
Dimensions
} from "react-native";
import {
Container,
Content,
Button,
Text,
Icon,
Header,
Left,
Body,
Title,
Right,
Footer,
Card
} from "native-base";
import { getStatusBarHeight } from "react-native-status-bar-height";
import {
PRIMARY_COLOR,
SUCCESS_COLOR,
SCREEN_BACKGROUND_COLOR
} from "../../../constants/colors";
import ImagePicker from "react-native-image-picker";
import { connect } from "react-redux";
import UploadImage from "../../../components/UploadImage";
import {
ADD_PROJECT_SUCCESS,
ADD_PROJECT_ERROR
} from "../../../constants/action-types";
import { getAuthenticationToken } from "../../../lib/authenticationToken";

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: SCREEN_BACKGROUND_COLOR
},
header: {
paddingTop: getStatusBarHeight(),
height: 54 + getStatusBarHeight(),
backgroundColor: PRIMARY_COLOR
}
});

const ITEM_WIDTH = Dimensions.get("window").width;

class AddProjectScreen extends Component {
constructor(props) {
super(props);
this.state = {
imgArray: [
{
imageSource: {},
text: ""
},
{
imageSource: {},
text: ""
},
{
imageSource: {},
text: ""
},
{
imageSource: {},
text: ""
}
],
columns: 2
};
}

_keyExtractor = (item, index) => index;

uploadPhoto = index => {
const options = {
quality: 1.0,
storageOptions: {
skipBackup: true
}
};

ImagePicker.showImagePicker(options, response => {
console.log("Response = ", response);

if (response.didCancel) {
console.log("User cancelled photo picker");
} else if (response.error) {
console.log("ImagePicker Error: ", response.error);
} else if (response.customButton) {
console.log("User tapped custom button: ", response.customButton);
} else {
let source = { uri: response.uri };

// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };

let copyArray = Object.assign([], this.state.imgArray);
copyArray[index].imageSource = response;
this.setState({
imgArray: copyArray
});
}
});
};

handleAddProject = async () => {
const { imgArray } = this.state;
const { dispatch } = this.props;
const results = imgArray.filter(
item => Object.keys(item.imageSource).length > 0
);
try {
const token = await getAuthenticationToken();

var RNFS = require("react-native-fs");
var uploadUrl =
"https://pipedream.com/r/enfe3aq3bnyae/1JO9urDamVh897kBz66SjG6M5Z6";

var files = [];
results.forEach(element => {
[files.push({]([url](url
![Screenshot (53)](https://user-images.githubusercontent.com/47846938/55532997-7738b400-56cd-11e9-8ae2-69fc38738a7f.png)
))
name: element.imageSource.fileName,
filename: element.imageSource.fileName,
filepath: element.imageSource.path,
filetype: element.imageSource.type
});
});

var uploadBegin = response => {
var jobId = response.jobId;
console.log("UPLOAD HAS BEGUN! JobId: " + jobId);
};

var uploadProgress = response => {
var percentage = Math.floor(
(response.totalBytesSent / response.totalBytesExpectedToSend) * 100
);
console.log("UPLOAD IS " + percentage + "% DONE!");
};

// upload files
RNFS.uploadFiles({
toUrl: uploadUrl,
files: files,
method: "POST",
headers: {
Accept: "application/json",
Authorization: `Bearer ${token}`
},
fields: {
ad_id: this.props.postAdvertisement.details.id.toString()
},
begin: uploadBegin,
progress: uploadProgress
})
.promise.then(response => {
if (response.statusCode == 200) {
console.log("-----------response--------------", response);
console.log("FILES UPLOADED!"); // response.statusCode, response.headers, response.body
dispatch({
type: ADD_PROJECT_SUCCESS,
payload: JSON.parse(response.body)
});
} else {
console.log("SERVER ERROR");
}
})
.catch(err => {
if (err.description === "cancelled") {
// cancelled by user
}
console.log("--------Catch--------", err);
dispatch({
type: ADD_PROJECT_ERROR,
payload: err
});
});
} catch (error) {
console.log(error);
dispatch({
type: ADD_PROJECT_ERROR,
payload: error
});
}
};

_renderItem = ({ item, index }) => {
const { columns } = this.state;
return (

);
};

AddUploader = () => {
let copyArray = Object.assign([], this.state.imgArray);
var addElement = {
imageSource: "",
text: ""
};
copyArray.push(addElement);

this.setState({
imgArray: copyArray
});
};

removeUploader = index => {
let copyArray = Object.assign([], this.state.imgArray);
copyArray.splice(index, 1);

this.setState({
imgArray: copyArray
});
};

render() {
const { columns } = this.state;

return (




this.props.navigation.goBack()}
>




Create Professional






Add Previous Work/Add Project


Uplaod Project









NEXT




);
}
}

const mapStateToProps = ({ postAdvertisement, addProject }) => ({
postAdvertisement,
addProject
});

export default connect(mapStateToProps)(AddProjectScreen);
`
![Uploading Screenshot (53).png…]()

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.