'React-Native unable to put a video to Amplify storage from local file system

Given the following:

  const path = 'file:///data/user/0/com.thing.place/cache/VisionCamera-20220520_1215171796142274516288565.mp4'

  const uploadVideo = async () => {
    const timestamp = Date.now()
    const filename = 'blablablah'

    // tried with and without the following:
    // const response = await fetch(path)
    // console.log(response) // fetch.umd.js:600 Not allowed to load local resource: {path}
    // const blob = await response.blob()
    //    

    // below is never triggered?
    const upload = Storage.put(filename, path, {
      contentType: 'video/mp4',
      resumable: true,

      completeCallback: (event) => {
        console.log(`Successfully uploaded ${event.key}`)
      },
      progressCallback: (progress) => {
        console.log(`Uploaded: ${progress.loaded}/${progress.total}`)
      },
      errorCallback: (error) => {
        console.error('Unexpected error while uploading', error)
      },
    })
  }

This is never erroring out or failing, it just never starts. What is missing here and or how do we upload the file from the local file system cached storage?

  • Permissions granted, check
  • S3 policies in place, check
  • Amplify configured, check
  • file able to be viewed in react-native-video, check
  • file created and stored via react-native-vision-camera

As always any and all direction is greatly appreciated, so thanks in advance!



Solution 1:[1]

The issue is that when the debugger is running via debug in the in-app menu, the fetch call:

const response = await fetch(path)

...fails silently, and the code never begins the upload.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 studiobrain