CODEWITHSUNDEEP
javascriptdropzone.js
Jackie
Jackie

Reputation: 23477

Can I get the File name and if the file is a valid type (given mime) in the dragover event using DropzoneJs?

I have the following...

this.dropzone = new Dropzone(
  this.$refs.dropzoneElement,
  {
    url: this.url,
    acceptedFiles: "application/pdf",
  },
);
this.dropzone.on("dragover", ()=>{
  this.isHovered = true;
});
this.dropzone.on("success", (file)=>{
  this.$emit("success", file);
});
this.dropzone.on("addedfile", (file)=>{
  this.$emit("started", file);
  this.isHovered = false;
});

Is hovered just changes the border color. I want to change the border color to red if the file type is not allowed. I can't find anything in the input event that would give me this information. Is there a way to do this?

Upvotes: 0

Views: 124

Answers (1)

Vitalii
Vitalii

Reputation: 2131

According to Dropzone docs dragover should be getting an event from the browser and I suppose it should be of type DragEvent.

If so the event should have dataTransfer property of type DataTransfer with details of the files.

For example event.dataTransfer.items[0].type gives a content type of the 1st file.

You can try:

this.dropzone.on("dragover", (event)=>{
  console.log(event.dataTransfer.items[0].type);
  this.isHovered = true;
});

Here's small prototype using native browser APIs, Dropzone code for dragover handler should be similar:

document.getElementById('el').addEventListener('dragover', e => {
    if (e.dataTransfer.items.length) {
        if (e.dataTransfer.items[0].type === 'image/png') {
            // accepted file type
            document.getElementById('el').style.borderColor = 'green';
        } else {
            // unaccepted file type
            document.getElementById('el').style.borderColor = 'red';
        }
    }

    // extra debug information: display all file types
    const types = [...e.dataTransfer.items].map(item => item.type);
    document.getElementById('debug').innerHTML = `File types: ${types.join(', ')}`;
})
<div id="el" style="width: 200px; height: 200px; background: grey; border: 5px solid grey;">
    Drag files here<br>
    <div id="debug"></div>
</div>

Upvotes: 1

Related Questions