expo-image-picker upload multiple images

Question

Hello everyone i am learning expo-image-picker in react-native and everything is fine when i am uploading one image, But i want to upload multiple images. but its not working if any one know how to do it please help.

this is the code which i tried check it once..

_pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [9, 16],
      quality: 1.0,
      allowsMultipleSelection: true,
    });
    console.log(result);
    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };



  getPermissionAsync = async () => {
    if (Constants.platform.android) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      status = await Permissions.getAsync(Permissions.CAMERA);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }

import React, { Component } from 'react';
import {
  Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert,
  TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions, AsyncStorage,
  Keyboard, Modal, NativeModules, SafeAreaView, StatusBar,
} from 'react-native';


import PropTypes from 'prop-types'


// import { Video } from 'expo-av';

import { Camera } from 'expo-camera';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';


export default class AddPostScreen extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      image: null,
      images: [],
    };

  }


  async componentDidMount() {
    this.get_Id();
    this.getPermissionAsync();
    this.get_PermissionAsync();

  }



  _pickCamera = async () => {
    let result = await await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: false,
      aspect: [4, 3],
      quality: 1.0,
     allowsMultipleSelection: true,
    });
    console.log(result);
    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };



  get_PermissionAsync = async () => {
    if (Constants.platform.android) {
      const { status } = await Permissions.getAsync(Permissions.CAMERA);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }


 _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [9, 16],
      quality: 1.0,
      allowsMultipleSelection: true,
    });
    console.log(result);
    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };



  getPermissionAsync = async () => {
    if (Constants.platform.android) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      status = await Permissions.getAsync(Permissions.CAMERA);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }


  render() {

    const { image, images } = this.state;

      return (


         <View style={styles.container}>
          <View style={styles.ifContainer}>

            <View>
              <Image style={styles.imageView} source={{ uri: this.state.image }} />
              <View style={styles.row}>
                <Button style={styles.button} onPress={this._pickImage} title="Open Gallery" />
                <Button style={styles.button} onPress={this._pickCamera} title="Open Camera" />
              </View>
            </View>

          </View>
        </View >

      );

  }// render ends


} // class Ends

permissions in app.json

"android": {
      "package": "com.srastr.howtags",
      "versionCode": 6,
      "googleServicesFile": "./google-services.json",
      "permissions": [
        "CAMERA",
        "CAMERA_ROLL",
        "READ_INTERNAL_STORAGE",
        "READ_EXTERNAL_STORAGE",
        "WRITE_EXTERNAL_STORAGE",
        "RECORD_AUDIO"
      ]
    }

If anyone know the solution to upload the multiple files using expo-imagepicker please tell me..

Answer 1

Expo-image-picker does not support multiple selections.

However, after SDK24, you can build your own multi-image-picker with EXPO.

Refer to this link for more info link

Answer 2

use Expo-image-picker-multiple

https://www.npmjs.com/package/expo-image-picker-multiple

https://www.npmjs.com/package/expo-image-picker-multiple

Answer 3

Maybe this is a little bit too late but I just did an implementation with multiple selection with expo-image-picker.

You can declare an state variable like this

const [pickedImages, setPickedImages] = useState({
    images: [''],
  });

And right at this moment setPickedImages by adding the selection to the images array

 _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [9, 16],
      quality: 1.0,
      allowsMultipleSelection: true,
    });
    console.log(result);
    if (!result.cancelled) {
      this.setPickedImages(prevState => ({
            images: [...prevState.images, result.uri],
          }));
    }
  };

This part:

this.setPickedImages(prevState => ({
                images: [...prevState.images, result.uri],
              }));

will make sure that multiple images are added into the array and you can display with a map function like for example:

  {pickedImages.length > 0 &&
        pickedImages.map((value, index) => {
          return (
            <View key={index}>
              <Text>{value}</Text>
            </View>
          );
        })}