React Native Android WebView File Upload
This is a Custom React Native Android module that enables file uploads from a WebView <input type="file" />
element:
- by taking a new photo using the camera
- by recording a new video using the camera
- by choosing an existing photo/video from the gallery
What this module does:
- takes dahjelle's react-native-android-webview-file-image-upload implementation;
- fixes some bugs where you couldn't open the camera after first usage;
- extracts it into a separate module like lucasferreira's react-native-webview-android for easier setup;
- adds the video recording functionality;
- adds support for the
accept
attribute; - adds support for the
multiple
attribute; - adds support for sdk 26, using
FileProvider
; - adds runtime Camera Permissions (thanks Pablo Navarro);
It should work with React Native 0.50+, and reverts to the built-in WebView on iOS.
Installation
npm install git+ssh://git@github.com:andreipfeiffer/react-native-webview-android-file-upload.git
Auto linking
react-native link react-native-webview-android-file-upload
The above should make (most of) the changes listed below. If it didn't, you should try manual linking.
or Manual linking
- Update
android/setting.gradle
...... include ':react-native-webview-android-file-upload'project(':react-native-webview-android-file-upload').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview-android-file-upload/android') ......
- Update
android/app/build.gradle
...... dependencies { ...... // for gradle < 3.0 compile project(':react-native-webview-android-file-upload') // for gradle 3+ implementation project(':react-native-webview-android-file-upload')}
- Register Module in
android/app/src/main/java/com/[your-project-package]/MainApplication.java
// <--- import package
File Provider setup
- Add file provider path resource
file_provider_paths.xml
in[your project]/android/app/src/main/res/xml/
folder. If the folder does not exist, create a new one.
NOTE: this is a requirement for sdk 26
. This approach should NOT require you to ask/handle any dangerous permissions.
- Add permissions & configure file provider in
AndroidManifest.xml
:
...... ......
Re-build your application
Since you have changed native code, reloading the JS code alone won't work:
react-native run-android
Example
; // import module; { return <CustomWebView source= uri: "your-web-url" startInLoadingState=true // any other props supported by React Native's WebView /> ; }
ref
Getting the WebView { return <CustomWebView source= uri: "your-web-url" webviewRef= thiswebview = e /> ; } // then you can call any of the methods available on the built-in ref, like: // this.webview.reload(); // this.webview.injectJavaScript();
Controlling image and/or video
You can use the accept
attribute on the <input />
element to control what type of media your users will be allowed to upload:
<input type="file" />
will default to images and videos<input type="file" accept="image/*" />
will allow only image capture / selection<input type="file" accept="video/*" />
will allow only video recording / selection<input type="file" accept="image/*, video/*" />
same as default
Check out the example html.
Enable multiple file selection
You can use the multiple
attribute on the <input />
element to allow users to select multiple existing files:
<input type="file" multiple />
Changelog
Please refer to CHANGELOG.md.