React-Native: Downloading and uploading files from android webview

Question

I am using the React-Native webview bridge module because I need its functions and now I am trying to make work the downloading and uploading files. For downloading I was sending a message with the url of the file and then using the Linking package to download in browser, unfortunately I was getting that the download is unsuccessful. Is there a way how I can manage both to work on this module?

What about use base64 to convert the file to a string an upload/download that string? — Carlos, Dec 01 '16 at 12:13
I did managed to make the download like this but not the upload. — NinetyHH, Dec 01 '16 at 12:17
I'm doing this in a React Native app, just make sure you are sending a json message properly formatted and also the headers of the request. — Carlos, Dec 01 '16 at 12:18
Do you have a public repo to see your example? Also how did you trigger the filemanager? — NinetyHH, Dec 01 '16 at 12:19
No, but I can paste the code as a response. Regarding to the filemanager, I'm just sending pictures, so is the image picker the one that takes care of that. — Carlos, Dec 01 '16 at 12:23
But like this I can still not trigger the button in the webview. — NinetyHH, Dec 01 '16 at 23:26

score 5 · Accepted Answer · edited May 23 '17 at 12:00

5

I recently had to face the same problem for Android (although only for file uploads). You can see my implementation here: https://github.com/martinarroyo/react-native-webview-file-upload/

Maybe if you extend that code to include something like this you can include file downloading.

edited May 23 '17 at 12:00

Community

1
1

answered Nov 29 '16 at 07:12

martinarroyo

9,389
3
38
75

I need somehow to use it together with the webview bridge module because I need its functions. Do you have an idea how to do it? – NinetyHH Nov 30 '16 at 20:41
Do you mean [this package](https://github.com/alinz/react-native-webview-bridge/)? I guess the only thing you have to do is to integrate [this functionality](https://github.com/martinarroyo/react-native-webview-file-upload/blob/master/android/app/src/main/java/com/webviewfileuploadandroid/androidWebView/AndroidWebViewManager.java#L32) into the rn-webview-bridge's `AndroidWebViewManager`. Also you will have to look into the `AndroidWebViewPackager` to handle the activity reference, and edit the JavaScript file to include the required prop. – martinarroyo Nov 30 '16 at 20:58

score 0 · Answer 2 · answered Dec 01 '16 at 12:27

fetch(
            _apiRoot+url+'?_format=json&access_token='+this.getAccessToken(),
            {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body:JSON.stringify(data)
            }).then((response) => response.json())
            .then((response) => {
                success(response.data);
            })
            .catch((errorData) => {
                error(errorData);
            });

//Where data is an object like

let data = {
  images:[responseDataFromImagePicker.data,responseDataFromImagePicker.data]
}
//the picker returns the image encoded in base64

React-Native: Downloading and uploading files from android webview

2 Answers2