Home/ Questions/Q 6894051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T06:44:04+00:00

I have setup an HTML5 drag and drop upload into my site. The problem

  • 0

I have setup an HTML5 drag and drop upload into my site. The problem that I have is when a user is uploading a large file, they must wait for the upload to finish before navigating and using the rest of the site.

So, what I’d like to do is allow the user to drag files to the main site and then have it automatically open a new window and start the upload there so they can still use the rest of the site while the upload is happening. Anyone have and advice on how to accomplish this or if it can even be done?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should be able to open the new window when the drop event occurs. Below is a full example.

    First, we have a file upload region and events that handle the drag and drop:

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="fileUpload" style="height:200; width:200; border:1px solid #ddd;"><span id="lbl">Drag and drop file here...</span></div>

<script>
$(function() {
    $('#fileUpload').get(0).addEventListener("drop", upload, false);        
    $('#fileUpload').get(0).addEventListener("dragenter", noopHandler, false);
    $('#fileUpload').get(0).addEventListener("dragexit", noopHandler, false);
    $('#fileUpload').get(0).addEventListener("dragover", noopHandler, false);

    function noopHandler(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function upload(e) {
       e.stopPropagation();
       e.preventDefault();

       fileList = e.dataTransfer.files;
       var fileCount = fileList.length;

       // Only call the handler if 1 or more files was dropped.
       if (fileCount > 0) {
           window.open("upload.html");
       }
    }
});
</script>
</body>
</html>

    In the pop-up window (upload.html), we get the files from the parent window and begin the upload:

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
    $(function() {
        var fileList = window.opener.fileList;

        var reader = new FileReader();     
        reader.onloadend = function(e) { alert("Uploaded"); }

        for (file in fileList) {
            // Upload
            reader.readAsDataURL(fileList[file]);
        }
    });
</script>
</body>
</html>

    Give this a try and hopefully it helps solve the problem.

    • 0