cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Are you an educator? Well we want to hear from you, so check out some tools we think might help you out here!

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Empty files on upload

Empty files on upload

gmacerola
Explorer | Level 3

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.
4 Replies 4

Re: Empty files on upload

Greg-DB
Dropboxer

[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).

Re: Empty files on upload

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);

Re: Empty files on upload

Greg-DB
Dropboxer

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. 

Re: Empty files on upload

gmacerola
Explorer | Level 3

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

Poll
We love to learn from the educators who use Dropbox. Whether you teach kids, teens, adults or a combination of all three, we want to know what apps and integrations you use with Dropbox to help with teaching. Which of the ones below is your favorite, or most used tool?
Who's talking

Top contributors to this post

  • User avatar
    gmacerola Explorer | Level 3
  • User avatar
    Greg-DB Dropboxer
What do Dropbox user levels mean?
Need more support?