You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
Forum Discussion
downloading an image using dropbox API
Hello, I am trying to download an image from dropbox api in react native. I am getting a success code: '200' and the response says that it is ok. I have included some of the javascript code below...
Hi squidlauncher64,
You didn't account that 'blob' method doesn't return actual blob, but Promise object wrapping this blob! That's where all your troubles come from. Also when you try to stringify some object, you're getting object declaration (no actual data) and that's why appear so short result - "[object Object]" - i.e. one more mess. 🙂
You have to handle correct type in correct way. A simplistic example follows:
var reader = new FileReader(); await fetch(...all staff here...).then((r)=>r.blob()).then((b)=>reader.readAsDataURL(b)); var b64encoded = reader.result; var rawBase64 = b64encoded.slice(b64encoded.search(',')+1);Depending on what you need either full encoded result (b64encoded) can be used or only the actual/raw base64 encoded string part (rawBase64). 😉
Hope this helps.
You are correct about how the response object works, and how bodyused works. I didn't quite understand that so thank you for pointing me to the documentation. What I am trying to do is download an image from dropbox using the api that the user selects and display it for the user. I know that the image component in react native can take base64 data. I tested it with a local asset image. So the general process as I understand it is, 1) download the image from dropbox as a blob. 2) convert it to base64 3) display it on the screen for the user. I am running into problems with the second step and I want to make sure I am using this correctly. The code I am using is included below:
const startUp = async () => {
method: 'POST',
headers: {
Authorization: `Bearer ${accessToken}`,
'Dropbox-API-Arg': JSON.stringify({
path: '/Pictures/Test/MISC/test.jpg'
}),
}
});
if (!response.ok) {
console.error('Failed to fetch folder contents:', response.status, response.statusText);
return;
}
else{
console.log('response is ok')
}
const fileContentData = await response.blob()
const fileData = encode(fileContentData)
console.log('fileData:', fileData)
Now I know that the encode function works because I use it for authentication with dropbox api. I use it for PKCE authentication for encoding the code challenge. Now when I run this I get:
LOG fileData: W29iamVjdCBPYmplY3Rd
This seems too short to me for a 4 mb picture. Another interesting thing is that I have changed it from the test.jpg to another image and it output the sane base64 string. I have tried using the code like this according to the documentation and I get an error stating that it cannot create a URL from the blob:
const startUp = async () => {
method: 'POST',
headers: {
Authorization: `Bearer ${accessToken}`,
'Dropbox-API-Arg': JSON.stringify({
path: '/Pictures/Test/MISC/test.jpg'
}),
}
});
if (!response.ok) {
console.error('Failed to fetch folder contents:', response.status, response.statusText);
return;
}
else{
console.log('response is ok')
}
const fileContentData = await response.blob()
const imageUrl = URL.createObjectURL(fileContentData);
const fileData = encode(imageUrl)
console.log('fileData:', fileData)
Now all this code can be wrong because I am a complete novice when it comes to using apis. With this I have some questions: Why is the base64 encoded data so short? From the documentation it seems like I am getting the 'response.blob' correctly. why does the second code throw the error? Do you see anything wrong with these code snippets I have provided?
On a side note: The main idea for using dropbox api directly and not using dropbox sdk is because I have interacted with spotify api in another project so I thought this would be rather straight forward just following the documentation. I have never used an sdk before and kind of seem intimidated by it. My main concern is performance. I would like the image to be ready for the user as soon as possible. Thats kind of why I am not saving the image anywhere. I am directly going from base64 encoding to image. So the question is would using the dropbox sdk improve performance? would it download the images faster and display it to the user quicker than using the dropbox api? would the dropbox sdk store the image somewhere else that i'd have to fetch i.e. a downloads folder? Where would it put the image?
Thanks again for all your help!
Hi squidlauncher64,
You didn't account that 'blob' method doesn't return actual blob, but Promise object wrapping this blob! That's where all your troubles come from. Also when you try to stringify some object, you're getting object declaration (no actual data) and that's why appear so short result - "[object Object]" - i.e. one more mess. 🙂
You have to handle correct type in correct way. A simplistic example follows:
var reader = new FileReader();
await fetch(...all staff here...).then((r)=>r.blob()).then((b)=>reader.readAsDataURL(b));
var b64encoded = reader.result;
var rawBase64 = b64encoded.slice(b64encoded.search(',')+1);Depending on what you need either full encoded result (b64encoded) can be used or only the actual/raw base64 encoded string part (rawBase64). 😉
Hope this helps.
Hello Здравко, Thank you for, your response, explaining how promises work, and sending me this code snippet. It really gave me a good place to troubleshoot and understand the issue. I was able to implement the code snippet provided and it worked! Thank you so much!
Hello @Здравко,
Thank you for your response. Thank you for explaining the issue with resolving the promise and for the code snippet. This gave me a clearer understanding of the problem as a place to troubleshoot. I was able to solve my problem using the code snippet you provided with some modification. Thank you so much!
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
