I'm attempting to make a control where you can both select a file to submit in the form and drop a file into it to do the same thing. I have something like this where it will also show a preview of the file if it's an image:
<div class="preview-image-container"> <input type="file" name="File" id="File" accept="image/*" class="image-url form-control" style="display:none;" /> <div class="preview-image-dummy"></div><img class="preview-image-url" /> <div class="preview-image-instruction"> <div class="preview-image-btn-browse btn btn-primary">Select file</div> <p>or drop it here.</p> </div> </div>
The user drops the file in the
preview-image-container. The file isn't submitted with AJAX, the user needs to submit the form which contain more data.
Although dropzone.js could be used, it doesn't fit in my requirements and it would require a considerate amount of time to customize its look. Moreover, dropzone.js have certain configuration requirements that can't be met within my ASP.NET application.
There's a similar question but does not have a proper answer:
How to set file object into input file in the form in HTML?
Also not similar to drag drop images input file and preview before upload because I have already achieved drag-drop and preview action. My question is specific to the problem of having an empty file input when dropping the file in a parent container.