JavaScript write base64 image data to Dropbox using API v2

Question

I'm currently working on a feature for a web app using Dropbox. The feature involves some image editing using an HTML 5 Canvas and saving the canvas image to Dropbox.

I'm trying to get the canvas image converted to base64 image data and write directly to Dropbox using JavaScript on the client side only.

Since Dropbox API v1 is now deprecated,I'm trying to implement this in v2.

I've done some digging but most of the examples I can find were using the writeFile method in version 1 API, like this one: Save image to dropbox with data from canvas

How may I get this to work with the v2 API?

Do you have any code that you've tried? And do you really have to encode it as a base64 encoded string? You should be able to upload it as a regular blob file. — Daniel B, Dec 06 '16 at 14:57
No, i don't have to encode it as a base64 string. and yes, i can provide some code too, only that i'm still at POC stage, i'm exploring different approaches. — SunnyHoHoHo, Dec 06 '16 at 15:58
The [official Dropbox API v2 JavaScript SDK](https://github.com/dropbox/dropbox-sdk-js) and [this example](https://github.com/dropbox/dropbox-sdk-js/blob/master/examples/upload/index.html#L49) may be a good starting point. — Greg, Dec 06 '16 at 18:14
@Greg, in fact that's where I was coming from. the example shows how to upload a physical file, but I'd like to upload image on the fly. And i don't seem to be able to find examples to upload blob file using v2 API. — SunnyHoHoHo, Dec 07 '16 at 09:40
The `filesUpload` method can also take data directly. E.g., you can pass in a string. Try it out and post a new question with your code if you run in to any issues. — Greg, Dec 07 '16 at 18:39

score 0 · Answer 1 · edited Sep 02 '22 at 10:56

You'll need something like this

var canvas = document.getElementById("paint");

then

  function uploadFile() {
  var ACCESS_TOKEN = "xxx";
  var dbx = new Dropbox({
    accessToken: ACCESS_TOKEN
  });
  var fileInput = document.getElementById('file-upload');
  var file = fileInput.files[0];


  //Get data from canvas
  var imageSringData = canvas.toDataURL('image/png');
  //Convert it to an arraybuffer
  var imageData = _base64ToArrayBuffer(imageSringData);


  dbx.filesUpload({
      path: '/' + "test.png",
      contents: imageData
    })
    .then(function(response) {
      var results = document.getElementById('results');
      results.appendChild(document.createTextNode('File uploaded!'));
      console.log(response);
    })
    .catch(function(error) {
      console.error(error);
    });
  return false;
}



function _base64ToArrayBuffer(base64) {
  base64 = base64.split('data:image/png;base64,').join('');
  var binary_string = window.atob(base64),
    len = binary_string.length,
    bytes = new Uint8Array(len),
    i;

  for (i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

I would highly avoid putting any access tokens/api keys on the client side. — Hamada Fadil Mahdi, Jul 13 '19 at 18:55

JavaScript write base64 image data to Dropbox using API v2

1 Answers1