Access Content uri in android

[EyalSi]

I'm getting a content uri in android:
'content://com.android.providers.media.documents/document/image%3A99'
Decoding it does not work, and it seems that it's impossible to access the file.
Does anyone has an idea how to access the file?

10x

[Elyx0]

Maybe here: https://stackoverflow.com/questions/3401579/get-filename-and-path-from-uri-from-mediastore

[aditya-simplecrm]

Any solution?

[dantman]

URIs returned from Android are DocumentProviders URIs. You need to access them using a ContentResolver. react-native-fs cannot handle DocumentProvider documents, it's only designed to work with files inside the limited areas of the filesystem the app is permitted to access.

Right now react-native-fetch-blob might work, though it actually does a lot wrong so it may not. React Native is going to be getting Blob/DocumentProvider support in the future (0.50 or 0.51 hopefully), so it'll soon be possible to do things from within react-native.

[aditya-simplecrm]

Any alternate solution for file picker and upload to server?

[aditya-simplecrm]

I am able to get base64 from content uri using below code

RNFetchBlob.fs.readFile(this.state.pdf_uri,'base64')
// files will an array contains filenames
.then((files) => {
this.setState({base64Str:files})
// console.log(files)
})

I used this https://github.com/wkh237/react-native-fetch-blob package

[dantman]

Yup, that could work for now, but keep in mind these problems with that library:
wkh237/react-native-fetch-blob#525 (comment)

[aditya-simplecrm]

@dantman Do you have solution of this problem?
I am new to react native.

[dantman]

@aditya-simplecrm The "solution" I'm using in the app I'm working on is just to wait another month for RN to get native Blob uploading.

Alternatively if you feel like writing native code you can just write your own upload code in Java and Objective-C/Swift native code instead of JS.

[EyalSi]

There is now a solution for this problem in react-native-fs. Enabling access and copy content:// files -itinance/react-native-fs#395

[dantman]

React Native 0.54.0 has finally been released with Blob support, you don't need any RNFS hacks. Now all we have to do is come up with some documentation on how to use it.

[AgNm]

@dantman can you please let me know how can we use it? Any document for same? I am using below version:

"react": "16.3.0-rc.0"
"react-native": "0.54.3"

[dantman]

@AgNm Lookup the how to use fetch(). Fetch the content:// URL you get back from the document provider like you would any other URL. You should be able to get a Blob instance for the Body. The data for this Blob will be kept on the Native side of react. From there you should be able to use the normal web APIs for Blob instances (there may be some React Native specific behaviours you should look at in documentation or source code). I'm not sure what the API for getting the raw data out of the Blob is. But I do know that you can normally use a Blob as the body of a POST or probably the value of a FormData value. In other words, you should be able to fetch() a content:// URL and then upload the Blob you get back, and React Native will do this without ever sending whatever huge amount of data you downloaded over the slow Native<->JS bridge React Native uses.

[AgNm]

@dantman @Elyx0
I am using below code:

            const data = new FormData();
            data.append('name', file.fileName);
            data.append('photo', {
                  uri: uri_path,
                  type: file.type,
                  name: file.fileName
            });

            fetch(`${API.imageUpload}`, {
            method: 'post',
            body: data
            }).then(res => {
                console.log(JSON.stringify(res));
            });

Below is getting printed in console.log:

            {
                "type": "default",
                "status": 200,
                "ok": true,
                "statusText": 200,
                "headers": {
                    "map": {
                        "date": ["Thu, 05 Apr 2018 09:30:01 GMT"],
                        "content-length": ["2"],
                        "x-powered-by": ["ASP.NET"],
                        "x-aspnet-version": ["4.0.30319"],
                        "expires": ["-1"],
                        "content-type": ["application/json; charset=utf-8"],
                        "server": ["Microsoft-IIS/8.0"],
                        "pragma": ["no-cache"],
                        "cache-control": ["no-cache"]
                    }
                },
                "url": "",
                "_bodyInit": {
                    "listeners": {},
                    "isRNFetchBlobPolyfill": true,
                    "multipartBoundary": null,
                    "_ref": "/data/user/0/com.test/files/RNFetchBlob-blobs/blob-zzzqjeyyi7l2qml24yjhs2",
                    "_blobCreated": true,
                    "_closed": false,
                    "cacheName": "blob-zzzqjeyyi7l2qml24yjhs2",
                    "type": "text/plain",
                    "size": 2
                },
                "_bodyBlob": {
                    "listeners": {},
                    "isRNFetchBlobPolyfill": true,
                    "multipartBoundary": null,
                    "_ref": "/data/user/0/com.test/files/RNFetchBlob-blobs/blob-zzzqjeyyi7l2qml24yjhs2",
                    "_blobCreated": true,
                    "_closed": false,
                    "cacheName": "blob-zzzqjeyyi7l2qml24yjhs2",
                    "type": "text/plain",
                    "size": 2
                }
            }

I am not getting how to proceed further. Can you please help.