EasyUI Forum

Hi.

Have tried to find a solution for dropping an image to an img and preview it. After that, just push the filebox upload button.

Anyone that have an solution ??

Jesper

Now i got this code

(My filebox $('#file').filebox)

const image_drop_area = document.querySelector("#image_drop_area");
var uploaded_image;

// Event listener for dropping the image inside the div
image_drop_area.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  fileList = event.dataTransfer.files;
  //document.querySelector("#file_name").textContent = fileList[0].name;
 
  readImage(fileList[0]);
});

// Converts the image into a data URI
readImage = (file) => {
  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    uploaded_image = event.target.result;
    document.querySelector("#image_drop_area").style.backgroundImage = `url(${uploaded_image})`;
  });
  reader.readAsDataURL(file);
}


The image is shown in div, but how to get it into the filebox, to upload