cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Want to learn some quick and useful tips to make your day easier? Check out how Calvin uses Replay to get feedback from other teams at Dropbox here.

Discuss Dropbox Developer & API

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

Upload file using jquery

Upload file using jquery

HrcKuhar
New member | Level 2

I'm trying to upload an image to dropbox using jquery, but I get an error for cors policy block. Is there another way to upload?

 

My code:

 

var xhr = new XMLHttpRequest();

xhr.upload.onprogress = function (evt) {
var percentComplete = parseInt(100.0 * evt.loaded / evt.total);
// Upload in progress. Do something here with the percent complete.
};

xhr.onload = function () {
if (xhr.status === 200) {
var fileInfo = JSON.parse(xhr.response);
// Upload succeeded. Do something here with the file info.
}
else {
var errorMessage = xhr.response || 'Unable to upload file';
// Upload failed. Do something here with the error.
}
};

xhr.open('POST', 'https://www.dropbox.com/sh/y7rp1h0cbquydix/AADnOhInfieO19mK_H3q71IJa?dl=0');
xhr.setRequestHeader('Authorization', 'Bearer ' + <ACCESS_TOKEN>);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
path: '/' + imgPath,
mode: 'add',
autorename: true,
mute: false
}));

xhr.send(imgPath);

 

3 Replies 3

Greg-DB
Dropbox Staff

From your code I see you're attempting to upload to a "shared link" (the "https://www.dropbox.com/sh/..." link). That only offers the ability to read the linked content though, not the ability to upload to it.

 

To programmatically upload a file, you can use the /2/files/upload Dropbox API endpoint. You can find information on using that in the documentation here.

HrcKuhar
New member | Level 2

I'm using this code to upload file but I get an error:

"Value should match pattern '\\A(?:(/(.|[\\r\\n])*)|(ns:[0-9]+(/.*)?)|(id:.*))\\z' (Parameter 'path')"

 

var client = new DropboxClient("<access_token>, "<access key>", "<secret key>");
try
{
await Upload(client, "https://www.dropbox.com/sh/...dl=0/", <image filename>, "AvatarImage"); -- this url is a link to share folder
}
catch (Exception ex)
{
var error = ex.Message + ex.Source;
}

 

async Task Upload(DropboxClient dbx, string folder, string file, string content)
{
using (var mem = new MemoryStream(Encoding.UTF8.GetBytes(content)))
{
await dbx.Files.UploadAsync(
folder + "/" + file,
WriteMode.Overwrite.Instance,
body: mem);
}
}

Greg-DB
Dropbox Staff

In this code, you are also attempting to upload to a shared link. Shared links do not support uploads like this. This method expects the path where you want to upload the file in the connected account. The error message is indicating that the path you're supplying is not in the expected format (since it is a shared link, not a path).

 

I recommend reading the File Access Guide for information on how to interact with paths and files in the Dropbox API.

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropbox Staff
  • User avatar
    HrcKuhar New member | Level 2
What do Dropbox user levels mean?