Empty files on upload

[gmacerola]

I have seen that this issue has been presented a few times before however, those solutions haven't helped in completed this last task for my app.

I am using React Native with Expo.  I am using Image Picker to select an image from iOS, and getting the uri suck as 'file:///var/mobile/Containers/Data/Application/9A9F8016-CB14-4772-BF42-91DC74EA40CC/Library/Caches/ExponentExperienceData/%2540anonymous%252Fheritagefilmsapp-5de39698-e6f1-4070-83cc-562fa650fca5/ImagePicker/855BDF4B-97F3-413C-BADA-F278CE645FAE.png'

I think I need to convert the uri image into binary data but for the life of me don't understand how to do that.

This is my useEffect hook to upload the image:

useEffect(() => {
if (!image) {
return;
}
function http_header_safe_json(v) {
return JSON.stringify(v);
}
var myHeaders = new Headers();
myHeaders.append(
"Authorization",
"Bearer TOKEN"
);
myHeaders.append(
"Dropbox-API-Arg",
http_header_safe_json({
path: `/${user.username}/!UserUploaded_1234.${fileType}`,
mode: {
".tag": "add",
},
autorename: true,
})
);
myHeaders.append("Content-Type", "application/octet-stream");
var file = imageData;

var requestOptions = {
method: "POST",
headers: myHeaders,
body: file,
redirect: "follow",
};

fetch("https://content.dropboxapi.com/2/files/upload", requestOptions)
.then((response) => response.json())
.then((result) => {
console.log(result);
})
.catch((error) => console.log("error", error));
}, [imageData]);

Here is my function to grab the uri:

const chooseFromLibrary = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
      base64: true,
    });
    if (!result.cancelled) {
      setImage(result.uri);
      let cut = result.uri.split(".");
      setImageData(result.uri);
      setFileType(cut.pop());
    }
}

 Any help on this would be greatly appreciated.

[Greg-DB]

[Cross-linking for reference: https://stackoverflow.com/questions/66862389/image-upload-to-dropbox-api-from-ios-sends-corrupted-fi... ]

The /2/files/upload endpoint is a "content-upload" style endpoint, meaning that it requires the file data to be uploaded in the request body. I see you're attempting to set the file data as such by using the "body" parameter in your "requestOptions" that you pass to "fetch". 

That seems correct, but you'll need to make sure your "file" variable contains the actual file data you want to upload.

I understand you currently just have the URL for local file data though; not the file data itself. You'll need to read the data from the local filesystem in order to pass the data along. I'm afraid I can't offer much guidance on doing so though as that's not related to the Dropbox API itself. You may need to refer to the relevant iOS documentation from Apple (or otherwise React/Expo if they offer functionality for this).

[gmacerola]

I was able to read the base64 data that I got back and then used that to upload.  So I am uploading a variable that has the base64 stuff and now the upload is 1.06mb but is still corrupted/not viewable.  Any idea?

let data = result.uri.split(",")[1];

setImageData(data);

[Greg-DB]

When you upload data to Dropbox via the API, you should upload the actual file data, without any encoding (such as base64 encoding). Dropbox does not apply any decoding on the uploaded file data; it will just commit what you send. Try uploading the data without the base64 encoding. 

[gmacerola]

I understand.  I just can't seem to find a way to convert the base64 data to binary in react-native.