CODEWITHSUNDEEP
htmlgwtfile-upload
vvs
vvs

Reputation: 1086

Drag and Drop File upload in GWT not working in IE 11, MS Edge

I have an existing GWT project built for a client and it has feature to upload multiple files through a good old file dialogue. It works nicely in all browsers. I wanted to add a feature to provide a little drop area where the user can drop file(s) and expect them to be uploaded. I wanted to do this with minimal changes to existing code so I ran quick searches on GWT support for File API. It seems that it is still in experimental state.

Then I have reviewed the questions Drag and Drop file upload with GWT

GWT Drag and Drop File Upload not working

File upload with a progress bar, or accessing the Html 5 File Api from Google Web Toolkit?

Thanks to the first question I found a gwt-uploader library from Moxie group. I implemented it in my code and it worked like a charm on Firefox. It also worked fine on Chrome. Unfortunately failed to work on IE 11 and MS Edge browsers.

I have used the show case example Multi-File Upload with Progress Bars and Drag and Drop presented here http://www.moxiegroup.com/moxieapps/gwt-uploader/showcase/index.jsp as the basis for my code. This example also does not work on IE 11 and MS Edge.

Any ideas what may be wrong ?

Upvotes: 1

Views: 2261

Answers (1)

vvs
vvs

Reputation: 1086

Answering my own question so its helpful for some who might encounter similar problem. Since Moxie GWT-uploader code had not been updated in around 3 years I suspected that there was something wrong with that library but after couple of days of searching and not finding any other useful alternative library I decided to try and fix Moxie. Turns out I was on completely wrong track. When I started googling for IE 11, MS Edge support for drag and drop (which I thought was obviously supported since these are modern browsers) and found whats wrong.

  1. MS Edge - Drag and Drop of Files is not yet supported This has been answered in this question - Microsoft Edge html5 file drag and drop drag-and-drop From there I found my way to MS Edge Developer suggestion site and apparently its still in development. People who find their way to this answer ... please vote at below link if MS Edge is still not supporting this feature. https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/8964523-support-html5-drag-and-drop-of-files-from-explorer

  2. IE 11 - Drag and Drop is supported. However I used the gwt-uploader demo to create my source and it turns out that the drop Label was missing a height attribute. Here is the original source. 

    <div class="dropFilesLabel">Drop Files Here</div>

    Class dropFilesLabel style

    .dropFilesLabel {
    margin-top: 6px;
    padding-top: 28px;
    padding-bottom: 28px;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    color: #2d4b6d;
    font-weight: bold;
    text-align: center;
    display: block;
    border: 2px dashed #888888;
    border-radius: 7px;
}

    It has no min-height or height attribute. Effectively its visible because of the padding. I changed the style sheet to use a min-height:16 px and reduced the top and bottom padding accordingly and it worked in IE11. Thanks to this YouTube video for providing me the solution for IE11 answer https://www.youtube.com/watch?v=7M5rJ58xaLk

Upvotes: 2

Related Questions