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.
<!-- 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.
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?
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.
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
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.