javascriptreactjsshopifypolaris

How to upload image with shopify Polaris DropZone component


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: enter image description here

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?


Solution

  • 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
    }