Hello all,
I am used Dropzone to drag and drop upload images and used Javascript Dropbox SDK ( dbx.filesUpload ) to multiple times to upload multiple files.
But I get "{" error_summary ":" too_many_requests / "," error ": {" reason ": {" .tag ":" too_many_requests "}," retry_after ": 15}}".
I have seen and tried many ways but still got the error, the links I have referenced:
Performance Guide
too_many_requests when uploading multiple files
How can I fix this? Below is my code:
var dropzone = new Dropzone('#demo-upload', {
previewTemplate: document.querySelector('#preview-template').innerHTML,
parallelUploads: 5,
thumbnailHeight: 120,
thumbnailWidth: 120,
maxFilesize: 500,
filesizeBase: 1000,
timeout: 5000,
acceptedFiles: 'image/*, .dng, .raw'
});
var minSteps = 6,
maxSteps = 60,
timeBetweenSteps = 200,
bytesPerStep = 100000;
dropzone.uploadFiles = function(files) {
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function(file, totalSteps, step) {
return function() {
file.upload = {
progress: 100.0 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
if (file.upload.progress == 100) {
file.status = Dropzone.SUCCESS;
self.emit("success", file, 'success', null);
self.emit("complete", file);
self.processQueue();
}
};
}(file, totalSteps, step), duration);
}
uploadFile(file);
}
}
function uploadFile(files) {
const UPLOAD_FILE_SIZE_LIMIT = 150 * 1024 * 1024; //157,286,400
var ACCESS_TOKEN = '*********************************';
var dbx = new Dropbox.Dropbox({ fetch: fetch, accessToken: ACCESS_TOKEN });
var file = files;
if (file.size < UPLOAD_FILE_SIZE_LIMIT) { // File is smaller than 150 Mb - use filesUpload API
dbx.filesUpload({ path: url, contents: file })
.then(function(response) {
if (response.status == 200) {
dbx.filesGetThumbnail({ path: response.result.path_display, format: "jpeg", size: "w960h640" })
.then(function(res) {
})
.catch(function(error) {
});
}
})
.catch(function(error) {
});
} else { // File is bigger than 150 Mb - use filesUploadSession* API
const maxBlob = 8 * 1000 * 1000; // 8Mb - Dropbox JavaScript API suggested max file / chunk size
var workItems = [];
var offset = 0;
while (offset < file.size) {
var chunkSize = Math.min(maxBlob, file.size - offset);
workItems.push(file.slice(offset, offset + chunkSize));
offset += chunkSize;
}
const task = workItems.reduce((acc, blob, idx, items) => {
if (idx == 0) {
// Starting multipart upload of file
return acc.then(function() {
return dbx.filesUploadSessionStart({ close: false, contents: blob })
.then(response => response.session_id)
});
} else if (idx < items.length - 1) {
// Append part to the upload session
return acc.then(function(sessionId) {
var cursor = { session_id: sessionId, offset: idx * maxBlob };
return dbx.filesUploadSessionAppendV2({ cursor: cursor, close: false, contents: blob }).then(() => sessionId);
});
} else {
// Last chunk of data, close session
return acc.then(function(sessionId) {
var cursor = { session_id: sessionId, offset: file.size - blob.size };
var commit = { path: url, mode: 'add', autorename: true, mute: false };
return dbx.filesUploadSessionFinish({ cursor: cursor, commit: commit, contents: blob });
});
}
}, Promise.resolve());
task.then(function(result) {
console.log(result);
}).catch(function(error) {
console.log(error);
});
}
return false;
}
// Example POST method implementation:
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
body: data // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
Thanks!!
