51: Upload Files and Images to Website in PHP | PHP Tutorial | Learn PHP Programming | Image Upload

today we're going to talk about how to upload images and files into a website and 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 gifs PNG s or PDF files or text files it can be all sorts of files and it 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 index to PHP file the only thing I have in here is a very basic html5 set up 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 in in order to actually upload the files and then we're going to create the script afterwards that actually uploads 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 documents and that sort of thing either you can upload to a database as a blob elements or you can upload directly to the root folder of your 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 you need to do is inside our body tags we're going to go and create a very basic form now the form is going to be what we used in order to actually select the file from the computer that we want to upload into the website so I'm going to create a form I'm going to go ahead and set a couple of parameters inside the form tags the first thing you need to do is to set an action inside the form tag because we need to tell our form where we need to go to in order to load the script that needs to upload the files and images to the website so the action one asset is a file name called upload dot PHP now this is a five we 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 going to go ahead and say method equal to double quotes and I'm going to set it as a post method and this is 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 Inc type and this is something we need to have inside the form tag in order for this to actually pass it on to our upload PHP file so we need to say Inc type and we need to set it equal to something called multi-part form data so I'm going to say multi-part forward-slash form - data so now we should be able to pass on images and other types of files in to upload the PHP now the next thing we need to do is to set an input inside our form tags so I'm going to say input and we're going to set the type as a file because we need to pass on a file and when we do set the type as 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 our computer so this is basically what this input does so if we go ahead and name this we can just go ahead and call it 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 and then I can browse my computer for files so 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 so a 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 we're just going to write something like upload image or upload file doesn't really matter let's actually go ahead and say upload because I don't want to confuse you guys because it is all types of files its images and text documents we can upload or PDF files so what do we want to do so we're just going to say upload so now that 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 inside my root folder as you guys can see I only have this document called index to PHP now when we upload a file we will need to tell our PHP scripts 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 so we have a folder we can upload stuff into so now that we have this we can actually go ahead and go into our text editor and create a new file now inside this file just going to go and save it first I'm going to call it upload dot PHP and just save it directly inside my root folder so now that 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 it's basically error handlers which means that we can set a limit for the file size we can tell we can tell the script which type of document you want to allow for the user to upload you can do a bunch of stuff in here and 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 the applet the PHP file the first thing we're going to do so we're going to go out and tell every want to start writing PHP code so we 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 our form in order to submit the image so we're going to say is set parentheses then we're going to write a super global called dollar sign underscore post because we use the post method inside our form we're going to say brackets and say that the name we're checking for inside the post method is submits because we used submit as the name inside our 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 we're going to do is create a variable we're going to call a file set it equal to a super global called dollar sign underscore files and files is actually a new super global we haven't talked about before which basically gets all the information from the file that we 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 file because inside our index page we did actually name the file file so now that 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 it is so underneath here we're going to create another variable we're going to call a file name we're going to set it equal to the super global call files again that has the name of file and then we need to tell which information from this file we want to extract and the first one here we want to get the full name of the file so I'm going to say 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 were to print our this file we have up here by saying print underscore our dollar sign 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 an array so we get name which is equal to after effects and this is a associative array which we talked about two episodes ago so if you guys are confused about the names here you can go and watch the episode first now we get name which is equal to the name of the file we have type which is equal to a txt file type that we have inside PHP called image slash 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 saved somewhere temporarily on our computer before we actually upload it then we also get an error that checks if we did actually get an error uploading this file right now it says 0 which means we didn't get an error if it says 1 then we got an error we also get the size of the file here so we get a bunch of information and this is the information need to insert into our variables so the first thing we're getting is the name so if I go back here and just kind of delete Pindar as you guys can see we now got the name let's actually go ahead and copy this paste it underneath there a couple of 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 we then also going to change over here instead of name we're going to say TMP underscore name which is like I said the temporal location of the file which is actually pretty important when we do actually need to upload the file the next thing we need to add here is the size of the file so we're going to say size and again we're going to change it 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 sometimes the error here's the name inside our practice as well and then the last thing we need to check here is the type of file we get so we say type then we change it to type inside the brackets so now we get all the information we can get from this file we uploaded here so now that we have all the information of the file the next thing we can do is we can tell it which files we want to allow to upload into our website because let's say I want to upload a profile image 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 ahead and create a variable we're going to call the file ext4 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 as 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 code again inside the explode tags we're going to tell it that we 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 we want to separate wherever there is a punctuation mark and want to do that with the file name so we're going to take the file name and insert it inside or 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 say file actual Extension we're going to set it equal to another PHP function called string to lowercase and that's because right now if I were to upload a file that might have big letters after the punctuation so instead of jpg in small letters it could actually be jpg as capitalized letters so we want to make sure that every time we want to check for these sort of things we always make it lowercase before we start checking it so we're going to say STR Co Lowi ER parentheses and then inside the string to lowercase we want to get the actual thing they want to make into lowercase so what we want to get is we want to get the second data we got from the explode up here because we don't want to get the file name we want to get the extension which is the second piece of data so inside the string to lower we're going to say ends parentheses which is also a PHP function it gets the last piece of data from an array which we do actually get when we explode something we get an array from it which in this case is going to be our extension so 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 files extensions we want to allow inside the website so we're going to say dollar sign allowed set it equal to an array parentheses now inside this array we're going to tell it which type of files we want to allow inside the website so the first data I'm going to write in here is a JPEG jpg now the second file I want to allow is jpg because we do actually have more than one type of extension when it comes to JPEGs the third file I want to allow in here is going to be a PNG image like so so now basically just listed all the different file types I want to allow that's actually going to allow PDFs as well just for this example here like so now the next thing I want to do here is now check if the file is actually allowed to get uploaded inside the website if it has the 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 ahead 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 what we're going to write here is we're going to write in underscore 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 we want to check for so we're going to say we have dollar sign file actual extension then the second parameter is going to be the array that we want to check if this string actually exists inside of it so we're 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 brackets 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 uploaded the file because we did actually check if we had an error inside the file information and if there was no errors then it's just going to go ahead and pass on with the next piece of code so I'm going to write an if statement inside our if statements we're going to go to insert our dollar sign file error variable and then we're going to go ahead and set it equal equal equal to zero and the reason we're putting it equal to zero 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 it's equal to zero which means that we had no errors uploading this file right now so we're going to go back into our file and inside our if statements actually no 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 error message so I'm going to go ahead and copy my echo down here and then I'm going to say there was an error uploading your file so now that we have that we can actually go back inside our if statements and the next thing we can take for is the file size so I'm going to say if and then inside the if statement I'm going to say we have dollar sign file size and then we're going to go ahead and check if it's lesser than a certain number so right now we can actually go and say it has to be less than 500 kilobytes for example so I'm going to say 5 0 0 0 0 0 so now it's less than 500 kilobytes or if you guys want 1 megabyte because some people do actually think this is quite tiny we can always say 1 million kilobytes so now if the file size is lesser 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 I'm going to say echo your file is too big inside the if statement then we can start uploading the file and before we do that we need to make sure that when we do upload the file it gets a proper name because right now for were to upload for example a file called test dot JPEG to my uploads folder and then someone else later on uploads a image that has the exact same name test a JPEG it will actually overwrite the existing image inside my uploads folder meaning that the other user who upload an image will get his image deleted so in order to prevent that we're going to go and create a unique ID which gets inserted or this replaced with the actual name of the five when it was uploaded so instead of it being named test a JPEG could actually get named something like you know a bunch of numbers dot jpg so what we're going to do is we're going to go ahead 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 we're going to say unique Q I D parentheses now inside this function here we're going to go ahead and create single quotes comma true 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've 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 if it was a jpg file you upload it we want to add the JPEG file type behind our unique name because this is the new file name if we don't actually put the extension behind it then our file with just because something without any kind of extension which means that it's not an image anymore so after we have our parentheses we're going to go ahead and insert the extension so we're going to say punctuation we're going to say double quotes because we want to add an actual punctuation behind the name then after double quotes we're going to go ahead and say punctuation and then we're going to go and copy the 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 if i zoom out you guys can see we get one line of code so now that we have the new filename we need to tell it where we want to upload this file to inside our root folder so we're going to go ahead and go down to the next line we're going to create another variable and we're going to call this one file destination we're going to set it equal to the actual destination that we want to upload the file to which in our case if we had to write a path inside our root folder it's inside an upload folder forward slash and then the name of the file we want upload which in our case is the new filename we created up here so we're going to go and copy the variable filename new and insert it after uploads here so we're going to 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 so if i zoom out you guys can see it looks like this so now that we have this we just need to do one more thing before the file will actually get uploaded which is to create the actual function which moves the 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 ahead and create the function which actually uploads 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 where we have the temporary file location which is right here go back down paste it in as the first parameter comma and then tell it in the second parameter where we want to upload it to which is to file this nation right now we just told it to upload the file so what we can do now is we can actually echo out a success message so if you want to actually let's actually go ahead and bring us back to the front page index to PHP after we're done so I'm going to say header double quotes location colon and then we're going to say index dot PHP and then just to make sure we have actually uploaded the file let's actually go ahead and add something behind a URL so we can actually see we uploaded the file so I'm going to say question mark upload success just so you have something like so save it and now what we can do is actually test if this is working so if I were 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 our URL up here if I go into my root folder what you guys will notice if I go inside my clothes 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 in 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 so we want to do stuff with when we do actually upload the file so hope you guys enjoyed this episode and I'll see you guys next time

Channel: Dani Krossing

Views: 764,291

Keywords: file upload in php, php images easily, how to upload images or files in php, upload images or files in php, upload images using php, upload files using php, upload files to directory php, upload files to website php, upload files to website using php, upload files to website in php, upload images to website, upload images to website php, best way to upload images using php, php file uploading, php file uploading tutorial, upload files and images to website in php, PHP tutorial

Id: JaRq73y5MJk

Length: 23min 8sec (1388 seconds)

Published: Wed Nov 30 2016