react native upload image as a file

Question

I am having trouble uploading an image from my react native app. I have a react app that uploads images to the backend using <input> as a file.

The web app uploads to the backend like

File {name: "413_loveis_takingcareofu_wm.jpg", lastModified: 1503889026000, lastModifiedDate: Mon Aug 28 2017 10:57:06 GMT+0800 (HKT), webkitRelativePath: "", size: 34534, …}
lastModified
:
1503889026000
lastModifiedDate
:
Mon Aug 28 2017 10:57:06 GMT+0800 (HKT) {}
name
:
"413_loveis_takingcareofu_wm.jpg"
size
:
34534
type
:
"image/jpeg"

I am getting the image on the React Native mobile app using react-native-image-picker and I have the base64 and filepath.

How can I convert the filepath from

"file:///Users/kel/Library/Developer/CoreSimulator/Devices/7FAC36F6-803A-4268-9D65-28A9B8B65636/data/Containers/Data/Application/E34DD4A1-0207-4365-A428-614D39785781/Documents/images/798807FA-D41E-4109-B813-D21F22CC7F0D.jpg"

to what works on the web app?

score 3 · Accepted Answer · answered Aug 28 '17 at 07:53

3

Please refer to :

https://snowball.digital/Blog/Uploading-Images-in-React-Native

https://github.com/kamilkp/react-native-file-transfer

var photo = {
    uri: uriFromCameraRoll,
    type: 'image/jpeg',
    name: 'photo.jpg',
};

or you can do,

var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', photo);
body.append('title', 'A beautiful photo!');

xhr.open('POST', serverURL);
xhr.send(body);

answered Aug 28 '17 at 07:53

Mohhamad Hasham

1,750
1
15
18

thank you, can you show me how to do this with axios? https://stackoverflow.com/questions/45929665/how-to-convert-request-from-fetch-to-axios – Kelvin Aug 29 '17 at 02:08
Hi Mohhamad Hasham. Can you confirm that the blog URL only works with lower-case? I tried the contribution by @Jacob.S and they seem to be right - to my surprise it seems necessary to be https://snowball.digital/blog/uploading-images-in-react-native – Yunnosch Nov 17 '20 at 06:35

score 0 · Answer 2 · answered Nov 17 '20 at 06:13

0

Above blog url has changed. Please refer

https://snowball.digital/blog/uploading-images-in-react-native

answered Nov 17 '20 at 06:13

Jacob.S

41
4

I turned you post into a comment on the accepted answer. Thanks for your contribution. – Yunnosch Nov 17 '20 at 06:37

react native upload image as a file

2 Answers2