Multiple images selection from photolibrary or savedphotoalbum

[thevirajshelke]

Feature Request

Multiple images selection from photo library or saved photo album (Configurable Parameter).

Motivation Behind Feature

As of now, we can configure the camera plugin to select an image from the gallery (photo library/saved photo album). It would be great to add a config option like maxImageCount which can default to 1 by default.

There is no ionic plugin as of now which gives us the option of selecting multiple images in one go apart from ImagePicker. The drawback of this plugin is that it shows a view where all images are shown together i.e. no album based grouping etc. etc

Camera plugin by default opens the native android's browser which lets us choose an image from albums, lets us open some another application for choosing the image (something like a gallery app). Adding multiple selections will be really really helpful.

Feature Description

I am expecting something like this

options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    mediaType: this.camera.MediaType.PICTURE,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    saveToPhotoAlbum: false,
    maxImagesCount: 15 // defaults to 1
  }

NOTE: - The maxImagesCount option will only work if the sourceType is set to PHOTOLIBRARY or SAVEDPHOTOALBUM & mediaType is set to PICTURE.

Also for the initial stage cropping, changing orientation etc for multiple file selection can be kept off.

Alternatives or Workarounds

As of now, there are no workarounds or alternatives!

I think we should take a count of users who would love to have this feature in the plugin. To all the developers working on this plugin you guys are doing a great job & Thanks a lot in advance :+1:

[josiaho]

For what it's worth, I'd love this capability for ALLMEDIA... Selecting multiple photos AND videos.

[thevirajshelke]

@josiaho Yeah it can be implemented for images as well as videos. But as a head start I think considering Images itself would be more than sufficient :)

Let's see how developers react to this feature and what's their feedback :) :+1:

[breautek]

If this were to be implemented, I think this.camera.DestinationType.FILE_URI should be forced. I suspect encoding several images as base64 data urls will be troublesome.

[josiaho]

Thanks @thevirajshelke , although VIDEO is my primary concern.

For what it's worth (and for those who only need PHOTO support), I've had success using <input id="fileInput" type="file" accept="image/*" multiple/> for importing multiple photos just using FileReader and cordova-plugin-file:

var fileInput = document.getElementByID('fileInput');

fileInput.onchange = function(e){

    var f = e.target.files, x = 0, fileList = [];
    
    function importFile(i) {
        console.log('Importing '+(1 + x)+' of '+f.length+' files');
        var R = new FileReader();
        R.name = f[I].name; // File name for writing to later
        fileList.push(R.name);
        R.onload = function () {
            window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dataDir) {
                dataDir.getFile(R.name, {create: true, exclusive: false}, function(fileEntry) {
                    fileEntry.createWriter(function (fileWriter) {
                        fileWriter.onwriteend = function() {
                            x++;
                            if (x < f.length){
                                importFile(x)
                            } else {
                                // All images have been imported
                                console.log(fileList.join(','))
                            }
                        };
                        fileWriter.onerror = function (e) {
                            console.log("Failed file write: " + e.toString());
                        };
                        fileWriter.write(R.result);
                    });
                }, function (er) {
                    console.log(er)
                });
            }, function (err) {
                console.log(err)
            });
        };
        R.readAsArrayBuffer(f[i])
    }
    
    importFile(x);
};

As long as I step through each file one at a time like this - I haven't run into any memory issues, even in older devices. This method does not allow you to lower the quality the imported photos like the Camera plugin does, but for those looking for a solution in the meantime, this might do the trick.

This method does not play well with videos - especially large ones, so I would still love to see this plugin support multiple video import ;).

[thevirajshelke]

@josiaho this code is superb man!! I'll definitely try this out in my project and let you know :) Thanks for the snippet buddy :+1:

[EinfachHans]

Still required - Nice that we have mentioned a Workaround here, but i'm always a fan of performing things natively

[EinfachHans]

For Android: With the current Implementation this seems not be be possible. We can set i.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); but without a maximum. Most people use external libraries here, like https://github.com/zhihu/Matisse 🤔 For iOS: It's similar here. The used UIImagePickerController only supports selecting 1 image at a time, i found: https://github.com/awkward/Tatsi @breautek

[thevirajshelke]

@HansKrywaa,

Most people use external libraries here, like https://github.com/zhihu/Matisse

This seems to be really a good option. Still looking forward for this implementation from Apache Cordova plugin. Let's see if they include this feature in future timeline somewhere.

[EinfachHans]

i don't think they will include this external librarys. I also don't think it would be correct as this increases the size, even for users that doesn't need it and then they depend on that librarys.

I will look into my timeline, bit if i found some time i will develop a own Cordova Plugin as a Wrapper for this libraries 🤔

[thevirajshelke]

@HansKrywaa,

I will look into my timeline, bit if i found some time i will develop a own Cordova Plugin as a Wrapper for this libraries

Sounds great! :) Let me know if you do it :+1: I'll be happy to use & help as well :)

[EinfachHans]

I just checked the possibility's... The mentioned libraries are not the best, android seems to be not maintained anymore. What about this Plugin: https://github.com/Telerik-Verified-Plugins/ImagePicker ?

[thevirajshelke]

@HansKrywaa I was using this only. Check the issue description I have mentioned it.

There is no ionic plugin as of now which gives us the option of selecting multiple images in one go apart from ImagePicker. The drawback of this plugin is that it shows a view where all images are shown together i.e. no album based grouping etc. etc.

[EinfachHans]

Ahh my fault sorry. If you have time you can search for android and ios libraries, if you found good ones i can make a Plugin for them.

[thevirajshelke]

@HansKrywaa I'll try :)

[EinfachHans]

The iOs Library i mentioned above seems to be maintained, and looks good, so i think we need to find a good android one.

[EinfachHans]

@thevirajshelke i found this: https://github.com/ParkSangGwon/TedImagePicker - i will create a Plugin, just created this Repo(Empty yet) where you can find the Plugin later

[thevirajshelke]

@HansKrywaa lemme know if I can help you in anyway making this plugin :)

All the best 👍 Best wishes :) & thanks in advance :)

[EinfachHans]

@thevirajshelke Version 1.0.0 is released - check it out 😊 If you have any Problems, please open an Issue there

[tanhatariq]

@EinfachHans Thanks dear, but, how to install and integrate your plugin in any Cordova android project?

[EinfachHans]

@tanhatariq Read the Documentation https://github.com/EinfachHans/cordova-plugin-advanced-imagepicker

[tanhatariq]

@EinfachHans Thanks Dear, Found it, it was my blunder, I was looking at the base plugin repo which you posted here earlier, I will definitely use your plugin in one of my app, and will share feedback. Thanks again

[LucasBourgeois]

For android, this can implements https://developer.android.com/training/data-storage/shared/photopicker?hl=fr#add-dependency