- View Offline
Hello! This is Ray Villalobos and welcome to View Source! In this episode, we're going to build an image uploader using PHP. So if you want to crowdsource your audience and let people upload files to your web site, it's time to View Source. Let's talk a little bit about our setup. We're going to be using PHP which is a server-side technology, which means that you have to work on a server that parses PHP files. So I'm working off of a live server this time, not on my local machine. In our live server, we have a number of files, some of them are pretty mundane. We have an images folder with a couple of normal images plus an index.php file.
Whenever you're working with PHP, you want to use the .php extension. We've also loaded a copy of jQuery, as well as a style sheet, and we have a couple of empty files right now, the showuploads.php and the upload.php file which we'll be constructing in this movie. We also have an uploads folder that will hold the photos that people upload to our site. So taking a look at the index.php file, I'm going to open it up in my Text Editor. I'm going to click it and click on Edit, I'm using Cyberduck here.
One of the things that's unique about the form is this new attribute called enctype. So enctype is the encoding type for this particular form. Normally, forms get sent through the web as text files. When somebody is uploading a normal file, we don't want to transcode the data, so we have to tell the form to use this particular enctype, multipart/form-data. Also the method for this form happens to be POST. When you're using very long document like files, you want to make sure that you use the POST method because the GET method can only hold so many characters.
After that we have a label as well as an input type, and this input type is different than normal, is of type file. The input type file will give you a dialog box where you can choose a file from your own computer. Other than that, this is a plain form, so the next thing we need to do is build our file uploader. So if you notice, we're sending this form to a script called upload.php, so we'll need to build that next. To do that, I'm going to go back into Cyberduck and click on upload.php, and open up that file. This is just an empty file right now, so we're going to grab the code from our codesnippets file here, and copy it, and paste it in here and let me go through what this code does.
When somebody submits the form, the information that gets passed along to this document is the file data that gets passed along by the browser. From the file data, we can grab a few variables and what we're doing here is we're grabbing a temporary name because when a file is uploaded from a form element, it gets placed in a temporary location and it gets placed in this array that gives us the information about the form. So a couple of things we can grab from here is the temporary name that the file is going to be placed under, as well as the name of the file that was uploaded. So if we load this file called burrito.jpg, that would be the name of the file.
In addition to that, I'm going to be creating a special variable called saveddate that stores a version of today's date with the time, so that whenever somebody uploads a photo, say the burrito.jpg file and somebody comes later on and uploads the same photo, those two photos will have different names. They'll have text for today's date, plus the name burrito.jpg. That way multiple files can be uploaded to the site without a problem. Now we need to come up with a new file name since we are going to be using a different name than what the file was originally named.
We also are using a subfolder to store these files, so we come up with a new file name of uploads/, then the name of the file was saved, as well as the upload file name, which is just a regular name that people use when they submitted the form. Finally, we're going to use the move_ uploaded_file command and send it to temporary name of the file as well as the newfilename. And if that function executes properly, then it's going to print out that the file has been uploaded. So let me save this and come back to our form.
So I'm going to hit Choose File right here to bring up my File Manager, and on the desktop find my burrito picture, and I'm going to hit Choose, and then hit the Submit button, and you could see that it says File Uploaded, this means that the file has uploaded properly and is now on our server. If I go back into my FTP program and I open up the uploads folder, I may have to refresh, but I can see the file is there and notice that it added the date as well as a timestamp to our burrito.jpg name, which is great.
So our uploader is working pretty well, that wasn't even a lot of difficult code. There's no way of knowing on our site that a file has been uploaded. The only way that we can find out right now is by checking through an FTP program on our server. So it would be nice to have some sort of feedback to let us know that the file has uploaded properly. So what I'm going to do is I'm going to come back to this page and I want to add a copy of the photo on this page after it has been uploaded. So to do that, I'm going to go back into my codesnippets, and I'm going to add a div to my page so that I can insert the images that have been uploaded.
So I'm going to copy this, and go back into my index file. Right now, we're in the upload.php, I'm done with that, so I'm going to close that out and switch back over to my index.php, edit that, and I'm going to add that after the form element. I'll just add a placeholder so that we can put the photo uploads in there. So the next thing I need to do is actually write a script that will show us the photos that are in that folder. If you remember back from week ten, we created a script that did exactly that.
The script allows you to build HTML from a folder's content. So I have a slightly modified version of that script in our snippets file, and it looks like this. This is the same script as the listing files with PHP movie we've built earlier on, so I'm just going to copy it and open up our showuploads.php page and paste that code in there. The only thing that we have changed here is since we are calling this folder uploads, I have changed the name of which directory is open, and what the image tags are supposed to be.
Other than that, this is exactly the same code. So I'm going to save that, and I'm going to close out of it. And if I go to my web site and I type in showuploads.php, I can see that the burrito photo that I loaded is already showing up in there. It would be nice to pull that into my original page, so I'm going to do that with a piece of jQuery. That means I need to load the jQuery library as well as write a small script that is going to show the uploads on this original page. So I'm going to grab the script right here.
This is also similar to another lesson that I showed you earlier on how to load content from one page to another. So I'm going to go into my index.php again, open that up, and I'm going to add that script at the bottom, right before the closing body tag. This script loads a copy of jQuery AJAX from Google's CDN, as well as a local copy just in case I am working offline. And then it has simply a document ready function that means that whenever the DOM loads, execute this function, and all it's doing is it's grabbing the showuploads page and then putting the contents on that page onto this page.
It's going to hide it and fade it in at 500 milliseconds, so there is a little bit of a fade-in. But other than that, it's pretty simple code. So I'm going to save that, and I'm going to go back into this page and just reload, and now you can see that this page loads, but then in addition, it loads the content from the showuploads.php which just simply reads the directory where all the photos are uploaded and shows us what's in there. If I were to load up another photo right now, and I would hit the Submit button, I still get taken to this other page that says File Uploaded.
If I want to see my photo, I would have to click the back button and refresh this page and see that the new photo is there. So I need to find a way of returning to this page once the photo has been uploaded by our uploader. So I'm going to do that with another piece of code, so I'm going to modify my uploader slightly by adding a location of where to go whenever it's done processing. I'm going to copy this version of the code, this version of the code is very similar to the last version. So I'm going to click on that upload file and hit Edit, and just paste the new version.
You can see that the only difference is that instead of printing out a file uploaded message, we are using a header method to tell the web site that the location of this page should be the other page. So what this will do is it will load up the index file which has the form element as well as a list of all of our photos. So I'm going to save that, go back into this form, and I'm going to hit Choose File to choose another photo. The one that I haven't picked is the spoon.jpg, so I'll choose that, I'll hit the Submit button, it'll submit the form.
Go to the form processor, which tells it after the photo has uploaded to come back to this page. This page shows the updated images and we can see immediately some feedback from what we have done. So if you scroll down, you can see the other photos are still there and that's a great image uploader. Sharing is part of the online experience, so don't forget that sometimes for a web site it's better to receive than to give. And tune back next time for another episode of View Source.
- Creating a custom URL in WordPress
- Adding breadcrumb links to sites
- Creating a toggle button with jQuery
- Adding Twitter feeds to a site
- Adding PayPal buttons to pages
- Uploading photos to your web site
- Embedding videos for different browsers and devices
- Parsing and placing a YouTube video feed