How to upload image with shopify Polaris DropZone component

Question

I'm using Polaris to develop an app for Shopify and need to upload an image using DropZone component, but I can't find how to get base64 file. Based on the document, in onDrop event,

I can get images files:

and also I can convert it to blob with this code:

window.URL.createObjectURL(files[0])

then I want to convert the file to base64, How can I do this?

Answer 1

Polaris DropZone component works as an HTML file input, so there aren't any major differences between input and DropZone except UI and design. it returns a file object and you should load it as loading an image like this:

var reader = new window.FileReader()
reader.readAsDataURL(files[0])

now you can access to the blob and must convert this blob to base64:

reader.onload = function () {
  var base64data = reader.result
}