cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Back again with another edition of 'How we use Dropbox', so find out how Emma uses to-do lists to get it all done 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: 

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

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

Paul H.37
New member | Level 1

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.jp.... 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.

6 Replies 6

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

Steve M.
Dropboxer

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

Could you share your code?

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

Paul H.37
New member | Level 1

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({  
    url: "https://api-content.dropbox.com/1/files_put/auto/Apps/The Worm/" + file.name,  
    headers: {  
        Authorization: 'Bearer ' + dropbox_token,  
        contentLength: file.size  
    },  
    crossDomain: true,  
    crossOrigin: true,  
    type: 'PUT',  
    contentType: file.type,  
    data: evt.target.result,  
    dataType: 'json',  
    processData: 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.

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

Steve M.
Dropboxer

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

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

Paul H.37
New member | Level 1

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?

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

Steve M.
Dropboxer

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.

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

Steve M.
Dropboxer

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.

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
    Steve M. Dropboxer
  • User avatar
    Paul H.37 New member | Level 1
What do Dropbox user levels mean?
Need more support?