HTML5 drag upload in new window

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?

Answers


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.


If your application is a single-page application, Web Workers might be a solution.


Need Your Help

Else block of javascript program always executes even If block is true

javascript html if-statement

Else block keeps executing even if is true. If I remove else block then program works fine. All I want to do is to check if the user is not in the record then it prints not found.

Add Bookmark functionality to bar button item

iphone ios xcode toolbar bookmarks

I am having a toolbar which consists of many Bar Button item. Among that I have kept one as the Bookmark button. Now I want to add the Bookmark functionality to that Bar Button Item. How this can b...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.