Calling a function with a fileUpload form

emozley · Apr 20, 2015

Hi

I have a page which lets me upload files using HTML5/JavaScript. Files get uploaded after being dragged and dropped. This part is working very well.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/upload/upload.asp";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();
            
			// create progress bar
			var o = document.getElementById('progress');
			var progress = o.appendChild(document.createElement("p"));
			progress.appendChild(document.createTextNode("upload " + file.name));


			// progress bar
			xhr.upload.addEventListener("progress", function(e) {
				var pc = parseInt(100 - (e.loaded / e.total * 100));
				progress.style.backgroundPosition = pc + "% 0";
			}, false);
			
            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    // Handle response.
                    //alert(xhr.responseText); // handle response.
					progress.innerHTML=progress.innerHTML + ' - DONE';
                }
            };
            fd.append('myFile', file);
			fd.append("FUID", "12345-ABC");
            // Initiate a multipart/form-data upload
            xhr.send(fd);
			
        			
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }
    
            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
		
		
    </script>
</head>
<style>
#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
	background: #eee url("progress.png") 100% 0 repeat-y;
}

#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}
</style>
<body>
    <div id="progress"></div>
	<div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
		
    </div>
</body>
</html>

What I would like to do is add a button which gives the user an alternative method - i.e. they can click a button, browse to the directory and then select the file(s) they want to upload.

So far I have:

Code:

<form action="upload.asp" enctype="multipart/form-data" method="post">
		<input id="fileupload" type="file" name="myFile" data-url="upload.asp" multiple>
		<input type="submit">
		</form>

What I would like it to do is behave in the same way as dragging and dropping - currently it redirects the whole browser to my upload.asp script but what I want it do is post the file(s) via AJAX and show the progress bars.

Hope someone can help!

Thanks very much

Ed

vacunita · Apr 20, 2015

Don't submit the form if you don't want the page change. You'll need to add an event listener to the file input, and then basically use the same ajax method to upload the file.

Code:

window.onload=function(){
...

[indent]var filechooser = document.getElementById('filechooser');[/indent]
            
[indent]filechooser.addEventListener('change', handleFileSelect, false);[/indent]


}

and then create your handler for the input button which basically just calloused your sendfile function:

Code:

 function handleFileSelect(evt) {
    	 var filesArray = evt.target.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
    
        }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

1DMF · Apr 22, 2015

Personally, I would prefer a submit button to initiate the upload.

What if I accidentally select a naughty picture of my wife, instead of my car?

I want the ability to confirm the picture I selected should be the one uploaded.

The new HTML5 FileReader API is really handy for such things.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Calling a function with a fileUpload form

emozley

Technical User

vacunita

Programmer

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor