I'm trying to use expo image picker to send image file to an API in form data but when I tried to use console.log to see the result, it does not show the image name. It shows the uri, type, width and height. How do I get the image name?

const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Images, 
          aspect: [4, 3],
          quality: 1,
          base64: false,
        });
    
        console.log(result);
    
        if (!result.cancelled) {
          setImage(result.uri);
        }
    };

I'm trying to use expo image picker to send image file to an API in form data but when I tried to use console.log to see the result, it does not show the image name. It shows the uri, type, width and height. How do I get the image name?

const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Images, 
          aspect: [4, 3],
          quality: 1,
          base64: false,
        });
    
        console.log(result);
    
        if (!result.cancelled) {
          setImage(result.uri);
        }
    };

• javascript
• react-native
• file-upload
• expo

3 Answers 3

Parse filename from uri

if (!result.cancelled) {
  setImage(result.uri);

  const fileName = result.uri.split('/').pop();
  const fileType = fileName.split('.').pop();

  console.log(fileName, fileType);
}

You can use expo-document-picker with {type:'image/*'} as DocumentPickerOptions which gives picked images details including name, type, uri etc... which is better alternate for expo-image-picker

From what I read in the Image Picker docs, the uri will be stored under the assets object:

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images, 
    aspect: [4, 3],
    quality: 1,
    base64: false,
  });
  // look at the keys, assets should be one
  console.log(Object.keys(result)); 
  if (!result.cancelled) {
    // It appears that assets is an array?
    setImage(result.assets[0].uri);
  }
};