Start learning with our library of video tutorials taught by experts. Get started

HTML5 Projects: Customized Photo Cards

Uploading an image


From:

HTML5 Projects: Customized Photo Cards

with Joseph Lowery

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 Projects: Customized Photo Cards
44m 20s Intermediate Oct 31, 2012

Viewers: in countries Watching now:

The HTML5 Projects series puts HTML5, CSS3, and recent JavaScript API technologies to work—enhancing your web projects with interactivity and multimedia. This first installment shows you how to build an online application for creating personalized photo cards with user-uploaded imagery. Author Joseph Lowery shows how to create the form interface and introduces HTML5 features such as drag-and-drop file upload and interactive image manipulation.

Topics include:
  • Creating a form
  • Uploading images
  • Preparing the stage
  • Manipulating photos interactively
  • Saving photo cards
Subjects:
Design Web User Experience Web Design Projects
Software:
HTML JavaScript CSS
Author:
Joseph Lowery

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!

There are currently no FAQs about HTML5 Projects: Customized Photo Cards.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 Projects: Customized Photo Cards.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

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