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.  
That looks more neat... Ill do it

sent from HTC ONE S
On Jul 2, 2014 2:00 AM, "Chirayu Chiripal" <notifications@github.com> wrote:

> In js/common.js:
>
> > +     *
> > +     * @return void
> > +     */
> > +    _drop: function (event) {
> > +        var dbname = PMA_commonParams.get('db');
> > +        //if no database is selected -- no
> > +        if (dbname !== '') {
> > +            $(".pma_sql_import_status").slideDown();
> > +            var files = event.originalEvent.dataTransfer.files;
> > +            for (var i = 0; i < files.length; i++) {
> > +                var ext  = (PMA_DROP_IMPORT._getExtension(files[i].name));
> > +                var hash = AJAX.hash(++PMA_DROP_IMPORT.uploadCount);
> > +
> > +                $(".pma_sql_import_status div").append('<li data-hash="' +hash +'">'
> > +                    +((ext !== '') ? '' : '<img src="./themes/dot.gif" title="invalid format" class="icon ic_s_notice"> ')
> > +                    +files[i].name + '<span class="filesize" filename="' +files[i].name +'">'
>
> @mebjas <https://github.com/mebjas> and how about using data-* attributes
> (data-filename) instead of custom filename attribute?
>
> —
> Reply to this email directly or view it on GitHub
> <https://github.com/phpmyadmin/phpmyadmin/pull/1260/files#r14427299>.
>