Get file from react-native to upload image same as `<input type="file" onChange={this.fileChangedHandler}> `

Question

I have tried doing

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

and using

axios

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

const config = {
            headers: {
                'content-Type': 'multipart/form-data'
            }
        }
 MY_API().then(instance => {

// it is axios instance
            instance.post("/api/v1/upload",
                { body }
                , config).then(res => {
                    console.log(JSON.stringify(res));

                }).catch(err => {
                    console.log(err);
                })
        }
        )

On removing config I get

Error 503

and with config it gives

Error: Multipart: Boundary not found

and works fine with POSTMAN also... Along with headers

I have also tried to upload File (blob) , but same error of

Error: Multipart: Boundary not found

 dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=', 'hello.txt');
console.log(file);

API works well in ReactJS with code

EDIT : I have solved the problem by using React-native-fetch-blob, but looking to solve using axios ,

here is the code :

 RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
            'authorization': jwtToken,
            'Content-Type': 'multipart/form-data',
        },
            [
                { name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
                { name: 'name', data: name }
            ]
        ).then((resp) => {
            console.log(resp);
        }).catch((err) => {
            console.log(err);
        });

Answer 1

I have solved the problem by using React-native-fetch-blob, but looking to solve using axios ,

here is the code :

 RNFetchBlob.fetch('POST', 'https://helloapp.herokuapp.com/api/v1/upload', {
            'authorization': jwtToken,
            'Content-Type': 'multipart/form-data',
        },
            [
                { name: 'image', filename: 'avatar-png.png', type: 'image/png', data: base64logo },
                { name: 'name', data: name }
            ]
        ).then((resp) => {
            console.log(resp);
        }).catch((err) => {
            console.log(err);
        });

Answer 2

Never Ever define content-type header while sending a file. Browser/Postman will add it automatically which looks like this.

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7BojnnMEteO0aHWP

Form boundary is the delimiter for the form data. Boundary is calculated when request is sent so you cannot hardcode it.

Thats why you were getting error boundary not found.

Now you can use fetch , axios anything, it will work.

This is very important info which is not captured in the MDN Fetch docs