Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 72 additions & 56 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

<img src="https://camo.githubusercontent.com/ac300ca7e3bbab573a76c151469a89efd8b31e72/68747470733a2f2f33313365353938373731386233343661616638332d66356538323532373066323961383466373838313432333431303338343334322e73736c2e6366312e7261636b63646e2e636f6d2f313431313932303637342d656e61626c652d69636c6f75642d64726976652e706e67" width="600">
Expand All @@ -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<string>`:

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._
Expand Down Expand Up @@ -153,7 +165,6 @@ try {

<img src="http://i.stack.imgur.com/dv0iQ.png" height="400">


## How to send it back ?

I recommend using [https://github.com/johanneslumpe/react-native-fs](https://github.com/johanneslumpe/react-native-fs)
Expand All @@ -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('/');
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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) {
Expand Down Expand Up @@ -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");
}
Expand Down Expand Up @@ -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)) {
Expand All @@ -204,10 +195,6 @@ private WritableMap getMetadata(Uri uri) {
map.putInt(FIELD_SIZE, cursor.getInt(sizeIndex));
}
}
} finally {
if (cursor != null) {
cursor.close();
}
}

return map;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -12,11 +11,6 @@

public class DocumentPickerPackage implements ReactPackage {

// Deprecated RN 0.47
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
Expand Down
5 changes: 4 additions & 1 deletion index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,13 @@ declare module 'react-native-document-picker' {
windows: Types['extensions']
};
interface DocumentPickerOptions<OS extends keyof PlatformTypes> {
type: Array<PlatformTypes[OS][keyof PlatformTypes[OS]]> | DocumentType[OS]
type: Array<PlatformTypes[OS][keyof PlatformTypes[OS]]> | DocumentType[OS];
copyTo?: 'cachesDirectory' | 'documentDirectory';
}
interface DocumentPickerResponse {
uri: string;
fileCopyUri: string;
copyError?: string;
type: string;
name: string;
size: string;
Expand Down
4 changes: 4 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
4 changes: 0 additions & 4 deletions ios/RNDocumentPicker/RNDocumentPicker.h
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
#if __has_include(<React/RCTBridgeModule.h>)
#import <React/RCTBridgeModule.h>
#else // back compatibility for RN version < 0.40
#import "RCTBridgeModule.h"
#endif

@import UIKit;

Expand Down
Loading