INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Calling a function with a fileUpload form

Calling a function with a fileUpload form

(OP)
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

RE: Calling a function with a fileUpload form

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(){
...

var filechooser = document.getElementById('filechooser');
filechooser.addEventListener('change', handleFileSelect, false);
}

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

RE: Calling a function with a fileUpload form

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close