New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Uploading an image

From: HTML5 Projects: Customized Photo Cards

Video: Uploading an image

In this lesson, we're going to implement HTML5 file upload with a drag-and-drop option. There is a lot to cover. So let's get to it. But first, I'd like to credit Craig Buckler for his great tutorials on this subject at SitePoint. So we're going to bring in a JavaScript file. I am going to put this all the way down at the bottom right above the closing body tag, and we'll enter in a script tag with a source pointing to our file, which is located in the scripts folder, and it's called filedrag.js.

Uploading an image

In this lesson, we're going to implement HTML5 file upload with a drag-and-drop option. There is a lot to cover. So let's get to it. But first, I'd like to credit Craig Buckler for his great tutorials on this subject at SitePoint. So we're going to bring in a JavaScript file. I am going to put this all the way down at the bottom right above the closing body tag, and we'll enter in a script tag with a source pointing to our file, which is located in the scripts folder, and it's called filedrag.js.

I've closed out the Script folder. I am going to go ahead and save this file. Let's take a look at filedrag.js. What you will see is a series of relatively small functions. Let's go through them one by one, so you have an idea of what's really happening. So first we set up a function called ID that will get the element by ID, simple enough. Next, we create the function Output, which will put our status messages into a specified area on the page. Next, we get into some of the actual file dragging with the FileDragHover function.

The two lines, 18 and 19, stopPropagation and preventDefault, are necessary for this function to work properly. And when it does, it will switch class names from dragover to hover. Let me scroll down a bit. So, next step is the actual file selection that you see starting on line 25 with the function FileSelectHandler. It calls the function FileDragHover, which we just saw defined, and then it brings in the files in what's called a FileList object.

And it uses the key technology of the File API dataTransfer. Once it has those files, it goes through two different functions, ParseFile and UploadFile. So, let's go down to ParseFile. ParseFile reads through the files and pulls out file names, file type, and file size, and then outputs them onto the page. Next, if we're working with an image, it will create a thumbnail and put that on to the page. Then we are ready to display any text if there's text involved.

Finally, on line 78, we take the file name and we use localStorage to save it into an item called UploadedFile. After it parses through the files, we are ready to upload them, and this is where the XMLHttpRequest object comes into play. It looks to see if it's the proper file type, and I have file type here set for a PNG file. You could also set it for JPEG or you could set it up to test for multiple file types.

The other restriction that we have in play is the file size. Within the form on the page, there's a hidden form field element called MAX_FILE_SIZE, and whatever that value is, is the limitation. Next up, starting on line 90, are a couple of functions that create and display the progress bar. You probably won't see a progress bar when you're working locally because it happens all too quickly. But if you posted the file online and then uploaded a much larger file, the progress bar would show up.

I'll scroll down a bit more. Next, we look to see whether the file transfer has been successful or if it's failed. And we set the class name on where the progress bar is accordingly. Finally, we start the upload as you see on line 109. This actually integrates with a PHP file called upload.php that receives the information that is being sent here by the XMLHttpRequest. And at the bottom of the page, we have the initialization routines, where it sets up a series of variables, so that we can drag and select files, as well as a Submit button.

Then, an event listener is set up in case the fileselect is chosen. Finally, we check to see if the XMLHttpRquest level 2 is available. And if it is, then we set up a series of event listeners for the drag-and-drop events. I know that's a lot to digest but I promise you it's worth it. So one last task before we can test. We need to go and create an uploads folder to hold our transferred files. So for that, I am going to go to finder, and here, I am working in Chapter 2, 02_02, and then I'll just choose New Folder and name it uploads. All right! Let's head back and go to the browser.

And here, I have my beam-up.php file available. I am going to go ahead and refresh the page. And now we are ready to try uploading a file. So, I can't get enough of that drag- and-drop, so I am going to go ahead and reopen Finder, open up my images, and I happen to have a little PNG that I created here of myself that I'm going to go and drop right in. Well, it looks like that was successful, we've got the green progress bar there showing.

But I think here is definitely a trust but verify situation. So, let's make sure that that file was indeed put into the uploads folder. Back to Finder. So then we open up uploads folder, and there is the file. Very nice indeed! Not only has our drag and dropped file been uploaded with the HTML5 file API, we've saved the name of the file in localStorage. That's three cutting edge technologies used together. Nice!

Show transcript

This video is part of

Image for HTML5 Projects: Customized Photo Cards
HTML5 Projects: Customized Photo Cards

12 video lessons · 4847 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.