How to Write the Upload Bar in Html

In my previous posts, we discovered How to Utilise HTML5 File Drag & Driblet, Open Files Using JavaScript and Asynchronously Upload Files Using Ajax. In the final part of this series, we cover the most exciting part of the process: graphical progress bars!

File upload progress bars provide essential user feedback but they've been notoriously difficult to implement. Until now that is. Both Firefox and Chrome support the XMLHttpRequest2 object which offers a progress result handler. Simply first, permit'due south consider how our progress bar volition exist implemented…

The HTML5 progress tag

The new progress tag provides two attributes:

• value: the current progress value
• max: the value at completion

The tag would have been ideal in this demonstration and, although it'south supported in Chrome, information technology's only just appeared in Firefox six. In addition, neither browser offers many styling properties so I dropped information technology in favor of a standard p tag. This is appended as a child to a div with the ID "progress".

Styling the Progress Bar

Our p tag volition prove the file name in a bordered box which is 250px in size:

                      #progress p { 	brandish: block; 	width: 240px; 	padding: 2px 5px; 	margin: 2px 0; 	border: 1px inset #446; 	edge-radius: 5px; }                  

For the green bar itself, I created a graphic which was twice equally broad as the progress chemical element (500px). The left 250px is colored and the correct 250px is transparent:

This graphic is used equally a background paradigm for the progress bar and positioned at "10% 0" where 10% indicates the proportion which is REMAINING (not COMPLETED), i.eastward.

• progress starts from "background-position: 100% 0", i.eastward. 100% remaining
• progress ends at "background-position: 0% 0", i.due east. nothing's remaining
• "groundwork-position: 30% 0" means 70% has been completed:
  

A solid color is applied past setting a class when the upload succeeds or fails:

                      #progress p.success { 	groundwork: #0c0 none 0 0 no-repeat; }  #progress p.failed { 	groundwork: #c00 none 0 0 no-repeat; }                  

Implementing the Progress Bar in JavaScript

Nosotros can now alter our UploadFile() function. When a valid JPG file is encountered, we append a new p tag to the #progress element and add the file name as text:

                      // upload JPEG files office UploadFile(file) {  	var xhr = new XMLHttpRequest(); 	if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) { 	 		// create progress bar 		var o = $id("progress"); 		var progress = o.appendChild(document.createElement("p")); 		progress.appendChild(document.createTextNode("upload " + file.proper name));                  

Nosotros now require a "progress" event handler function. This receives an object with .loaded and .total backdrop — a little math is necessary to calculate the new backgroundPosition:

                      // progress bar 		xhr.upload.addEventListener("progress", part(e) { 			var pc = parseInt(100 - (e.loaded / e.total * 100)); 			progress.mode.backgroundPosition = pc + "% 0"; 		}, false);                  

If you're familiar with Ajax, you'll recognise the onreadystatechange event handler. This determines when the upload has completed and styles the progress bar accordingly (sets a class of "success" if the upload was successful):

                      // file received/failed 		xhr.onreadystatechange = part(due east) { 			if (xhr.readyState == 4) { 				progress.className = (xhr.condition == 200 ? "success" : "failure"); 			} 		};                  

Finally, we send the file to our PHP server as before:

                      // outset upload 		xhr.open("POST", $id("upload").action, truthful); 		xhr.setRequestHeader("X-FILENAME", file.proper noun); 		xhr.send(file);  	}  }                  

Nosotros finally have a solution which:

1. enables file dragging and dropping onto a web page element
2. analyzes and displays dropped files on the client
3. asynchronously uploads files to the server
4. shows a graphical progress bar during upload
5. uses progressive enhancement to support most browsers
6. is coded without requiring a JavaScript library.

Delight view the demonstration page, even so, annotation this is hosted on a server without PHP then file uploads will not occur. To test it, please download the files to examine the lawmaking and host it on your own server.

I hope y'all've enjoyed this series and are considering how file drag and drop could aid your web application.

If you enjoyed reading this post, you'll love Learnable; the place to acquire fresh skills and techniques from the masters. Members go instant access to all of SitePoint's ebooks and interactive online courses, like Acquire HTML5.

whitehouseentioncesay.blogspot.com

Source: https://www.sitepoint.com/html5-javascript-file-upload-progress-bar/

Share this post