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?

Improve this question
5
  • 5
    Can you elaborate as to how you reached the conclusion that a simple <div> 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). Commented Jul 5, 2022 at 18:45
  • 3
    The JS should be included. Commented Jul 5, 2022 at 18:45
  • 1
    Right, to put it simply, the standard <input> 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. Commented Jul 5, 2022 at 18:49
  • 1
    The div is inside a <label for="fileInput">. So if the label registers file input, shouldn't the label's children? Commented Jul 5, 2022 at 18:50
  • 1
    The raw <input type="file"> registered file drag and drops. Commented Jul 5, 2022 at 18:51
Related questions
2325
How do you parse and process HTML/XML in PHP?
1239
How do I retrieve an HTML element's actual width and height?
830
Include another HTML file in a HTML file
Load 2 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.