diff --git a/README.md b/README.md index 189eab9b..381316f8 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,6 @@ A React Native wrapper for: npm i --save react-native-document-picker ``` - You need to enable iCloud Documents to access iCloud @@ -38,39 +37,52 @@ Use `pick` or `pickMultiple` to open a document picker for the user to select fi ### Options +All of the options are optional + ##### `type`:`string|Array`: The type or types of documents to allow selection of. May be an array of types as single type string. - - On Android these are MIME types such as `text/plain` or partial MIME types such as `image/*`. See [common MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types). - - On iOS these must be Apple "[Uniform Type Identifiers](https://developer.apple.com/library/content/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html)" - - If `type` is omitted it will be treated as `*/*` or `public.content`. - - Multiple type strings are not supported on Android before KitKat (API level 19), Jellybean will fall back to `*/*` if you provide an array with more than one value. -##### `readContent`: +- On Android these are MIME types such as `text/plain` or partial MIME types such as `image/*`. See [common MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types). +- On iOS these must be Apple "[Uniform Type Identifiers](https://developer.apple.com/library/content/documentation/Miscellaneous/Reference/UTIRef/Articles/System-DeclaredUniformTypeIdentifiers.html)" +- If `type` is omitted it will be treated as `*/*` or `public.content`. +- Multiple type strings are not supported on Android before KitKat (API level 19), Jellybean will fall back to `*/*` if you provide an array with more than one value. + +##### [iOS only] `copyTo`:`"cachesDirectory" | "documentDirectory"`: + +If specified, the picked file is copied to `NSCachesDirectory` / `NSDocumentDirectory` directory. The uri of the copy will be available in result's `fileCopyUri`. If copying the file fails (eg. due to lack of space), `fileCopyUri` will be the same as `uri`, and more details about the error will be available in `copyError` field in the result. + +This should help if you need to work with the file(s) later on, because by default, [the picked documents are temporary files. They remain available only until your application terminates](https://developer.apple.com/documentation/uikit/uidocumentpickerdelegate/2902364-documentpicker). This may impact performance for large files, so keep this in mind if you expect users to pick particularly large files and your app does not need immediate read access. + +##### [UWP only] `readContent`:`boolean` -Boolean which defaults to `false`. If `readContent` is set to true the content of the picked file/files will be read and supplied in the result object. +Defaults to `false`. If `readContent` is set to true the content of the picked file/files will be read and supplied in the result object. - - Be aware that this can introduce a huge performance hit in case of big files. (The files are read completely and into the memory and encoded to base64 afterwards to add them to the result object) - - However reading the file directly from within the Thread which managed the picker can be necessary on Windows: Windows Apps can only read the Downloads folder and their own app folder by default and If a file is outside of these locations it cannot be acessed directly. However if the user picks the file through a file picker permissions to that file are granted implicitly. +- Be aware that this can introduce a huge performance hit in case of big files. (The files are read completely and into the memory and encoded to base64 afterwards to add them to the result object) +- However reading the file directly from within the Thread which managed the picker can be necessary on Windows: Windows Apps can only read the Downloads folder and their own app folder by default and If a file is outside of these locations it cannot be acessed directly. However if the user picks the file through a file picker permissions to that file are granted implicitly. - ``` - In addition to the default locations, an app can access additional files and folders by declaring capabilities in the app manifest (see App capability declarations), or by calling a file picker to let the user pick files and folders for the app to access (see Open files and folders with a picker). - ``` + ``` + In addition to the default locations, an app can access additional files and folders by declaring capabilities in the app manifest (see App capability declarations), or by calling a file picker to let the user pick files and folders for the app to access (see Open files and folders with a picker). + ``` - https://docs.microsoft.com/en-us/windows/uwp/files/file-access-permissions + https://docs.microsoft.com/en-us/windows/uwp/files/file-access-permissions - Unfortunately that permission is not granted to the whole app, but only the Thread which handled the filepicker. Therefore it can be useful to read the file directly. + Unfortunately that permission is not granted to the whole app, but only the Thread which handled the filepicker. Therefore it can be useful to read the file directly. - - You can use `react-native-fs` on Android and IOS to read the picked file. +- You can use `react-native-fs` on Android and IOS to read the picked file. ### Result The object a `pick` Promise resolves to or the objects in the array a `pickMultiple` Promise resolves to will contain the following keys. -##### `uri`: +##### `uri`: The URI representing the document picked by the user. _On iOS this will be a `file://` URI for a temporary file in your app's container. On Android this will be a `content://` URI for a document provided by a DocumentProvider that must be accessed with a ContentResolver._ +##### `fileCopyUri`: + +Same as `uri`, but has special meaning on iOS, if `copyTo` option is specified. + ##### `type`: The MIME type of the file. _On Android some DocumentProviders may not provide MIME types for their documents. On iOS this MIME type is based on the best MIME type for the file extension according to Apple's internal "Uniform Type Identifiers" database._ @@ -153,7 +165,6 @@ try { - ## How to send it back ? I recommend using [https://github.com/johanneslumpe/react-native-fs](https://github.com/johanneslumpe/react-native-fs) @@ -170,7 +181,7 @@ if ([fileData length] == 0) { ``` ```javascript -let url = "file://whatever/com.bla.bla/file.ext"; //The url you received from the DocumentPicker +let url = 'file://whatever/com.bla.bla/file.ext'; //The url you received from the DocumentPicker // I STRONGLY RECOMMEND ADDING A SMALL SETTIMEOUT before uploading the url you just got. const split = url.split('/'); @@ -184,50 +195,55 @@ const uploadBegin = (response) => { }; const uploadProgress = (response) => { - const percentage = Math.floor((response.totalBytesSent/response.totalBytesExpectedToSend) * 100); + const percentage = Math.floor( + (response.totalBytesSent / response.totalBytesExpectedToSend) * 100 + ); console.log('UPLOAD IS ' + percentage + '% DONE!'); }; RNFS.uploadFiles({ - toUrl: uploadUrl, - files: [{ + toUrl: uploadUrl, + files: [ + { name, - filename:name, + filename: name, filepath: realPath, - }], - method: 'POST', - headers: { - 'Accept': 'application/json', - }, - begin: uploadBegin, - beginCallback: uploadBegin, // Don't ask me, only way I made it work as of 1.5.1 - progressCallback: uploadProgress, - progress: uploadProgress - }) - .then((response) => { - console.log(response,"<<< Response"); - if (response.statusCode == 200) { //You might not be getting a statusCode at all. Check - console.log('FILES UPLOADED!'); - } else { - console.log('SERVER ERROR'); - } - }) - .catch((err) => { - if (err.description) { - switch (err.description) { - case "cancelled": - console.log("Upload cancelled"); - break; - case "empty": - console.log("Empty file"); - default: - //Unknown - } - } else { - //Weird - } - console.log(err); - }); + }, + ], + method: 'POST', + headers: { + Accept: 'application/json', + }, + begin: uploadBegin, + beginCallback: uploadBegin, // Don't ask me, only way I made it work as of 1.5.1 + progressCallback: uploadProgress, + progress: uploadProgress, +}) + .then((response) => { + console.log(response, '<<< Response'); + if (response.statusCode == 200) { + //You might not be getting a statusCode at all. Check + console.log('FILES UPLOADED!'); + } else { + console.log('SERVER ERROR'); + } + }) + .catch((err) => { + if (err.description) { + switch (err.description) { + case 'cancelled': + console.log('Upload cancelled'); + break; + case 'empty': + console.log('Empty file'); + default: + //Unknown + } + } else { + //Weird + } + console.log(err); + }); ``` ## Help wanted: Improvements diff --git a/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerModule.java b/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerModule.java index 5985bce1..b29f6ee3 100644 --- a/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerModule.java +++ b/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerModule.java @@ -44,6 +44,7 @@ public class DocumentPickerModule extends ReactContextBaseJavaModule { private static final String OPTION_MULIPLE = "multiple"; private static final String FIELD_URI = "uri"; + private static final String FIELD_FILE_COPY_URI = "fileCopyUri"; private static final String FIELD_NAME = "name"; private static final String FIELD_TYPE = "type"; private static final String FIELD_SIZE = "size"; @@ -60,15 +61,6 @@ public void onActivityResult(Activity activity, int requestCode, int resultCode, } }; - private String[] readableArrayToStringArray(ReadableArray readableArray) { - int l = readableArray.size(); - String[] array = new String[l]; - for (int i = 0; i < l; ++i) { - array[i] = readableArray.getString(i); - } - return array; - } - private Promise promise; public DocumentPickerModule(ReactApplicationContext reactContext) { @@ -105,10 +97,9 @@ public void pick(ReadableMap args, Promise promise) { intent.setType("*/*"); if (!args.isNull(OPTION_TYPE)) { ReadableArray types = args.getArray(OPTION_TYPE); - if (types.size() > 1) { + if (types != null && types.size() > 1) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { - String[] mimeTypes = readableArrayToStringArray(types); - intent.putExtra(Intent.EXTRA_MIME_TYPES, mimeTypes); + intent.putExtra(Intent.EXTRA_MIME_TYPES, Arguments.toList(types)); } else { Log.e(NAME, "Multiple type values not supported below API level 19"); } @@ -178,14 +169,14 @@ private WritableMap getMetadata(Uri uri) { WritableMap map = Arguments.createMap(); map.putString(FIELD_URI, uri.toString()); + // TODO vonovak - FIELD_FILE_COPY_URI is implemented on iOS only (copyTo) settings + map.putString(FIELD_FILE_COPY_URI, uri.toString()); ContentResolver contentResolver = getReactApplicationContext().getContentResolver(); map.putString(FIELD_TYPE, contentResolver.getType(uri)); - Cursor cursor = contentResolver.query(uri, null, null, null, null, null); - - try { + try (Cursor cursor = contentResolver.query(uri, null, null, null, null, null)) { if (cursor != null && cursor.moveToFirst()) { int displayNameIndex = cursor.getColumnIndex(OpenableColumns.DISPLAY_NAME); if (!cursor.isNull(displayNameIndex)) { @@ -204,10 +195,6 @@ private WritableMap getMetadata(Uri uri) { map.putInt(FIELD_SIZE, cursor.getInt(sizeIndex)); } } - } finally { - if (cursor != null) { - cursor.close(); - } } return map; diff --git a/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerPackage.java b/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerPackage.java index 50ef8892..29e6961d 100644 --- a/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerPackage.java +++ b/android/src/main/java/io/github/elyx0/reactnativedocumentpicker/DocumentPickerPackage.java @@ -1,7 +1,6 @@ package io.github.elyx0.reactnativedocumentpicker; import com.facebook.react.ReactPackage; -import com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; @@ -12,11 +11,6 @@ public class DocumentPickerPackage implements ReactPackage { - // Deprecated RN 0.47 - public List> createJSModules() { - return Collections.emptyList(); - } - @Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); diff --git a/index.d.ts b/index.d.ts index f32efa27..cd9b1a4a 100644 --- a/index.d.ts +++ b/index.d.ts @@ -48,10 +48,13 @@ declare module 'react-native-document-picker' { windows: Types['extensions'] }; interface DocumentPickerOptions { - type: Array | DocumentType[OS] + type: Array | DocumentType[OS]; + copyTo?: 'cachesDirectory' | 'documentDirectory'; } interface DocumentPickerResponse { uri: string; + fileCopyUri: string; + copyError?: string; type: string; name: string; size: string; diff --git a/index.js b/index.js index cc1dfc81..8131aa86 100644 --- a/index.js +++ b/index.js @@ -70,6 +70,10 @@ function pick(opts) { ); } + if ('copyTo' in opts && !['cachesDirectory', 'documentDirectory'].includes(opts.copyTo)) { + throw new TypeError('Invalid copyTo option: ' + opts.copyTo); + } + return RNDocumentPicker.pick(opts); } diff --git a/ios/RNDocumentPicker/RNDocumentPicker.h b/ios/RNDocumentPicker/RNDocumentPicker.h index 574538b3..695da83c 100644 --- a/ios/RNDocumentPicker/RNDocumentPicker.h +++ b/ios/RNDocumentPicker/RNDocumentPicker.h @@ -1,8 +1,4 @@ -#if __has_include() #import -#else // back compatibility for RN version < 0.40 -#import "RCTBridgeModule.h" -#endif @import UIKit; diff --git a/ios/RNDocumentPicker/RNDocumentPicker.m b/ios/RNDocumentPicker/RNDocumentPicker.m index eead5418..2b44a039 100644 --- a/ios/RNDocumentPicker/RNDocumentPicker.m +++ b/ios/RNDocumentPicker/RNDocumentPicker.m @@ -2,14 +2,10 @@ #import -#if __has_include() #import #import #import -#else // back compatibility for RN version < 0.40 -#import "RCTConvert.h" -#import "RCTBridge.h" -#endif + static NSString *const E_DOCUMENT_PICKER_CANCELED = @"DOCUMENT_PICKER_CANCELED"; static NSString *const E_INVALID_DATA_RETURNED = @"INVALID_DATA_RETURNED"; @@ -18,6 +14,8 @@ static NSString *const OPTION_MULIPLE = @"multiple"; static NSString *const FIELD_URI = @"uri"; +static NSString *const FIELD_FILE_COPY_URI = @"fileCopyUri"; +static NSString *const FIELD_COPY_ERR = @"copyError"; static NSString *const FIELD_NAME = @"name"; static NSString *const FIELD_TYPE = @"type"; static NSString *const FIELD_SIZE = @"size"; @@ -26,9 +24,9 @@ @interface RNDocumentPicker () @end @implementation RNDocumentPicker { - NSMutableArray *composeViews; NSMutableArray *composeResolvers; NSMutableArray *composeRejecters; + NSString* copyDestination; } @synthesize bridge = _bridge; @@ -38,7 +36,6 @@ - (instancetype)init if ((self = [super init])) { composeResolvers = [[NSMutableArray alloc] init]; composeRejecters = [[NSMutableArray alloc] init]; - composeViews = [[NSMutableArray alloc] init]; } return self; } @@ -63,6 +60,8 @@ - (dispatch_queue_t)methodQueue [composeResolvers addObject:resolve]; [composeRejecters addObject:reject]; + copyDestination = options[@"copyTo"] ? options[@"copyTo"] : nil; + documentPicker.delegate = self; documentPicker.modalPresentationStyle = UIModalPresentationFormSheet; @@ -85,12 +84,18 @@ - (NSMutableDictionary *)getMetadataForUrl:(NSURL *)url error:(NSError **)error [url startAccessingSecurityScopedResource]; NSFileCoordinator *coordinator = [[NSFileCoordinator alloc] init]; - __block NSError *fileError; + NSError *fileError; [coordinator coordinateReadingItemAtURL:url options:NSFileCoordinatorReadingResolvesSymbolicLink error:&fileError byAccessor:^(NSURL *newURL) { - if (!fileError) { [result setValue:newURL.absoluteString forKey:FIELD_URI]; + NSError *copyError; + NSURL* maybeFileCopyPath = copyDestination ? [RNDocumentPicker copyToUniqueDestinationFrom:newURL usingDestinationPreset:copyDestination error:copyError] : newURL; + [result setValue: maybeFileCopyPath.absoluteString forKey:FIELD_FILE_COPY_URI]; + if (copyError) { + [result setValue:copyError.description forKey:FIELD_COPY_ERR]; + } + [result setValue:[newURL lastPathComponent] forKey:FIELD_NAME]; NSError *attributesError = nil; @@ -123,6 +128,36 @@ - (NSMutableDictionary *)getMetadataForUrl:(NSURL *)url error:(NSError **)error } } ++ (NSURL*)getDirectoryForFileCopy:(NSString*) copyToDirectory { + if ([@"cachesDirectory" isEqualToString:copyToDirectory]) { + return [NSFileManager.defaultManager URLsForDirectory:NSCachesDirectory inDomains:NSUserDomainMask].firstObject; + } else if ([@"documentDirectory" isEqualToString:copyToDirectory]) { + return [NSFileManager.defaultManager URLsForDirectory:NSDocumentDirectory inDomains:NSUserDomainMask].firstObject; + } + // this should not happen as the value is checked in JS, but we fall back to NSTemporaryDirectory() + return [NSURL fileURLWithPath: NSTemporaryDirectory() isDirectory: YES]; +} + ++ (NSURL *)copyToUniqueDestinationFrom:(NSURL *) url usingDestinationPreset: (NSString*) copyToDirectory error:(NSError *)error +{ + NSURL* destinationRootDir = [self getDirectoryForFileCopy:copyToDirectory]; + // we don't want to rename the file so we put it into a unique location + NSString *uniqueSubDirName = [[NSUUID UUID] UUIDString]; + NSURL *destinationDir = [destinationRootDir URLByAppendingPathComponent:[NSString stringWithFormat:@"%@/", uniqueSubDirName]]; + NSURL *destinationUrl = [destinationDir URLByAppendingPathComponent:[NSString stringWithFormat:@"%@", url.lastPathComponent]]; + + [NSFileManager.defaultManager createDirectoryAtURL:destinationDir withIntermediateDirectories:YES attributes:nil error:&error]; + if (error) { + return url; + } + [NSFileManager.defaultManager copyItemAtURL:url toURL:destinationUrl error:&error]; + if (error) { + return url; + } else { + return destinationUrl; + } +} + - (void)documentPicker:(UIDocumentPickerViewController *)controller didPickDocumentAtURL:(NSURL *)url { if (controller.documentPickerMode == UIDocumentPickerModeImport) { diff --git a/react-native-document-picker.podspec b/react-native-document-picker.podspec index e37246c6..d69413e3 100644 --- a/react-native-document-picker.podspec +++ b/react-native-document-picker.podspec @@ -8,9 +8,9 @@ Pod::Spec.new do |s| s.summary = package['description'] s.license = package['license'] s.homepage = package['homepage'] - s.authors = { 'Elyx0' => 'elyx00@gmail.com' } + s.authors = package['author'] s.source = { :git => "https://github.com/Elyx0/react-native-document-picker", :tag => "v#{s.version}" } s.source_files = "ios/RNDocumentPicker/*.{h,m}" - s.platform = :ios, "7.0" + s.platform = :ios, "10.0" s.dependency 'React' end diff --git a/windows/RNDocumentPicker/RCTDocumentPickerModule.cs b/windows/RNDocumentPicker/RCTDocumentPickerModule.cs index 3f34779c..cbcc2f56 100644 --- a/windows/RNDocumentPicker/RCTDocumentPickerModule.cs +++ b/windows/RNDocumentPicker/RCTDocumentPickerModule.cs @@ -27,6 +27,7 @@ class RCTDocumentPickerModule : ReactContextNativeModuleBase, ILifecycleEventLis private static readonly String OPTION_MULIPLE = "multiple"; private static readonly String OPTION_READ_CONTENT = "readContent"; private static readonly String FIELD_URI = "uri"; + private static readonly String FIELD_FILE_COPY_URI = "fileCopyUri"; private static readonly String FIELD_NAME = "name"; private static readonly String FIELD_TYPE = "type"; private static readonly String FIELD_SIZE = "size"; @@ -152,6 +153,7 @@ private async Task PrepareFile(StorageFile file, Boolean cache, Boolean return new JObject { { FIELD_URI, fileInCache.Path }, + { FIELD_FILE_COPY_URI, fileInCache.Path }, { FIELD_TYPE, fileInCache.ContentType }, { FIELD_NAME, fileInCache.Name }, { FIELD_SIZE, basicProperties.Size}, @@ -163,6 +165,7 @@ private async Task PrepareFile(StorageFile file, Boolean cache, Boolean return new JObject { { FIELD_URI, file.Path }, + { FIELD_FILE_COPY_URI, file.Path }, { FIELD_TYPE, file.ContentType }, { FIELD_NAME, file.Name }, { FIELD_SIZE, basicProperties.Size},