File Picker for IOS in Ionic

Ionic Framework ionic-v3
21

brother I have shared the code.

You can see it in the top

1 Like
22

thanksā€¦broā€¦Now its working

23

You Rock, bro! When I am messing up with Electron + Ionic but the Electron ā€˜Dialogā€™ cannot call out fs function. Thanks a lot! Save my whole day!

24

Iā€™ve created this demo component based on @killerchip and on this answer to easily test picking images (it shows the picked images in the browser/webview):

import { Component } from '@angular/core';

@Component({
	selector: 'my-demo-file-chooser',
	template: `
		<input type="file" name="img" multiple (change)="onChange($event)">
		<div *ngFor="let fileUrl of fileUrls">
			<img [src]="fileUrl" />
		</div>
	`
})
export class DemoFileChooserComponent {

	public fileUrls: string[] = [];
	
	public onChange(event: Event) {
		let target = event && event.target;
		let files: Array<File> = target && target['files'];

		if (files && files.length) {
			files = Array.from(files);
			console.log('files', files);

			files.map(file => {
				return this.readFile(file).then(src => {
					this.fileUrls.push(src);
					console.log('file loaded', file);
				}).catch(
					error => console.error('file error', file, error)
				);
			});
		}
	}

	private readFile(file: File): Promise<string> {
		return new Promise((resolve, reject) => {
			let fileReader = new FileReader();

			fileReader.onload = () => resolve(fileReader.result);

			fileReader.onerror = error => reject(error);

			fileReader.onabort = error => reject(error);
	
			fileReader.readAsDataURL(file);
		});
	}
}

Just include in your HTML to test:

<my-demo-file-chooser></my-demo-file-chooser>

25

Hello

i have install file picker plugin from here https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin

declare var FilePicker: any;
 if (this.platform.is('ios')){
			FilePicker.pickFile(sucess=>{
        this.presentalert('sucess');
      }).catch(err=>{
        this.presentalert(JSON.stringify(err));
      })

			FilePicker.isAvailable(function (avail) {
				this.presentalert(avail ? "one" : "NO");
      });
    }

Donā€™t have any idea what is going wrong any one please help me

thanks in advance

26

If i want to select pdf files, then the file name has changed and the type of the selected file is empty. You can check in the console logs. And this is happening only for android. Whatā€™s the issue here?

27

Hello

I have Used FilePicker ios plugin.

  FilePicker.pickFile(uri=>{
        this.choosenfilepath = uri;
        this.filecontentsize=true;
        this.validext = true;
      }).catch(err=>{
        self1.presentalert(JSON.stringify(err))
      })

this.choosenfilepath i found ā€˜/private/var/mobile/containers/data/ā€¦ā€™ that path how can choose file from this path anyone help me please

Thanks,

28

@setu1421 I tested with a pdf file and it worked fine in a real Android 6 device (Moto G2).

This is the log I received in browser (but it worked fine in android too):

img3

(I donā€™t use a file reader to show the image tough, it would probably need to use some library to show the thumbnail, but I can upload it both in browser and in android)

29

Hi how I can use this plugin in ionic 1

31

Can you access library file (video and photo) of ios and select it with this plugin?
I have trying this plugin but I canā€™t access photo or video, it just showing icloud with empty data.
Or do you know any cordova plugin that work on ios and can get fullpath of file?

Would appreciate if you could help me!