Expo web ImagePicker always "cancelled" result

Please provide the following:

  1. SDK Version: 41
  2. Platforms(Android/iOS/web/all): web

Whenever I select an image the response immediately says {cancelled: true}

import * as React from 'react';
import { View, Image, Platform } from 'react-native';
import { IconButton } from 'react-native-paper';
import * as ImagePicker from 'expo-image-picker';
import Layout from '../../constants/Layout';

const ImageUploader = props => {

	React.useEffect(() => {
		(async () => {
			if (Platform.OS !== 'web') {
				const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
				if (status !== 'granted') {
					alert('Sorry, we need camera roll permissions to make this work!');
				}
			}	
		})();
	}, [])

	async function handlePickImage(){
		
		// for gifs, quality must be 'undefined' and allowsEditiing 'false'
		let pickerResult = await ImagePicker.launchImageLibraryAsync({
			mediaTypes: ImagePicker.MediaTypeOptions[props.mediaType],
			allowsEditing: props.allowsEditing,
			quality: props.quality,
			aspect: [4, 3],
			base64: true,
			allowsMultipleSelection: props.allowsMultipleSelection
		});

		console.log('pickerResult:', pickerResult);

		if (!pickerResult.cancelled) {
			let finalResult;
			if (props.allowsMultipleSelection){
				finalResult = await Promise.all(pickerResult.selected.map(async x => {
					let uri = !x.uri.startsWith('data:') ? "data:;base64," + x.uri : x.uri;
					let size = await _getImageSize(uri);
					return {name: null, uri: uri, size: size, type: 'image'};
				} ));
			}else{
				let uri = !pickerResult.uri.startsWith('data:') ? "data:;base64," + pickerResult.uri : pickerResult.uri;
				let size = await _getImageSize(uri);
				finalResult = {name: null, uri: uri, size: size, type: 'image'};
			}
		  	props.callback(finalResult);
		}
	}

	return (
		<IconButton
			icon="camera"
			size={props.size}
			color={props.color}
			onPress={() => handlePickImage()}
			disabled={props.disabled}
		/>
	);
}

async function _getImageSize(uri){
  return new Promise(resolve => {
     Image.getSize(uri, (width, height) =>{
      //console.log('width:', width);
      //console.log('height:', height);
      let imgWidth = width;
      let imgAspectRatio = width / height;
      let imgHeight = Math.round(imgWidth / imgAspectRatio);
      resolve({width: imgWidth, height: imgHeight, aspectRatio: imgAspectRatio});
    })
  });
}

ImageUploader.defaultProps = {
	size: Layout.iconLarge,
	mediaType: 'Images',
	allowsMultipleSelection: false,
	allowsEditing: false,
	quality: 1,
	disabled: false
}

export default ImageUploader;

I figured out the issue. This looks like a defect in SDK41. I reverted to SDK40 and am using expo-image-picker@~9.2.0 and it’s working again.

1 Like

Thanks for following up, @midnightrider! If you haven’t already, it would be greatly appreciated if you could create a github issue regarding the bug you found here: GitHub - expo/expo: An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.

Cheers,
Adam