0

I am making a site where you can convert your file to a data URL. Here is my current code where you select the file:

function convertToDataURL() {
  alert("convert to data url");
}
.dropzone {
  border: 1px solid lightgray;
  padding: 2rem;
  margin: 2rem;
  border-radius: 10px;
  font-family: Arial;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
}
<input id="fileInput" type="file" style="display: none" onchange="convertToDataURL()" />
<label for="fileInput">
  <div class="dropzone">Select or drop a file here</div>
</label>

The JavaScript works just fine, which is why I left it out. If I click the file input and select a file, the conversion successfully works. But if I drag a file to the file input, the input doesn't register the file, and the file just opens in a new tab. What is the cause of this, and how can I fix it?

Caleb Liu
  • 627
  • 5
  • 18
  • 5
    Can you elaborate as to how you reached the conclusion that a simple `
    ` with no backing JavaScript functionality would accept a file drop out of the box? Can you share the source upon which you're basing that implicit claim? Usually you need to include something like `dropzone.js` to get the functionality you need (or to implement it yourself).
     – esqew Jul 05 '22 at 18:45
  • 3
    The JS should be included. – Dan Zuzevich Jul 05 '22 at 18:45
  • 1
    Right, to put it simply, the standard `` tag does not support drag-and-drop. You have to load a module to do that. The standard browser response to a dropped file is to open a new tab, as you have seen. – Tim Roberts Jul 05 '22 at 18:49
  • 1
    The div is inside a ` – Caleb Liu Jul 05 '22 at 18:50
  • 1
    The raw `` registered file drag and drops. – Caleb Liu Jul 05 '22 at 18:51

0 Answers0