React-native-image-crop-picker: Upload to server

[chrise86]

Apologies as I know this isn't an issue with the library, but I can't find a solution anywhere.

Base64 is just too slow, especially if selecting multiple images. How do I got about uploading files via paths returned using this library? I'm using Relay inside my app and GraphQL on the server. Has anyone done this?

I can't get Relay's getFiles to work :(

[ivpusic]

I am using FormData and upload works well

[chrise86]

Is that with Relay? Do you have an example you could share please?

[ivpusic]

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

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

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

sorry never used Relay, so I don't know if this works with it. This is how I am doing it in my project

[chrise86]

For anyone who is using Relay and struggling, this is what I did:

getFiles() {
  let files = {};

  this.props.images.map((image, idx) => {
    let pathParts = image.path.split('/');
    files[`file_${idx}`] = {
      uri: image.path,
      type: image.mime,
      name: pathParts[pathParts.length - 1]
    }
  });

  return files;
}

The important thing is to pass an object with uri, type and name.

[gopchi]

@chrise86 Hi, do you have any experience with React Native image upload. We have a custom API endpoint to upload images and when doing it with Postman everything works. The problem though is when I get the image object from the crop-picker, it does not upload the image. How should I pass the data?

Here is some of the code:

 let file = {
      uri: imagePath,
      type: imageType,
      name: imageName,
      size: imageSize,
  }

const body = new FormData();
body.append('file', file);

And then I pass the body to the request.
P.S. I know that maybe somehow off topic but I could not get it to work and search some advice. The weird thing is that when I upload it with postman it works, so I don't know what is wrong. My headers are set to multipart/form-data and I have my boundary set as well.

Would appreciate some help. :)
Thanks!

[chrise86]

@gopchi unfortunately I've only used Relay in that situation, and did exactly as mentioned above. Have you tried submitting without the size property - that is the only difference I can see without looking further into it.

[swarupbam]

let file = { uri: response.path, type: 'image/jpeg', name: response.fileName } const data = new FormData(); data.append('file',file)
where response is returned from ImageCropPicker.openPicker.
not working for me.

[tiffanym19]

I'm causing trouble with this I did all your suggestion but it is not yet working. what should be the data that need to be pass in API in able to work

[tiffanym19]

let file = { uri: response.path, type: 'image/jpeg', name: response.fileName } const data = new FormData(); data.append('file',file)
where response is returned from ImageCropPicker.openPicker.
not working for me.

in me either, how did you solve this?

[xang555]

let file = { uri: response.path, type: 'image/jpeg', name: response.fileName } const data = new FormData(); data.append('file',file)
where response is returned from ImageCropPicker.openPicker.
not working for me.

in me either, how did you solve this?

can you try this solution? this is work for me

import { Platform } from 'react-native'
export async function uploadProfileImage(token, image){
    try {
        const upload_body = {
            uri: image['path'],
            type: image['mime'],
            name: Platform.OS === 'ios' ? image['filename']: `my_profile_${Date.now()}.${image['mime'] === 'image/jpeg' ? 'jpg':'png'}`,
        }

        let _data_body = new FormData()
        _data_body.append('my_key_the_same_server_code', upload_body)
        const response = await privApi(token).patch('/users/me/profiles', _data_body, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })

        const { data, status } = response

        if (status === 204) {
            return data
        }else {
            throw status
        }

    } catch (error) {
        throw error
    }
}

should help! 

[RZsam]

having same problem here.
everything work fine with postman...

[re-ali]

let file = { uri: response.path, type: 'image/jpeg', name: response.fileName } const data = new FormData(); data.append('file',file)
where response is returned from ImageCropPicker.openPicker.
not working for me.

in me either, how did you solve this?

can you try this solution? this is work for me

import { Platform } from 'react-native'
export async function uploadProfileImage(token, image){
    try {
        const upload_body = {
            uri: image['path'],
            type: image['mime'],
            name: Platform.OS === 'ios' ? image['filename']: `my_profile_${Date.now()}.${image['mime'] === 'image/jpeg' ? 'jpg':'png'}`,
        }

        let _data_body = new FormData()
        _data_body.append('my_key_the_same_server_code', upload_body)
        const response = await privApi(token).patch('/users/me/profiles', _data_body, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })

        const { data, status } = response

        if (status === 204) {
            return data
        }else {
            throw status
        }

    } catch (error) {
        throw error
    }
}

should help! 

Its Works for me , thanks in advance.

[muganwas]

For anyone who is using Relay and struggling, this is what I did:

getFiles() {
  let files = {};

  this.props.images.map((image, idx) => {
    let pathParts = image.path.split('/');
    files[`file_${idx}`] = {
      uri: image.path,
      type: image.mime,
      name: pathParts[pathParts.length - 1]
    }
  });

  return files;
}

The important thing is to pass an object with uri, type and name.

This works well with iOS but I'm having trouble with android, the image doesn't seem to be uploadable yet I can display it within the app.

[Sapphire8888]

Help me!!!
I am going to record Video and upload it on the server using image-crop-picker.
But I don't know what to do.
I need to source code.
Please help me!!!

[kele-leanes]

having same problem here.
everything work fine with postman...

Me too, have you any solution?

[aliwaqar981]

For me it's working well on ios but getting network on android. I'm using axios for api call. Any advice?