0

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

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

and 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

So i just wonder how i may get this to work with the v2 API?

thanks in advanced.

Community
  • 1
  • 1
SunnyHoHoHo
  • 318
  • 3
  • 8
  • 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

1 Answers1

0

Hope this helps someone in the future.

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;
}
prismspecs
  • 1,409
  • 5
  • 19
  • 35