React-Native-Tips icon indicating copy to clipboard operation
React-Native-Tips copied to clipboard

not able to upload image React native

Open chirag-chopra opened this issue 5 years ago • 3 comments

I tried uploading the image to the PHP server but it's not working although I was able to upload normal String but getting the issue in image uploading need help

chirag-chopra avatar Jul 14 '19 16:07 chirag-chopra

I just spent hours myself, but I finally found it...

Before:

// `res`: ImagePicker response object
// https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Reference.md#the-response-object

data.append('photo', {
  uri: res.uri,
  type: res.type,
  name: res.fileName
});

After:

data.append('photo', {
  uri: res.uri,
  type: res.type,
  name: res.fileName || 'dummy-filename' // !!
});

So basically Laravel does not recognize your "photo" formData field if the photo.name is not set...

That but also the fact that you must strip the file:// prefix from uri when on iOS. Full(er) code:

React Native

        let fileUri;

        if (Platform.OS === 'android') {
          fileUri = uri;
        } else {
          fileUri = uri.replace('file://', '');
        }

        const data = new FormData();

        data.append('foo', 'bar');
        data.append('photo', {
          uri: fileUri,
          type: res.type,
          name: res.fileName || 'dummy',
        });

        // fetch('http://127.0.01:8000/api/images', { method: 'POST', body: data, ... });

Laravel

// SomeController.php

$request->file('photo')->store('images');

eightyfive avatar Aug 18 '20 11:08 eightyfive