CODEWITHSUNDEEP
javascriptiframeinternet-explorer-11jquery-file-uploadblueimp
Sree
Sree

Reputation: 2922

Drag and drop a file is not working in IE 11 over iframe

I'm working on a basic drag and drop functionality and it working fine in other browsers but not in IE 11. I'm calling following html code with iframe in another project.

It is working fine without iframe but not with iframe. Can anyone give a solution for this ?

Thanks in advance.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Upload</title>
<meta name="description" content="File Upload ">
<meta name="viewport" content="width=device-width">
</head>
<body>
  <div class="container">  
    <table><tbody> <tr><td><span id="upload" >
                          <span>Upload</span><input id="fileupload" type="file" name="fileupload">
                    </span></td><td id="filename"></td><td id="percent" style="padding-left: 35px;"></td></tr>
    </tbody>
</table>
</div>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
 <script
    src="https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script> 

<script type="text/javascript">
    $(document).ready(function() {
        $(document).bind('drop dragover', function(e) {
            /* e.preventDefault(); */
        });
        if(typeof window.parent.fileid  == 'undefined'){
            window.parent.fileid = "";
        }            
        var params = // some prams
        $('#fileupload').fileupload({
            dataType : 'json',
            formData : params,
            url : '${contextpath}/upload', 
            autoUpload: true,
        });         
        $('#fileupload')
        .bind('fileuploaddone', function (e, data) {          
            //uploaded successfully
       }, 100);
        }).bind('fileuploadfail', function (e, data) {
        // upload is fail
        })  
    });

</script>
</body> 
</html>

Upvotes: 3

Views: 1225

Answers (1)

MK Vimalan
MK Vimalan

Reputation: 1288

I tested your code with some of rearrangement and i noticed the browser says 'Are you sure you want to leave this page ?'. You can resolve this issue by some ways such as

  1. you may change the browser compatibility from IE11 to IE10
  2. Yoy need to set 'forceIframeTransport: true' option to force all browser to make use of the iframe transport module for file uploads and set redirect option to retrieve the drop result

your file upload function should be 

$('#fileupload').fileupload({
            dataType : 'json',
            formData : params,
            url : '${contextpath}/upload', 
            autoUpload: true,
            forceIframeTransport: true,
            'redirect',
        });

Upvotes: 5

Related Questions