React-native-document-picker: Integrate with image picker

[Gentlee]

There is no way to pick images from camera/photos on ios currently. Would be great to add button for image picker (and make option for it in js):
https://stackoverflow.com/questions/33127225/why-photos-app-is-not-showing-in-the-document-provider-extensions-on-the-device

[buixuanhai]

I have the same problem with this.

[Elyx0]

Yep that would be nice if someone could pick that up and PR

[yasoza]

that would be really awesome.

[estevaolucas]

I was able to make DocumentPicker work work with ImagePicker setting ImagePickerscustomButton`, like this:

ImagePicker.showImagePicker(
  {
    // BUTTON TO OPEN DocumentPicker
    customButtons: [{ name: 'files', title: 'Other files' } ],
    title: 'Select the file...',
  },
  ({ error, customButton, ...file }: Response) => {
    if (error) {
      // ....
    } else if (customButton) {
      DocumentPicker.show();
    } else if (file.uri) {
      // ...
    }
  },
);

[yasoza]

Bro, it is what everyone is doing already, we were asking for camera module to be integrated to this library, so that only react-native-document-picker alone could be used for all of these purposes.

[dantman]

@yashojha19 You might want to suggest how you think that can be implemented. Because this library isn't a document picker library, it's a library that asks the OS to display a document picker for the user to pick a document the library/app doesn't have permission to list.

[piranna]

On https://github.com/QuantumBA/react-native-document-picker/tree/v3_camera I'm adding support for camera, video and audio capture for Android, and a work colleague is doing something similar for iOS too.

[imdadatgol]

You need to use image picker and document picker too. Image picker will display option for take photo and choose from Library. Make a custom button with title "Other files...' and if user clicked on custom button call document picker.
ImagePicker from react-native-image-picker
&
DocumentPicker from react-native-document-picker
//Code from here

`var options = {
title: 'Select File',
customButtons: [{ name: 'files', title: 'Other files...' }],
quality: 0.3,
storageOptions: {
skipBackup: true,
path: 'images'
}
};

    ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);
        // console.log(response.data);


        if (response.didCancel) {
            console.log('User cancelled image picker');
        }
        else if (response.error) {
            console.log('ImagePicker Error: ', response.error);
        }
        else if (response.customButton) {
            DocumentPicker.show({
                filetype: [DocumentPickerUtil.allFiles()],
            }, (error, res) => {
                console.log(
                    res.uri,
                    res.type,
                    res.fileName,
                    res.fileSize
                );
            });
            console.log('User tapped custom button: ', response.customButton);
        }
        else {
            let source = { uri: response.uri };
            // You can also display the image using data:
            // let source = { uri: 'data:image/jpeg;base64,' + response.data };
            // this.setState({
            //     file_source: source
            // });
            this.img_resource = response;
        }
    });`