Select multiple images without Image-Picker plugin ionic - ionic-framework

Question

I am searching for an alternative to Ionic's image-picker plugin or some guidance on using it to attach a file to a Form for upload. The api that I am using requires that file be uploaded via form. Thoughts or suggestions are much appreciated. The feature of multiple file selection is the most important part of this.

Answer 1

You can use standard web api (file input) to achieve this and use "multiple" as attribute.
Your template:
<button ion-button>
<ion-icon name="image"></ion-icon>
<input multiple type="file” (change)="loadImageFromDevice($event)" accept="image/png, image/jpeg">
</button>
Your ts:
myImages: Array<string>;
...
loadImageFromDevice(event) {
const files = event.target.files;
const blobReader = new FileReader();
files.forEach(file => {
blobReader.readAsArrayBuffer(file);
blobReader.onload = () => {
let blob: Blob = new Blob([new Uint8Array((blobReader.result as ArrayBuffer))]);
let blobURL: string = URL.createObjectURL(blob);
this.myImages.push(blobURL);
};
blobReader.onerror = (error) => {
console.log(error);
};
})
};

Answer 2

I am facing same issue
use this code to choose file in Ionic HTML
<ion-input type="file" (change)="changeListener($event)"></ion-input>
Ts file
changeListener(event) {
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = (_event) => {
this.imgURL = reader.result;
//base64 image
console.log("Image File =>", this.imgURL);
}
}
Then make file controller array and make one button to increase it then you can make multiple file controls to handle and upload to server.
check this for reference
http://masteringionic.com/blog/2018-02-06-dynamically-add-and-remove-form-input-fields-with-ionic/