Is there possible way to detect the color by using ColorThief which is uploaded from Dropzone?

Question

I used react-dropzone for image upload and I got “file name” and “preview” for each uploaded item from the dropzone.

And I would like to use ColorThief for detecting the uploaded image of colors. Because I have to reject when the color is more than 20 from the uploaded image.

I got the following error when I put “file name” in image.src:

Unhandled Rejection (IndexSizeError): Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Here is my code.

var image = new Image;
image.src = FILENAME_FROM_DROPZONE;
var colorThief = new ColorThief();
var dominantColor = colorThief.getPalette(image);

Is there any way to get a complete file path from DropZone? Now I just got the uploaded file name.

I think the error occurs because there is no complete file path in image.src.

How can I get a complete file path from Dropzone? Is there any another way to solve this error please?

Answer 1

I am doing this using FileReader, here is the code:

// let's get the data from DropZone
const { acceptedFile } = e.detail
let reader = new FileReader()
reader.readAsDataURL(acceptedFile)

// create an image
let img = new Image()
img.src = reader.result

// and now let use the colorThief
const colorThief = new ColorThief()
const colors = colorThief.getColor(img)

This way you have your dominant color and can use image for preview.