Child Item

Upload file using jquery

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

Find more posts tagged with

Developers

Comments

Greg-DB

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

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

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.