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

017 Uploading files with forms using PHP

From: View Source

Video: 017 Uploading files with forms using PHP

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.

017 Uploading files with forms using PHP

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.

Show transcript

This video is part of

Image for View Source
View Source

20 video lessons · 16208 viewers

Ray Villalobos
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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

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 View Source.

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 preferences from the dropdown menu.

Continue to classic layout Stay on new layout
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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.