My goal is to develop a Chrome extension that allows users to upload files directly to Dropbox.com. While most aspects of the functionality are working smoothly, I am encountering some challenges with the CSV format. The code snippet below demonstrates how I generate and format the file before automatically downloading it. When I open the downloaded file on my computer, everything appears as expected. However, issues arise when I attempt to upload the same file to Dropbox.com:
- The platform does not recognize newline characters ('/n').
- White spaces are treated as '%20'.
- An additional string '
data:text/csv;charset=utf-8' is added at the beginning of the file.
Please note that the formatting remains intact when I download the file directly to my computer. It's only upon uploading and opening the file on Dropbox.com that these issues emerge.
var csvContent = "data:text/csv;charset=utf-8;";
csvContent += localStorage["Table"];
var date = new Date();
// Filename format includes a unique user ID and timestamp
var filename = uniqueID + " " + date.getYear() + "-" + date.getMonth() + "-" + date.getDate() + ": " + date.getHours() + "." + date.getMinutes() + ": " + date.getSeconds() + ".csv";
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", filename);
link.click();
The following code snippet pertains to uploading the file to Dropbox:
var uploadUrl = 'https://api-content.dropbox.com/1/files_put/dropbox/folder/' + filename;
var headers = {
Authorization: 'Bearer ' + localStorage.authorization_token
};
$.ajax({
url: uploadUrl,
headers: headers,
type: 'PUT',
// Prevent JQuery from treating the form as a querystring
processData: false,
contentType: false,
data: link
}).complete(function (data) {
// Log the JSON response for verification
console.log(data.responseText);
});