Forum Discussion

gmacerola's avatar
gmacerola
Explorer | Level 3
4 years ago

Empty files on upload

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's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff

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

    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's avatar
      gmacerola
      Explorer | Level 3

      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's avatar
        Greg-DB
        Icon for Dropbox Staff rankDropbox Staff

        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. 

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.5,945 PostsLatest Activity: 2 hours ago
351 Following

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!