For one of the projects I was working on I needed to have drag-and-drop component, but ideally without using any js libraries. I discovered that default html tag for uploading files (<input type="file">) supports drag-and-drop action. So if you drag file and drop it into this element it will be uploaded. Unfortunately this feature doesn’t work in Internet Explorer. So idea is to change this component so it would look like dnd component in Chrome and Firefox and look like default component in IE. So let’s start.
Create <input type="file"> element like this:
Which will look like following way by default:
Now let’s play with css. The idea is to
set size of div - it will be the size of upload area;
increase the area of input element by increasing padding, it should cover whole parent div;
make this input invisible;
add label on top.
Implementing these rules in following html:
We’ll have this element - which supports drag&drop upload as well as uploading by clicking on it:
Drag & Drop File Here
In IE dnd functionality is not supported by browser, so for IE we can just leave the default element by providing different css style. To do so here is conditional comments where this can be specified: