Change drag image inside a DragEnter event

Question

I'm trying to define the image that appears when I drag an element inside my page. I saw how to do it with DataTransfer.setDragImage() in that link but with me it is not working. There are two differences between my code and the example:

• I'm trying to make this change through the DragEnter event while the link is done in DragStart;
• The image to be dragged will be in the user's file explorer, not in the HTML document.

I already did a test and the image is being generated correctly. This is the code responsible for this functionality:

function handleDragEnter(event)
{
    const img = new Image;
    const reader = new FileReader;
    reader.readAsDataURL((new Blob(icon(faPhotoFilmMusic).html, { type: 'image/svg+xml' })));
    reader.addEventListener('load', () => {
        img.src = reader.result;
        event.dataTransfer.setDragImage(img, 10, 10);
    });
}

Answer 1

I think the problem is in missing parentheses:

function handleDragEnter(event)
{
    const img = new Image(); // <=== change this 
    const reader = new FileReader(); // <=== change this 
    reader.readAsDataURL((new Blob(icon(faPhotoFilmMusic).html, { type: 'image/svg+xml' })));
    reader.addEventListener('load', () => {
        img.src = reader.result;
        event.dataTransfer.setDragImage(img, 10, 10);
    });
}