PHP-and-MySQL/C4/File-Upload-Part-1/English-timed

From Script | Spoken-Tutorial
Jump to: navigation, search
Time Narration
00:00 Hi. In this tutorial I'll show you how to create a simple php upload script.
00:05 This will be slightly more advanced in our 'upload dot php' file.
00:10 We will use our 'index dot php'. We will be mainly using html code to give a form to the user to submit this particular file.
00:20 Then in 'upload dot php', we will process this file, get some information about the file like its name, its type, size, temporary stored name and any error messages that have occurred.
00:33 You can use the error messages to check if it has occurred or hasn't occurred.
00:38 Then we are going to process the file and save it in a specific directory on our web-server.
00:45 In the second part of this tutorial, I'll quickly teach you how to check the specific file type so you can protect it against file types.
00:54 We will also learn how to check the file size of the file so you can have a maximum or minimum file size.
01:04 So, here I've created a folder named 'uploaded' in which I've created my 'index' and 'upload dot php' files.
01:13 And this is where my files are being stored once they have been uploaded.
01:17 When the files are uploaded initially, they go into a temporary area on the web server and not into this folder.
01:25 For the html - we need to create a form. To do this, we have a form action and we have a specific action which is 'upload dot php' and we've created our file here.
01:38 The method is set to POST. The reason for this is that we don't need to store it in a GET variable.
01:45 Why? Because we don't want the user to see the binary data we're sending across the website, for security reasons.
01:53 And also there is a hundred character limit on our GET variable.
01:58 So, you’ll have a very small file if you have only hundred bits of data.
02:04 Okay, we have another parameter which you may not have heard of before.
02:11 It's enctype, encoding type which means how we are going to encode this.
02:20 It will be multi-part and we need a forward slash and then its form-data.
02:28 In short, this means that we're submitting this form in the form of data - that is, binary data - zeroes and ones which I mentioned earlier over here.
02:40 Okay, so we've got the type this is going to be encoded to. We'll end our form here.
02:50 We'll need some elements inside as input for our file.
02:57 This type is set to 'file' and we'll call it 'myfile', to be specific.
03:04 Okay - paragraph break here and then all we need is a submit button.
03:12 Okay, so let's just preview this. Let's close this off.
03:18 Click fileupload. Oh - let's go back. Input - I typed 2 'u's here.
03:27 Let's go back. You can see here we got our input here.
03:31 I can make it Browse. We can see we got a selection of files which we can upload.
03:36 Okay - so let's make it more user friendly for you and me.
03:45 "Upload a file". And let's refresh that. Okay, so we've got a nice page here.
03:50 We've got our header and possibility to upload a file here. Also can be manually typed in here, if needed.
03:58 And also we have an Upload button which submits to our 'upload dot php'.
04:04 Fine. So, inside 'upload dot php' we need a way of processing this file which has been submitted from our form.
04:13 The way to do this is by using 'dollar underscore FILES'. This isn't actually right.
04:19 We can tell it isn't right by echoing out just a single instance of this.
04:27 When we do and I click on Upload, we can see we just get "Array". That's because this is an array.
04:33 Since this is a multidimensional array, in the first set of brackets we'll type the name of the file that we have uploaded and the name of the input box from which it came from - that is 'myfile'.
04:49 So, we'll use "myfile" here. And in the second one, we can have a variety of properties and the simplest and most easy one to think about is the name of the file.
04:59 So, let's go back to the 'upload form' and let's choose 'intro dot avi'. It will be displayed here.
05:06 Let's click Upload and on the next page we see 'intro dot avi'.
05:11 Remember this is in our 'upload dot php' form, file.. sorry.
05:16 Okay. so that's that. Let me just save this to a variable.
05:22 The next one we'll look at is - I'll just type it here - is the type of file.
05:30 So, this is 'dollar underscore FILES' and we'll use the "myname" reference.
05:38 And inside here, we'll have the type. So that's type or rather we'll echo this out so you can see.
05:45 And it's refresh. Re-send that and see that now - "myfile".
05:54 Right, re-send that and we can see there's a 'video slash avi'. You may have seen this somewhere before in html.
06:00 For example - this can be 'image slash png' or 'image slash jpeg', 'image slash bmp' , 'video slash avi' and 'video slash mpeg' or some other format.
06:11 At the moment we can see from here that it is an 'avi' file, so therefore that's what we get in "type".
06:18 So, we can say $type equals all of this.
06:22 The next one I'll show you is the size. So to save time what I'll do is - I'll copy this code, paste it here and change this "type" to "size" and echo it out.
06:30 You can see it's quite simple to get e-property of the file you submit.
06:35 I'll refresh this page and click Resend and we can get the size of the file.
06:40 Now, let's say we round this off to about a million - a million bytes is in fact a....,
06:47 sorry, a million bits is a megabyte. "myfile" is actually a mega byte.
06:54 So, we've got a million megabyte of data here.
06:58 So, let's save that in a variable called $size. Ok?
07:05 Right then, the next one which is quite an important one is the 'temporary name'.
07:09 This is written slightly differently as "tmp", abbreviated to 'temp' and underscore and "name".
07:18 This will give us the directory that it's stored in temporarily until we transfer it to the folder of our choice.
07:25 So, let's refresh this page.
07:27 Click on Resend and you can see that that's stored into an xampp because I'm using this application.
07:33 But if you're using an apache, you can store php yourself.
07:37 You'll have apache here followed by your temporary file name.
07:41 You can see that this is a randomly generated name that has a "tmp" extension.
07:45 But it is useless to us at the moment.
07:48 So we can save that as '$temp file' or '$temp'. Let's type 'temp' in order to keep it short.
07:55 And the last one is 'error'. Now this will basically echo out a zero if everything is clear.
08:00 Again, copy-paste and change that to "error".
08:03 We should get zero at the moment because everything is written correctly.
08:07 And this will never be a negative value.
08:12 If it's more than zero it means that it's giving an error code which basically means that you have an error.
08:21 And let's say, we'll store this in a variable called $error.
08:28 Okay. that's all for now. In the second part of this tutorial, I'll show you how to upload your file by moving it from the temporary storage area to a specified area of your choice.
08:39 And what we'll do is we'll use this variable '$error' to see if there are any errors.
08:45 If there are errors, then we'll echo it out and use the error code.
08:49 If not, we'll take this $temp and we'll use a specific function called 'move uploaded' file and we'll take that and store it in our uploaded directory, created on my web-server here.
09:01 And then after that I'll take you through some specifics to say - is this a jpeg? Yes, then disallow 'jpeg' image being uploaded or disallow specific file size.
09:10 Okay so tune in to Part-2. Thanks for watching. This is Joshua Mathew, dubbing for the Spoken Tutorial Project.

Contributors and Content Editors

Gyan, Pratik kamble, Sandhya.np14