Accessing Cache Images to upload to S3, in React native-CodePudding

Using react-native-vision-camera, I saw that there is a path for the image. It seem readable by react native tag.

I attempted to upload using this path (I used both file:// for android, and same for IOS), however it failed. Each time the file was detected as "jpeg" or "jpg" but I couldn't access it.

After downloading (From S3 amazon where I uploaded) and converting the jpg to txt, I only find the "file://path".

import { Storage } from "aws-amplify";
    export default async function s3UploadBackup(file, user) {
        let formatted_date = moment().format("DD-MM-YYYY");
        let filePath = file.split("/");
        let fileImageName = filePath[filePath.length - 1];
        try {
            console.log("Files contains :"   JSON.stringify(file));
    
            // example of one of the URL I used  "file:///storage/emulated/0/Android/data/com.app/files/Pictures/image-c64a66b3-489d-4af6-bf93-7adb507ceda1790666367.jpg"
            const fileName = `${formatted_date}---${user.businessName}---${user.phoneNumber}---${user.location}---${fileImageName}`;
            return Storage.put(uploadBackup.path   user.sub   "/"   user.phoneNumber   "/"   fileName, file, {
                // contentType: "image/jpeg"
                contentType: file.mime
            })
        } catch(error) {
            console.log(error);
        } 
    }

CodePudding user response：

AWS-AMPLIFY support uploading file as BLOB and converting to specified file extension (JPEG, PNG,...).

Assume that we have local file URI - file:///storage/emulated/0/Android/data/com.app/files/Pictures/image-c64a66b3-489d-4af6-bf93-7adb507ceda1790666367.jpg

Let we refactor s3UploadBackup function

import { Storage } from "aws-amplify";
    export default async function s3UploadBackup(file, user) {
        let formatted_date = moment().format("DD-MM-YYYY");
        let filePath = file.split("/");
        let fileImageName = filePath[filePath.length - 1];
        try {
            console.log("Files contains :"   JSON.stringify(file));
    
            // example of one of the URL I used  "file:///storage/emulated/0/Android/data/com.app/files/Pictures/image-c64a66b3-489d-4af6-bf93-7adb507ceda1790666367.jpg"
            const fileName = `${formatted_date}---${user.businessName}---${user.phoneNumber}---${user.location}---${fileImageName}`;

  const blob = await new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = function () {
      resolve(xhr.response);
    };
    xhr.onerror = function (e) {
      reject(new TypeError("Network request failed"));
    };
    xhr.responseType = "blob";
    xhr.open("GET", localPath, true);
    xhr.send(null);
  });


  await Storage.put("yourKeyHere", blob, {
       contentType: "image/jpeg", // contentType is optional
    });
// We're done with the blob, close and release it
  blob.close();
        } catch(error) {
            console.log(error);
// We're done with the blob, close and release it
  blob.close();
        } 
    }