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);
        });

kvadityaaz · Accepted Answer · 2020-10-23 19:56:55Z

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);
        });

answered Oct 23, 2020 at 19:56

kvadityaaz

1,4911 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user10839007 · Accepted Answer · 2020-04-05 08:39:59Z

0

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

answered Apr 5, 2020 at 8:39

user10839007

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related