Need help on uploading multiple images using this lib

Hi guys, i’m getting quite frustrated, been dealing with this issue for like a week now, and I just can’t figure out how to solve it. I need to upload multiple files, as the docs suggests it seems i can pass an array of images directly in the fetch body. But is not working, i’m getting different kind of errors for everything I try so far.

I’m also using react-native-image-picker, when i get the response from the uploaded image, i just grab this data:

const source = {
    uri: response.uri,
    fileName: response.fileName,
    type: response.type
};

Then, before calling the RNFetchBlob.fetch function, i create the data that i will send, now… my server is expecting to receive a multiform data type… but after sooo many attempts on creating the FormData() and appending the key-values, i had also a few JSON exceptions when it seems it’s trying to parse it. Don’t know why.

                        var images = [];
                        this.state.images.map((image) => {
                            images.push({
                                // data: RNFetchBlob.wrap(image.uri),
                                data: image.uri,
                                name: image.fileName.split('.')[0],
                                type: image.type
                            });
                        });

                        // const formData = new FormData();
                        // formData.append('id', response.data.id.toString());
                        // formData.append('pictures', images);

                        var data = {
                            id: response.data.id,
                            pictures: images
                        }

In my specific case, i need to pass also the id just for a matter of DB, the id is the user’s id and his/her new photos.

This is how i wrap everything up.

UserServices.uploadPicture(data, token)
                        .uploadProgress((written, total) => {
                            console.warn('uploaded', written / total)   <--- is always ~386 / ~386
                        })
                        .then((response) => {
                            this.setState({isLoading: false});
                        })
                        .catch((error) => {
                            console.warn('Error while uploading');
                        });

This is the uploadPicture function:

return RNFetchBlob.fetch('POST', Constants.baseUrl + '/userPicture', {
            Authorization: "Bearer " + token,
            'Content-Type': 'multipart/form-data'
        }, data);

This is now throwing:

JSON value '{
    id = 65;
    pictures =     (
                {
            data = "file:///Users/marian-mac/Library/Developer/CoreSimulator/Devices/706E797B-0F8E-454D-8ADE-64000001E65D/data/Containers/Data/Application/BC0036BA-8662-40CF-BFD0-1D8F00F57800/tmp/739585E4-C764-4B9B-A0AF-31E38ECD1BD7.jpg";
            name = "IMG_0002";
            type = "image/jpeg";
        }
    );
}' of type NSMutableDictionary cannot be converted to NSString

It’s also complaining about not having a Boundary. After googling for some time, realized that maybe i had to add a Boundary within the Content-Type like this:

'Content-Type': 'multipart/form-data;boundary=****someboundary***'

But I’m not even quite sure how to implement it, what am I supposed to add in there? some people i’ve seen use a WebKit boundary … like ---------WebKit. I haven’t found a guide on that.

I also tested setting Content-Type to ‘undefined’ as other people suggested. Didn’t work.

Seems it doesn’t like to send an array just like that because it cannot be parsed into a String… but how am I supposed to send it then? I tested with FormData, tested doing JSON.stringify of the array, i tested sooo many things that i’m mentally stuck right now. Don’t know if I should be testing with native fetch() from react-native by now and try other thing 😕

Any help would be appreciated.

Overall versioning info:

    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-image-picker": "^0.28.0",
    "rn-fetch-blob": "^0.10.15"

[Faolain]

what was the mistake you were making @msqar ?

[msqar]

I was able to make it work, i was passing the params incorrectly. It was easier than i was testing.