Upload Files and Images to Website in PHP

today we're going to talk about how to upload images and files into a website this is actually something that's really easy to do inside PHP now when I say upload images and files i'm talking about all types of images and all types of files you might have inside our computer such as jpegs gifts PNG's or PDF files or txt files can be also files and really depends on what you want to allow the user to upload into the website so as you guys can see the only thing i've done so far has been to set up a very basic index2 PHP file the only thing i have been here is a very basic html5 setup and what we're going to do here is we're going to go ahead and take this from scratch and just create everything from the form that we need to use it in order to actually upload the files and then we're going to create the script afterwards that actually upload the file to our website now before we start I should also mention that there's two ways to upload files to a website you know images and text document and that sort of thing either you can upload to a database as a block elements or you can upload directly to the root folder website now in this episode we're going to learn how to upload directly to the root folder since I think this is the better method to use so the first thing we need to do is inside up body tags are going to go and create a very basic form now the form is going to be will be used in order to actually select the file from the computer that we want to upload into the website i'm going to create a form i'm going to go and set a couple of parameters inside the form tags the first thing you need to do 27 action inside the phone tag because we need to tell our forum where we need to go to in order to load the script needs to upload the files and images to the website so the action want to set is a file name called upload dot PHP now this is a 5 haven't created yet but we will create in just a second the next parameter we need to set is a method so i'm gonna go ahead and say method equal to double quotes and I'm gonna set it as a post method and there's something we have to do when we want to upload images and that sort of thing we need one more parameter and this is one we haven't talked about before because we haven't really needed to to use this parameter and it's something called ink type and there's something we need to have inside the form tag order for this tracks the pass it on to upload the PHP file so we need to say think type and we need to set it equal to something called multi-part form-data going to a multi-part /a form gasps data so now we should be able to pass on images and other types of files into upload the PSP now the next thing we need to do is 27 input inside our form tags i'm going to say input and we're going to set the type as a file because we need to pass on file and when we do set the type of file what you guys will notice is that when we go into the website we're going to get this button we can click on in order to select the file from your computer so this is basically what this input does so we're going to name this we can just go ahead and call the file as well because why not and if you go ahead and load our website you guys can see we get this button here i can click it then I can browse my computer files it's pretty simple to do so if i go back to the website we need to also make sure you create a button so when we do actually click something something happens to save button and i'm going to go ahead and set the type as submits i'm going to set the name as submits inside the button was just going to write something like upload image or upload file doesn't really matter let's actually go to say upload because i don't want to confuse you guys because it is all types of files its images and text documents you can upload your PDF file so what we want to do so we're just going to upload so now we have this this is all we need to have in order to get started on uploading stuff to our website now what I want to show you guys first is the right now outside my root folder as you guys can see I only have this document called index 2.php now when we upload a file we will need to tell our PHP script where we need to upload the file to so before we create that upload the PHP file i would like to create another folder inside my root folder which i call uploads just we have a folder we can upload stuff into so now we have this we can actually go ahead and go into our text editor and create a new file now inside this found just gonna go and save it first i'm going to call it upload dot PHP and just saved directly inside the root folder so now we have this we can actually go ahead and start writing the code that will fit the image or text file from our form and then upload it now when we do this we can set a bunch of parameters that needs to check in order for this file to get uploaded and it really depends on you guys how many you want to set its basically air handlers which means that we can set a limit for the file size we can tell you can tell the script which type of document you want to allow for the use of top load you can do a bunch of stuff in him we're just going to go ahead and go through all of them in order to you know just give you guys a bunch to choose from inside out the PHP file the first thing we're going to do we're going to go and tell everyone to start writing PHP code you need to create the PHP tags and then inside the PHP tag the first thing we're going to do is create an if statement because we need to check if we did actually click the button inside out form in order to submit the image we're going to say is set parentheses and then i'm going to write a superglobal called dollar sign underscore post because we use the post method inside out form going to save brackets and say that the name were checking for inside the post method is submits because we used submit as a name inside out button so if we click the button then it needs to run the code in here and this is where we want to start uploading the file now the first thing we need to do in order to upload the file is we need to get the information of the file so the first thing I'm going to do is create a variable we're going to call a file set it equal to a Super Grover called dollars and underscore files and files is actually a new supergroup we haven't talked about before which basically gets all the information from the file you want to upload using an input from a form so we're going to say we have dollar sign underscore files brackets and then the name of the file at this now case is five because inside our index page we did actually named the file file so now we have this we need to extract all information from this file such as the name the size of the file and what kind of file type is so underneath here we're going to create another variable we're going to call a file name i'm going to set it equal to the superglobal called files again it has a name of file and then we need to tell which information from the father want to extract and the first one here we want to get the full name of the file I'm going to save brackets again then I'm going to say single quotes name now if you're asking about why we need to write name in order to get the name of the file if I want to print artist file we have up here are saying print underscore our cosine file and then run it inside the website you guys can see as soon as I select some kind of file inside my computer upload it we get on the rate so we get name which is equal to after effects and this is a associative array with two talked about two episodes ago so if you guys confused about the names here you can go and watch that episode first now we get name which is equal to the name of the file we have type which is equal to a text file type that we have inside PHP called image / something we also get a temporary name which is equal to what we have here which is actually the temporary location of the file because right now we haven't uploaded the file yet so it's safe somewhere temporarily on our computer before we actually uploaded then we also get an error the chicks if we did actually get an error uploading this file right now it says zero which means we didn't get an error it says at one then we got an error we also get the size of the file here so get a bunch of information and disinformation need to insert into our variables so the first thing we're getting is the name so go back here and just kind of delete friend are as you guys can see we now got the name is actually going to copy this paste underneath there a couple times because we do need to have about five i think it was and then we're going to change the names so instead of file name we're going to save file TMP name which would also going to change over here instead of name we're going to say TMP underscore name which is like I said the temporary location of the file was actually pretty important when we do actually to upload the file the next thing we need to add here is the size of the file so we're going to say sighs and again we're going to change that from name to size inside the brackets the next thing we need to add is the error if we do actually get an error then it needs to stop uploading the file from the error is the name inside our practice as well and the last thing we need to check here is the type of file we get is a type then change it to type inside the brackets so now we get all the information we can get from this father uploaded here so now that we have all the information of the file the next thing we can do is we can tell which files we want to allow to upload into a website because let's say I want to upload a profile limits to my website and I want only to have jpegs inside the website then i can tell that i want to allow jpegs underneath here so that's the first thing we're going to do so now we're going to go and create a variable we're going to called file.txt for extension set it equal to a function called explode inside PHP because right now we want to take apart the name we have up here because right now you guys can see the name is equal to the name of the file dot jpg so what we want to do is we do actually want to explode the name by the punctuation and get these two different names here so inside my coat again inside the explode tags were going to tell it they want to explode you know take apart this certain string from the punctuation and then the second parameter is going to be the actual thing want to separate wherever there's a punctuation mark and want to do that with the filename we're going to take the filename and insert it inside explode so now we do actually get two pieces of data we get the first part which is the name of the file and then the second part which is the extension underneath here we're going to go ahead and set another variable we're going to save file actual extension we're going to set it equal to another PSP function called string to lower case and that's because right now forward to upload a file that might have big letters after the punctuation so instead of taking small letters you could actually be jpg is capitalized letters so want to make sure that every time we want to check for these sort of things we always make it lower case before we start checking it so we're going to say str tio LW our parentheses and then inside the string to lower case we want to get the actual thing they want to make into lower case so what we want to get you want to get the second data we got from the explode up here because we don't want to get the filename want to get the extension which is the second piece of data so inside the string to lower going to say end parentheses which is also PHP function it gets the last piece of data from an array which would you actually get me explode something we getting away from it which in this case is going to be extension we're going to go ahead and say dollar sign file extension so now we basically have the extension from the file we just uploaded now the next thing we need to do is to tell it which files you want to upload or allow for people to upload inside our website so underneath here we're going to create an array which has the information inside of it of the file extensions we want to allow inside the website so going to say dollar sign allowed to equal to an array parentheses now inside this array we're going to tell it which have a fast want to allow inside the website so the first date i'm going to write in here is a jpeg jpg now the second file want to allow is jpeg2000 do actually have more than one type of extension when it comes to jpegs the third file i want to allowing here is going to be a PNG image like so so now basically just listed all the different file types want to allow this actually going to allow pdfs as well just for this example here like so now the next thing we want to do here is now check if the file is actually allowed to get uploaded inside the website if it has proper extensions so underneath here we're going to go ahead and write another if statement inside our current if statement that we have going on in here now this if statement is going to go and check if any of these extensions we listed up here is inside the variable we created called file actual extension so if the jpg is inside this variable up here then it is allowed because it's inside this array down here so inside the if statement we're going to write here is we're going to write in on the score array and inside this one we're going to say parentheses and then inside the parentheses we first of all need to tell it what the variable is that has the thing you want to check for so we're going to say they have dollar sign file actual extension then the second parameter is going to be an array that we want to check if the string actually exists inside of it so going to say aloud now if this is actually true if this extension is inside the array then we want to run this if statement here now if we do not have this extension inside the array then we want to give an error message so we're going to say else curly bracket then we can echo you cannot upload files of this type so now the person will actually get a message if he does actually upload a file that we don't allow inside the website now inside the if statement the next thing we need to check for if there was any kind of errors when we upload the file because we did actually check if we had an error inside the file information and if there was no arrows then it's just going to go and pass on with the next piece of code going to write an if statement inside our statements we're going to go to insert our dollar sign file error variable and then we're going to go and set it equal equal equal to 0 and the reason we're putting it equal to 0 is because we want to check if we had no errors uploading this file as you guys can see inside our array if you go down into error which is right down here then is equal to 0 which means that we had no errors upload this file right now so we're going to go back into our file and inside our if statement actually know after the if statement going to create another else statement because if there was an error message here you want to make sure we put an arrow message so I'm going to go and copy my echo down here and then I'm going to say there was and error uploading your file so now that we have that we can actually go back inside out if statement and the next thing we can take for is to file size i'm going to say if and then inside the if statement i'm going to say we have cosine file size and then we're going to go and check if it's less than a certain number so right now we can actually go and say it has to be less than and five hundred kilobytes for example i'm going to say 500000 so now it's less than five hundred kilobytes if you guys want one megabyte because some people to actually think this is quite tiny we can always say 1,000,000 kilobytes so now if the file size is less than 1 million if i go back to my browser you guys can see my file size right now is actually not anywhere near that big it's only 64,000 something it will actually allow for this file to get uploaded so now if it passes this thing then we do actually get to the part where we do actually upload the file but before we do that need to write another else statement because we want to write an error message if there was an error with this if statement so wanna say echo your file is too big inside the if statement then we can start uploading the file before we do that we need to make sure that when we do upload the file it gets a proper name because right now forward to upload for example if I called test dot jpg to my uploads folder and then someone else later on upload the image that has the exact same name test the jpeg will actually overwrite the existing image inside my uploads folder meaning that the other users to upload an image will get his image delete it so in order to prevent that we're going to go and create a unique ID gets inserted what these replaced with the actual name of the five when it was uploaded so instead of it being named test a JPEG could actually get name something like you know a bunch of numbers dot jpg so what we're going to do is we're going to go and say we have a new variable which is going to be equal to the new name of the file so we're going to save file name new we're going to set it equal to a function called unique ID so going to say unique q2id parentheses now inside this function here we're going to go and create single quotes comma through which creates a unique ID based on the microseconds that were actually in right now in current time format so we don't just get a random number we actually get a time format in microseconds which becomes unique number that doesn't get replaced at one point so we don't actually get a chance of this random number being the same as something we already uploaded so after we have this we're going to go ahead and say we want to add the extension of our file up here so it was a JPG file you uploaded we want to add the jpg file type behind a unique name because this is the new file name if you don't actually put the extension behind it then our Father just because something without any kind of extension which means that it's not an image anymore so after we have a parenthesis we're going to go ahead and insert the extensions are going to say punctuation we're going to double quotes because we want to add an actual punctuation behind the name then after double quotes are going to go and say punctuation and then we're going to go in carpet name of our new file extension which is up here which is the lowercase version called file actual extension and put it behind our unique ID we have down here like so ? you guys can see you get one line of code so now we have a new file name we need to tell it where we want to upload this file to inside our root folder so we're going to go and go down to the next line we're going to create another variable i'm going to call this one file destination we're going to set it equal to the actual destination to one top of the file to which in our case if we had to write a path inside our root folder is inside and upload folder /and then the name of the five want to upload which in our case is the new file name we created up here so we're going to go and copy the variable filename new and inserted after uploads here so we can make sure we actually do this correctly because you have a string and you want to insert the filename new after the string like so assume are you guys can see it looks like this so now we have this we just need to do one more thing before the fire will actually get uploaded it is to create actual function which moves to file from the temporary location that we have up here into the actual location that we wanted to become uploaded to which we have right here so on the next line we're going to go and create the function was actually upload the file which is called move on the score uploaded file parentheses and inside the parentheses we need to tell it what a temporary location of the file is and where the new location is so right now if you go back up to the top we have the temporary file location which is right here go back down paste it is the first parameter combat and then tell in the second parameter where we want to upload a 2 which is to file this nation right now we just told the top look the file so what we can do now is we can actually echo out a success message if you want to access actually go ahead and bring us back to the front page index 2.php after we're done so i'm going to say header double quotes location call on and then we're going to say index dot PHP and then just to make sure we have actually uploaded the file is actually going to add something behind a URL so you can actually upload the file I'm going to say ? upload success just to have something like so save it and now all we can do is actually test this is working somewhere to go back to my website refresh you guys can see once i do actually click Choose file select some kind of image and click upload we get upload success inside rul up here if i go into my root folder but you guys will notice if i go inside my uploads folder is that we have an image in here which right now has the following name i'm just going to copy so you guys can see it this name right here which is the unique ID we gave the name when we did actually put inside milliseconds and then we added the extension behind it so this is the new name of the file now of course if you want to upload profile images and have them appear for the right user inside a website you know when we're talking just profile images we can't name it like this like we just did here but in a future episode i will talk about how to do profile images using this method here so we can actually get the right images from a website when a user for example gets locked in but this is how we actually upload stuff inside our website and i hope this wasn't too confusing for you guys because it can get quite missing when you have all these different arrays of information inside files we want to do stuff with when we do actually upload the file so if you guys enjoyed this episode and i'll see you guys next time