We're making changes to the Community, so you may have received some notifications - thanks for your patience and welcome back. Learn more here.
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:
method: 'POST',
headers: {
Authorization: `Bearer ${accessToken}`,
'Dropbox-API-Arg': JSON.stringify({
path: '/example.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)
I don't understand where the data is going/being placed. Would it be in the blob? or is it in response.text()? I did console.log the response.text and saw lots of data there that was random ascii characters which I assumed was the binary data from the image. I tried to encode the data from response.text and got an error stating that there were characters that could not be turned into base64. I also tried converting the blob into base64 and only got around 20 to 50 characters which doesn't seem correct when my image is around 4 mB. I am a beginner at interacting with APIs maybe there's something I am missing? maybe I need to turn the response.text into a blob object? Any help would be greatly appreciated.
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.
- Greg-DB
Dropbox Staff
The /2/files/download endpoint is a "content-download" style endpoint, meaning that on a successful call, the raw requested file data is returned in the response body.
I see you're not using an official Dropbox SDK, so you may need to refer to the documentation for your client/platform for information on how to handle data in responses like this. We can't offer support for that itself as it's not made by Dropbox.
For example, there's some documentation for fetch here, with an example of using blob() to retrieve image data.
From my understanding, you are saying that the image data should be located within response.body. Is that correct? I am not using the dropbox SDK but I am interacting with the dropbox API following the instructions as described by the download http documentation. When I console.logged the response I got from the dropbox api here is what it said:
LOG {"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "bbf7e68a-80ac-4c97-ae88-c2808166666e", "offset": 0, "size": 4808078}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "bbf7e68a-80ac-4c97-ae88-c2808166666e", "offset": 0, "size": 4808078}}, "bodyUsed": false, "headers": {"map": {"accept-encoding": "identity,gzip", "accept-ranges": "bytes", "cache-control": "no-cache", "content-length": "4808078", "content-type": "application/octet-stream", "date": "Fri, 18 Aug 2023 16:38:30 GMT", "dropbox-api-result": "{\"name\": \"test.jpg\", \"path_lower\": \"/pictures/test/misc/test.jpg\", \"path_display\": \"/Pictures/Test/MISC/test.jpg\", \"id\": \"id:q1a6odEFxL4AAAAAAAAo_A\", \"client_modified\": \"2023-07-30T18:40:28Z\", \"server_modified\": \"2023-07-30T18:40:28Z\", \"rev\": \"601b8a5decf8269e55553\", \"size\": 4808078, \"media_info\": {\".tag\": \"metadata\", \"metadata\": {\".tag\": \"photo\", \"dimensions\": {\"height\": 3960, \"width\": 2640}, \"time_taken\": \"2019-07-09T10:39:36Z\"}}, \"is_downloadable\": true, \"content_hash\": \"40b0819017193231c2ba795f6f54e871623e6ac845814912fcb751749c984075\"}", "etag": "W/\"601b8a5decf8269e55553\"", "original-content-length": "4808078", "server": "envoy", "strict-transport-security": "max-age=31536000; includeSubDomains; preload", "x-dropbox-request-id": "92f211e8055140f6bb43cc0354b0f485", "x-dropbox-response-origin": "far_remote", "x-robots-tag": "noindex, nofollow, noimageindex", "x-server-response-time": "501"}}, "ok": true, "status": 200, "statusText": "", "type": "default", "url": "https://content.dropboxapi.com/2/files/download"}
This is using the code shown in my first post. It says in the log 'bodyUsed: false' which makes me believe that response.body doesn't exist. So where would the image data be?
I did find this one sentence that might describe where the data is according to dropbox's documentation. 'The response body contains file content, so the result will appear as JSON in the Dropbox-API-Result response header.' I have checked the Dropbox-API-Result and have only found the file metaData there. There is a chance I am doing something weird in my request to dropbox and thats why the body isn't being sent? Maybe the image data is somewhere else? Any help would be greatly appreciated.
- Greg-DB
The file data would be in the response body, but not necessarily in a variable named 'response.body'. Exactly how you access it will depend on the network client you're using.
In this case, I see you're using 'fetch' as your network client, so I suggest referring to the fetch documentation I linked to in my previous message for information on how that works and how to access the data using that. For instance, it looks like using 'response.blob()' would make sense for your use case; that should contain the actual file data. I don't have context on exactly what you want to do with that data though, so what you do with it from there is up to you.
For reference, according to the documentation, the 'bodyUsed' property indicates if the body has already been read, not if it exists in the response to begin with.
For reference, the 'Dropbox-API-Result' header is a response header, which is separate from the response body. The 'Dropbox-API-Result' response header only contains the file metadata, not the file data.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
