File upload using HTML5's drag and drop in Asp.net

Question

Am trying to upload a file using HTML5's DnD and File API. Am not to sure how to send form data to the server, i tried to send using XMLHttpRequest but was not successful. This what i have so far.

    <body>
        <form id="form1" runat="server" enctype="multipart/form-data">        
            <br />
            <div id="drop_area">Drop files here</div> <br />
           <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"/>
        </form>
    </body>

     <script>
            if (window.File && window.FileList && window.FileReader) {
                var dropZone = document.getElementById('drop_area');
                dropZone.addEventListener('dragover', handleDragOver, false);
                dropZone.addEventListener('drop', handleDnDFileSelect, false);
            }
            else {
                alert('Sorry! this browser does not support HTML5 File APIs.');
            }
            </script>
     var files;
            function handleDragOver(event) {
                event.stopPropagation();
                event.preventDefault();
                var dropZone = document.getElementById('drop_zone');
                dropZone.innerHTML = "Drop now";
            }

            function handleDnDFileSelect(event) {
                event.stopPropagation();
                event.preventDefault();

                /* Read the list of all the selected files. */
                 files = event.dataTransfer.files;

                /* Consolidate the output element. */
                 var form = document.getElementById('form1');
                 var data = new FormData(form);

                 for (var i = 0; i < files.length; i++) {

                     data.append(files[i].name, files[i]);
                 }

                 var xhr = XMLHttpRequest();
                 xhr.open("POST", "Upload.aspx"); //Wrong ? not sure.
                 xhr.setRequestHeader("Content-type", "multipart/form-data");
                 xhr.send(data);                
            }

C#:

     HttpFileCollection fileCollection = Request.Files;
                for (int i = 0; i < fileCollection.Count; i++)
                {
                    HttpPostedFile upload = fileCollection[i];
                    string filename ="c:\\Test\\" +  upload.FileName;
                    upload.SaveAs(filename);
                }

I know i have a button in the UI, as of now am not using. But as you can see am trying to send a request using XMLHttpRequest. Can anyone suggest me how can i proceed further. But my server side code never get executed am not sure whether XMLHttpRequest was successful.

warrior · Accepted Answer · 2013-08-22 00:43:35Z

7

Jeezzz!! Its works fine in IE, i was testing in Chrome v 28 since few days. In IE file gets uploaded fine. (tested multiple file uploads). So to make it work in Chrome i had to make few changes. * Mistakes made

In chrome While debugging client-side i found that var xhr = XMLHttpRequest() throws an error, "dom object constructor cannot be called as a function" So replaced it with

var xhr=new XMLHttpRequest(); and removed xhr.setRequestHeader("Content-type", "multipart/form-data"); (Not sure why but xhr.send() results in ispostback value to be false?? )
Comments are appreciated. Link to full code: http://programmingusingdotnet.blogspot.com/2013/08/aspnet-drag-and-drop-file-uploads-using.html

edited Aug 22, 2013 at 0:43

answered Aug 22, 2013 at 0:03

warrior

6162 gold badges8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ilter Over a year ago

That link you provided helped me a lot! Thanks for that. Also, any chance you came up with something about sending modified (resized actually) image files with <input type="file"> tag, on submit? I actually have an active question about that :$ stackoverflow.com/questions/20681827/…

Collectives™ on Stack Overflow

File upload using HTML5's drag and drop in Asp.net

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related