Drag n drop import

<h4>Drag and drop file upload</h4>
Video Preview of working code: https://www.youtube.com/watch?v=Hsi46nKsbNI&feature=youtu.be

**Features**
- [x] Drag and Drop sql (or other supported extensions) to PMA interface to initiate FILE uploads. (Allowed files will be uploaded)
- [x] View status of file-upload on bottom right corner of the screen (includes progress percentage)
- [x] Option to abort upload while uploading
- [x] Once upload has finished, show status as success (file was uploaded, and import process was successful), failed (file was uploaded, but import failed) & Aborted (file was not uploaded but aborted)
- [x] Different icons for different status (success, failed and aborted)

**todo later**
- Way to advertise this feature, like a message in import page or some tour guide
- Once import is finished (success/failed) or aborted. Clicking on these status should open a light box, showing result of import as shown in case of original import page.  
1. Crafted filename can cause XSS here: try to upload an empty file having this name `" onclick="alert('hi')" c=".sql` and the import will say status "Failed". Then clicking on "Failed" to see the error message will trigger malicious script.
2. How about using `data-filename` instead of `filename` to make it cleaner?