Hello,
Recently in one of my iOS project we have requirement to let user browse and select files. So we needed FilePicker plugin for iOS. It should also allow user to browse through document providers like iCloud drive, Dropbox or Google drive.
But my other requirements were not fulfilled to pick up photos and videos from saved photos album so I made some changes in this plugin. Here in this blog I will explain how to do this.
First of all install above plugin through command line and open your project in Xcode and open file
Plugins ==> FilePicker.h and Plugins ==> FilePicker.m
This plugin shows pop over menu with all available document providers so first we have to add option to browse photos and videos.
Open FilePicker.h file and add following import statement.
#import
Recently in one of my iOS project we have requirement to let user browse and select files. So we needed FilePicker plugin for iOS. It should also allow user to browse through document providers like iCloud drive, Dropbox or Google drive.
So after searching for the plugin I found following plugin which works fine for iCloud drive.
https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin
I would like to thank developer of above plugin as I just added more code to it to fulfill my requirement.
First of all install above plugin through command line and open your project in Xcode and open file
Plugins ==> FilePicker.h and Plugins ==> FilePicker.m
This plugin shows pop over menu with all available document providers so first we have to add option to browse photos and videos.
Open FilePicker.h file and add following import statement.
#import
And add following delegates.
@interface FilePicker : CDVPlugin
Now Open FilePicker.m file and find displayDocumentPicker and add following code to it.
[importMenu addOptionWithTitle:@"Photos & Videos" image:nil order:UIDocumentMenuOrderFirst handler:^{
UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init];
imagePickerController.sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
imagePickerController.mediaTypes = [UIImagePickerController availableMediaTypesForSourceType:imagePickerController.sourceType];
imagePickerController.allowsEditing = NO;
imagePickerController.videoQuality = UIImagePickerControllerQualityTypeHigh;
imagePickerController.delegate = self;
[self.viewController presentViewController:imagePickerController animated:YES completion:nil];
}];
This will add menu and we set delegate to self so now we have to callback functions. Add following function in the file.
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
NSString *mediaType = [info objectForKey:UIImagePickerControllerMediaType];
if ([mediaType isEqualToString:@"public.image"]){
NSData *imageData = UIImagePNGRepresentation((UIImage*) [info objectForKey:UIImagePickerControllerOriginalImage]);
NSString* size = [NSString stringWithFormat:@"%li", (unsigned long)[imageData length]];
NSTimeInterval timeStamp = [[NSDate date] timeIntervalSince1970];
NSNumber *timeStampObj = [NSNumber numberWithInteger:timeStamp];
NSString* fileName = [timeStampObj stringValue];
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *imagePath =[documentsDirectory stringByAppendingPathComponent:[NSString stringWithFormat:@"%@.png",fileName]];
if (![imageData writeToFile:imagePath atomically:NO])
{
//send failure response;
self.pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Failed to cache image data to disk"];
[self.pluginResult setKeepCallbackAsBool:NO];
[self.commandDelegate sendPluginResult:self.pluginResult callbackId:self.command.callbackId];
}
else
{
NSArray *arr = @[
@{@"path": imagePath, @"size": size}
];
self.pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsArray:arr];
[self.pluginResult setKeepCallbackAsBool:NO];
[self.commandDelegate sendPluginResult:self.pluginResult callbackId:self.command.callbackId];
}
}
else if ([mediaType isEqualToString:@"public.movie"]){
NSURL *videoURL = [info objectForKey:UIImagePickerControllerMediaURL];
NSString* path = [[videoURL absoluteString] substringFromIndex:7];
NSData *data = [NSData dataWithContentsOfURL:videoURL];
NSString* size = [NSString stringWithFormat:@"%li", (unsigned long)[data length]];
NSArray *arr = @[
@{@"path": path, @"size": size}
];
self.pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsArray:arr];
[self.pluginResult setKeepCallbackAsBool:NO];
[self.commandDelegate sendPluginResult:self.pluginResult callbackId:self.command.callbackId];
}
[picker dismissViewControllerAnimated:YES completion:NULL];
}
So as you can see in above code we are checking if picked media is image, then first we have to move application temp storage as iOS does not allow you to access assets directly from photos so we are making a copy with following code.
NSData *imageData = UIImagePNGRepresentation((UIImage*) [info objectForKey:UIImagePickerControllerOriginalImage]);
NSString* size = [NSString stringWithFormat:@"%li", (unsigned long)[imageData length]];
NSTimeInterval timeStamp = [[NSDate date] timeIntervalSince1970];
NSNumber *timeStampObj = [NSNumber numberWithInteger:timeStamp];
NSString* fileName = [timeStampObj stringValue];
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *imagePath =[documentsDirectory stringByAppendingPathComponent:[NSString stringWithFormat:@"%@.png",fileName]];
if (![imageData writeToFile:imagePath atomically:NO])
{
}
else
{
}
And for the videos we are sharing absolute URL to result callback. Also the plugin result is now array with path and size attribute. So we have to change the code of plugin to send same result for other document providers. Find out following function in FilePicker.m file.
- (void)documentPicker:(UIDocumentPickerViewController *)controller didPickDocumentAtURL:(NSURL *)url
And replace it with following function.
- (void)documentPicker:(UIDocumentPickerViewController *)controller didPickDocumentAtURL:(NSURL *)url {
[url startAccessingSecurityScopedResource];
__block NSData *pdfData = nil;
NSFileCoordinator *coordinator = [[NSFileCoordinator alloc] init];
__block NSError *error;
[coordinator coordinateReadingItemAtURL:url options:0 error:&error byAccessor:^(NSURL *newURL) {
pdfData = [NSData dataWithContentsOfURL:newURL];
NSString* size = [NSString stringWithFormat:@"%li", (unsigned long)[pdfData length]];
NSArray *arr = @[
@{@"path": [url path], @"size": size}
];
self.pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsArray:arr];
[self.pluginResult setKeepCallbackAsBool:NO];
[self.commandDelegate sendPluginResult:self.pluginResult callbackId:self.command.callbackId];
}];
[url stopAccessingSecurityScopedResource];
}
So in JavaScript, following code should work.
FilePicker.pickFile(function(obj) {
alert(obj[0].path);
alert(obj[0].size);
}
Hope this helps you.
