tus
Error: tus: cannot fetch `file.uri` as Blob, make sure the uri is correct and accessible.
Describe the bug
Not able to upload the file from tus-js-client react-native , showing [Error: tus: cannot fetch file.uri as Blob, make sure the uri is correct and accessible. [object Object]]
Expected behavior File to get uploaded on go lang local tus server
Setup details Please provide the following details, if applicable to your situation:
- Runtime environment: [React Native -v 0.63.4 and expo-image-picker 10.0.0]
- Used tus-js-client version: [2.3.0]
- Used tus server software: [tusd]
Please provide the full code you are using to upload with tus-js-client. Also, what is the object you are passing to the Upload constructor? Can you print it using console.log?
yes marius,
I'm running on android
code for the above problem using tus-js-client
function startUpload(file, filename, filetype) {
if (!file) return;
const upload = new tus.Upload(file, {
endpoint : 'https://tusd.tusdemo.net/files/',
retryDelays: [0, 1000, 3000, 5000],
metadata : {
filename: filename,
filetype: filetype,
},
onError: (error) => {
// this.setState({
// status: `upload failed ${error}`,
// })
console.log(error)
},
onProgress: (uploadedBytes, totalBytes) => {
uploadedBytes,
totalBytes
// this.setState({
// totalBytes,
// uploadedBytes,
// })
},
onSuccess: () => {
// this.setState({
// status : 'upload finished',
// uploadUrl: upload.url,
// })
console.log('Upload URL:', upload.url)
},
})
upload.start()
// this.setState({
// status : 'upload started',
// uploadedBytes: 0,
// totalBytes : 0,
// uploadUrl : null,
// })
}
console log of the object {"cancelled": false, "duration": 88822, "height": 1080, "rotation": 0, "type": "video", "uri": "file:/data/user/0/com.dashdub/cache/ImagePicker/b7014288-2693-4eb8-8323-dcd6a2df169c.mp4", "width": 1920}
I'm getting this from expo-image-picker
Thanks for the details. The code looks fine to me and as well as the file object. Are you sure that your application has the correct permissions to access the selected file? Does any other logs in the Android console give an indication of what the error could be?
My current feeling is that this is caused by some missing setting in your Android application. The only possible cause directly in tus-js-client is that we are using XMLHttpRequest for fetching the file (https://github.com/tus/tus-js-client/blob/master/lib/browser/uriToBlob.js#L8), instead of the new Fetch API (see https://github.com/expo/examples/blob/1411319810e1fe1e365bebe9d867d40e587c9870/with-aws-storage-upload/App.js#L99-L103, for example). They should be equivalent but maybe I am wrong here. That might be worth an investigation if you cannot find anything in your app.
yes marius,
I'm running on android
code for the above problem using tus-js-client
function startUpload(file, filename, filetype) { if (!file) return; const upload = new tus.Upload(file, { endpoint : 'https://tusd.tusdemo.net/files/', retryDelays: [0, 1000, 3000, 5000], metadata : { filename: filename, filetype: filetype, }, onError: (error) => { // this.setState({ // status: `upload failed ${error}`, // }) console.log(error) }, onProgress: (uploadedBytes, totalBytes) => { uploadedBytes, totalBytes // this.setState({ // totalBytes, // uploadedBytes, // }) }, onSuccess: () => { // this.setState({ // status : 'upload finished', // uploadUrl: upload.url, // }) console.log('Upload URL:', upload.url) }, }) upload.start() // this.setState({ // status : 'upload started', // uploadedBytes: 0, // totalBytes : 0, // uploadUrl : null, // }) }console log of the object {"cancelled": false, "duration": 88822, "height": 1080, "rotation": 0, "type": "video", "uri": "file:/data/user/0/com.dashdub/cache/ImagePicker/b7014288-2693-4eb8-8323-dcd6a2df169c.mp4", "width": 1920}
I'm getting this from expo-image-picker
Hi @stoner2497 !
Shouldn't the path be prefixed "file://" ? try "uri": "file:///data/user/0/com.dashdub/cache/ImagePicker/b7014288-2693-4eb8-8323-dcd6a2df169c.mp4"
I have for android: ========== FileSource ====== {"file": {"uri": "file:///data/user/0/com.rn_uploader/cache/rn_image_picker_lib_temp_804c14df-4c75-417c-b7fd-ce412080eeef.jpg"}, "size": 2216828}
Hi In addition to above solutions like
file object
and
file://
Add android:requestLegacyExternalStorage="true" inside <application> in AndroidManifest.xml and compileSdkVersion = 29 targetSdkVersion = 29 in build.gradle.
Hope this helps!
Hello,
currenty I am facing the same issue. The error appears when uploading large files like 100mb.
Used uri ->
"uri": "file:///storage/emulated/0/DCIM/Camera/20211010_150029.mp4"
adb logcat indicates OOM error as I have expected. I am running out of ideas about being able to upload large files from android
11-20 00:59:48.844 3148 3667 W nia.android.de: Throwing OutOfMemoryError "Failed to allocate a 67108880 byte allocation with 25165824 free bytes and 62MB until OOM, max allowed footprint 227914336, growth limit 268435456" (VmSize 21832656 kB)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: Failed to send url request: file:///storage/emulated/0/DCIM/Camera/20211010_150029.mp4
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: java.lang.OutOfMemoryError: Failed to allocate a 67108880 byte allocation with 25165824 free bytes and 62MB until OOM, max allowed footprint 227914336, growth limit 268435456
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at java.util.Arrays.copyOf(Arrays.java:3164)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at java.io.ByteArrayOutputStream.grow(ByteArrayOutputStream.java:118)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at java.io.ByteArrayOutputStream.ensureCapacity(ByteArrayOutputStream.java:93)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at java.io.ByteArrayOutputStream.write(ByteArrayOutputStream.java:153)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.modules.blob.BlobModule.getBytesFromUri(BlobModule.java:238)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.modules.blob.BlobModule.access$000(BlobModule.java:45)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.modules.blob.BlobModule$2.fetch(BlobModule.java:85)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.modules.network.NetworkingModule.sendRequestInternal(NetworkingModule.java:281)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.java:243)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at java.lang.reflect.Method.invoke(Native Method)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at android.os.Handler.handleCallback(Handler.java:873)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at android.os.Handler.dispatchMessage(Handler.java:99)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at android.os.Looper.loop(Looper.java:214)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
11-20 00:59:48.845 3148 3667 E unknown:NetworkingModule: at java.lang.Thread.run(Thread.java:764)
Hi @swizes !
Look at https://github.com/tus/tus-js-client/issues/146
Hope this helps!