nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

CORS does not seem to work for uploading files from the browser.

Paul H.37

I'm attempting to upload files from the browser to a Dropbox folder on the user's account. The way I have it set up right now, OAuth2 is triggered using a link, which then redirects to the server when done and the server saves the token with the user's data in the database. That token is then sent back to the user whenever they're on the uploading page. When a file is uploaded, I'm trying to PUT it to the /files_put endpoint using JQuery's AJAX method. The problem I'm having is that whenever I try to upload the file I get an error stating

XMLHttpRequest cannot load https://api-content.dropbox.com/1/files_put/auto/Apps/The%20Worm/a7a0122fedc9478d95caa63546fe6024.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://localhost:3363' is therefore not allowed access.

I'm not entirely sure what to do from here. It would probably work if I were to have the file sent to my server and then out to Dropbox, but I want to avoid that, as that would be slow and would count as double data transfer in and out of my server. With a little bit of research, it would seem that the Access-Control-Allow-Origin header needs to be set on Dropbox's end.

Find more posts tagged with

API

Abuse

Comments

Steve M.

CORS is generally supported throughout the API. (There's even a JavaScript SDK: https://github.com/dropbox/dropbox-js.)

Could you share your code?

Paul H.37

I'm not entirely sure how to properly format code on here, but here's the request bit (with the irrelevant success and error functions stripped).

$.ajax({  
&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;"https://api-content.dropbox.com/1/files_put/auto/Apps/The&nbsp;Worm/"&nbsp;+&nbsp;file.name,  
&nbsp;&nbsp;&nbsp;&nbsp;headers:&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Authorization:&nbsp;'Bearer&nbsp;'&nbsp;+&nbsp;dropbox_token,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentLength:&nbsp;file.size  
&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;crossDomain:&nbsp;true,  
&nbsp;&nbsp;&nbsp;&nbsp;crossOrigin:&nbsp;true,  
&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'PUT',  
&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;file.type,  
&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;evt.target.result,  
&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;'json',  
&nbsp;&nbsp;&nbsp;&nbsp;processData:&nbsp;false  
});

I had looked at the Javascript SDK, but it looks like you can't just put a token into the client to use, and I don't want to have to re-OAuth each time.

Steve M.

I'm going to try your code, but FYI, you can just supply an existing OAuth access token with dropbox.js by using this constructor:

var client = new Dropbox.Client({ token: '<YOUR TOKEN HERE>' });

Paul H.37

Alright, using the Dropbox Javascript SDK all is working as it should. Still not sure why my code wasn't working, but this is for sure easier.

I couldn't find any documentation that said one way or another, does client.writeFile() allow chuncked (>150MB) uploads?

Steve M.

I'm pretty sure that writeFile just does a call to /files_put . I think you want resumableUploadStep and resumableUploadFinish to do a chunked upload.

Steve M.

I think the issue with your existing code is the "contentLength" header you're setting. Dropbox's CORS setup doesn't allow that header. It's also non-standard... I think you meant Content-Length , but I don't believe you'll be allowed to set that manually. Just pass the data you want to send and leave off this header.

At least in Chrome, something very similar to your code snippet worked for me once I removed the "contentLength " header.