Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Design and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating a form
- Uploading images
- Preparing the stage
- Manipulating photos interactively
- Saving photo cards
Skill Level Intermediate
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!