2

developers, I am using react-native-image-picker to upload images to the Nodejs server and MongoDB, when I select an image on react native app it is showing image fileName="null" on the console log. I am struggling for 3 weeks and couldn't find any solution. Below I have posted the console.log result:

Response =  {"fileName": null, "fileSize": 13712705, "height": 3024, "isVertical": false, "origURL": "assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC", "type": "image/jpeg", "uri": "file:///Users/shinobi/Library/Developer/CoreSimulator/Devices/9DBEA6D8-101E-4B9C-9DB0-D1CABA724AAF/data/Containers/Data/Application/44C0E455-2A43-40A3-A2EE-213A39B7743C/tmp/35A90028-55FA-4218-8FB7-34EB1DE62F58.jpg", "width": 4032}

Below is my react-native-image-picker code:

const ChangeTasbir = ({navigation, route}, props) => {

  const [image, setImage] = useState(null);
  const [id, setId] = useState(getDetails('id'));
  const [isuploading, setIsuploading] = useState(false);

  const selectImage = () => {
    const options = {
      noData: true,
    };
    ImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      } else {
        const source = {
          uri: response.uri,
          fileName: response.fileName,
          data: response.data,
        };

        // You can also display the image using data:
        // const source = { uri: 'data:image/jpeg;base64,' + response.data };

        setImage(source);
      }
    });
  };
Bipul Prasai
  • 21
  • 1
  • 3

2 Answers2

0

I'm using this options in my React native application on Android and works ok.

const options = {
      mediaTypes: 'Images',
      quality: 0.1,
    };

    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.didCancel !== true) {
        this.setState({ profilePic: response, errorPic: false });

      }
    });
Remato
  • 93
  • 9
  • you can use `console.log ()` to show data in `response` object – Remato May 31 '20 at 04:30
  • can you show your `setImage( )` function? edit the question please. you use async, but do not use await at any time – Remato May 31 '20 at 04:53
  • const source = { uri: response.uri, fileName: response.fileName, data: response.data, }; // You can also display the image using data: // const source = { uri: 'data:image/jpeg;base64,' + response.data }; setImage(source); – Bipul Prasai May 31 '20 at 04:56
  • i have updated my code, can you help me to fix it now @Remato – Bipul Prasai May 31 '20 at 05:00
  • can you try other image? see the documentation says: "return fileName, if available". Link here: https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Reference.md#the-response-object – Remato May 31 '20 at 05:20
  • when I take photo it doesn't show fileName in console.log but when I select any image from the device its showing fileName:'null'. – Bipul Prasai May 31 '20 at 05:24
  • I edited my answer with an example that is working in my application on Android, you can test using these `options` without `noData` – Remato May 31 '20 at 05:39
0

try this:

let path = response.uri;
if (Platform.OS === "ios") {
   path = "~" + path.substring(path.indexOf("/Documents"));
}
if (!response.fileName) response.fileName = path.split("/").pop();
Ben
  • 91
  • 1
  • 6