File Picker for IOS in Ionic

For android we import from "import { FileChooser } from ‘@ionic-native/file-chooser’; "

and install plugins for filechooser from this command

$ ionic plugin add --save http://github.com/don/cordova-filechooser.git
$ npm install --save @ionic-native/file-chooser

Could anyone please tell me that from where we will import FilePicker for IOS and from where we will install the plugins for Filepicker in ionic 2 ?

1 Like

I have the same case but couldn’t find any satisfactory iOS solution for the same purpose. Please advise!!!

Have you found a solution for this ?

Yes I found the solution

Can you help me call it ?

uploadResume(){
	
		let  successCallback= (path) =>{
			alert("You picked  file: " + path);
		}

		let  errorCallback= (er) =>{
			alert("err: " + er);
		}

		if (this.platform.is('ios')){
			(<any>window).FilePicker.pickFile(successCallback,errorCallback)

			(<any>window).FilePicker.isAvailable(function (avail) {
				alert(avail ? "one" : "NO");
			});



		}else{}
}

the only thing that’s being called is the alert , not the filepicker

Declare this variable outside the class
declare var FilePicker: any;

and this array inside the class

utis = [“public.content”, “public.text”, “public.plain-text”, “com.apple.bundle”, “com.apple.application-bundle”];

if (this.platform.is('ios')) {
        FilePicker.pickFile(
          function (uri) {
            let correctPath = uri.substr(0, uri.lastIndexOf('/') + 1);
            let currentName = uri.substring(uri.lastIndexOf('/') + 1);
            console.log(correctPath);
            console.log(currentName);
      },
          function (error) {
            console.log("File error : ", error)
          }
          ,
          function (utis) {
            console.log('UTIS', this.utis)
          }
)}

nothing happens. I am running it on an iphone 6.

visit this link thoroughly.
line by line

you will find the solution

Just want to share my experience here… for iOS.

I use an <input type=file> element that overlays (and transparent 100%) a “Pick a File” button.
This will open the traditional webview(browser) file pick operations.

And when you build your iOS project with Xcode, make sure to enable the Cloud Drive. This will allow the file picker to access files from iCloud Drive.

I have not found a way to ‘filter’ the files during the ‘pickup’, but once I pick a file, I can check its mime-type, and see if it is something acceptable or not, and notify user.

Regards
Costas

can you please share your code for IOS file picker.

In ionic we use If I am right.
@killerchip

Here you go:

  <!-- The "Upload File" button in Android. The File Input element is jus hidden and the button calls the its .click() method -->
  <div *ngIf="!isIOS">
    <ion-row class="buttons-row">
      <ion-col class="buttons-col">
        <button ion-button full small icon-left class="top-button" (click)="fileInput.click()">
          <ion-icon name="folder"></ion-icon>
          Upload File
        </button>
      </ion-col>
    </ion-row>
    <div hidden><input type="file" id="fileUpload" #fileInput (change)="onFileFromStorageChosen($event)" /></div>
  </div>

  <!-- The "Upload File" button in iOS. The File Input element displayed as transparent and overlayed on top of the button -->
  <div *ngIf="isIOS">
    <ion-row class="buttons-row">
      <ion-col class="buttons-col">
        <input type="file" id="fileUpload" class="ios-file-input" (change)="onFileFromStorageChosen($event)" />
        <button ion-button full small icon-left class="top-button">
          <ion-icon name="folder"></ion-icon>
          Upload File
        </button>
      </ion-col>
    </ion-row>
  </div>

The .scss entries to make the File input element overlay the button.

  .buttons-row,
  .buttons-col {
    margin: 0;
    padding: 0;
  }

  /* This class here overlays the file input above the "Upload Document" button in iOS
  * Otherwise is not possible to trigger an File input element programmatically in iOS.
  */
  .ios-file-input{
    position: absolute;
    opacity: 0;
    z-index: 1;
    width: 100%;
    min-height: 155px;  /*Height must be a bit less than the height of the "Upload Document" button.*/
  }

And the typescript code to handle the inputs:

  public onFileFromStorageChosen(filesEvent: any) {
    this.processFileFromStorage(filesEvent);
  }

  public processFileFromStorage(event: any) {
    let file = event.target.files[0];
    //you can read various properties of the file (like mimetype and size) from the file object.
    console.log(file);
    readfile(file);
 }

//this one reads the contents of the file as a URL that contains its data:

  public readfile(file: any): void {
    let reader = new FileReader();
    reader.onload = (e) => {
      let dataUrl = reader.result;
      //and do something with the reader.
    };
    reader.readAsDataURL(file);
  }

It’s not my whole code, but an extracted portion to demonstrate how it works.
I hope this helps.

Regards

3 Likes

@Costas

I’m doing exactly the same, but I was wondering if is there any way to disable the ‘Photos’ items from the action sheet menu (when you press the input type=‘file’ button). Any ideas?

best!
dimitris

Unfortnately I don’t have any solution to this. (Does not mean that there is not one out there)

What I’m doing is to check the file type after the user has selected the file. I have an array of allowed “mime-types”.

  public processFileFromStorage(event: any) {
    let file = event.target.files[0];
    console.log(file.type);
   ...
   }

Thanks for the codes, it works for me.
Only one issue that there’s no “iCloud drive” option from my list. And i setup everything for iCloud on Xcode.
Is there any way that i can test if my config for iCloud is correct?
Thanks

Make sure that you enable “iCloud” documents in XCode.
And also setup iCloud drive on your iPhone, and put some documents in it.
If you have access to iCloud drive in your phone (regardless of your app), then most probably your app will have also.

Start from there.

thanks for your reply, i have enable iCloud on phone. And setup iCloud ( got all tick on xCode and green light on developer website -> app IDs). But the “iCloud drive” still missing from list.
But it’s strange that, if i logged-out iCloud, that option will appear, and disappear after login.

@ShehramTahir … can you share steps to use “jcesarmobile/FilePicker-Phonegap-iOS-Plugin” from begining …because i tried your code but nothing is happening

@ShehramTahir …please tell me the steps to use “jcesarmobile/FilePicker-Phonegap-iOS-Plugin” in ionic fremwork

hey…do you know how to get file path …because i want to upload file on server…

Hello

Dont’ look into path.
The code event.target.files[x] returns a “File” object.
This can be used directly with multipart form data to upload the file using either
Angular’s HttpClient POST , or native FileTransfer plugin.

This link explains how it is done in plain Javascript:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

It’s easy to adapt to Angular. You send the formData object with a POST operation.