amazon-web-servicesreact-nativeamazon-s3react-native-fetch-blobaws-amplify

How to upload images from local path to S3


I am developing a React Native application and trying to upload an image stored on the device to S3. I know the path to the image but when I try to upload the image, S3 returns an unsupported file error or uploads the file with its name but the file only contains the file path string.

I am using aws-amplify to establish these connections.

Here is the code block that I use:

 const file = `${RNFetchBlob.fs.dirs.DocumentDir}/${localFilePath}`;
 Storage.put("exampleFolder/" + userId + ".jpeg", file)
                .then(result => console.log(result))
                .catch(err => console.log(err))

Many thanks


Solution

  • There's a nice example in the aws-mobile-react-native-starter repo. You just need to read the file, and then you can upload it.

    return files.readFile(imagePath)
      .then(buffer => Storage.put(key, buffer, { level: 'private', contentType: result.type }))
      .then(fileInfo => ({ key: fileInfo.key }))
      .then(x => console.log('SAVED', x) || x);
    

    To read the file they've used react-native-fetch-blob:

    readFile(filePath) {
        return RNFetchBlob.fs.readFile(filePath, 'base64').then(data => new Buffer(data, 'base64'));
    }