Image upload in PHP | Image preview | PHP Image validation | Insert form data in the database

friends in this video we'll develop an application in PHP and MySQL to show how to upload an image insert a row in the database with the image delete the image and view the image in a model all using PHP MySQL and jQuery so this is a form we can enter the name of the user here and select a photo as soon as photo is selected a preview of the photo will be displayed here and when we click on upload button image will be uploaded in the server and a row will be inserted in the database and this row will be displayed here so if we enter the name select a photo preview is displayed upload it's uploaded and a row is inserted in the database we can delete the row and also we can view the image in a model we click on delete okay so it's deleted so we'll develop this application using PHP and MySQL so these are the list of the activities we will be doing in this video so I am in zamp HD do folder so I'll create a new folder here for our project upload photo we'll open Visual Studio code code dot so we'll create create all the files and folder in this folder for our project so first we'll create an index.php HTML 5 let us give a title we'll use boot step 5 so we'll get the boot step from CDN so this is boot step five copy it and paste it here we'll create a CSS folder and within this we'll create style. CSS so we'll add all the Styles in this file here let us add the container so we have to create the form now since we'll be uploading a file we need an encode type it will be multipied form data so we'll use input text name give name then we'll be selecting the file so we'll have input type equal to file we'll give a select photo we give the name as photo we'll give a help text jpg JP and PNG these are the allowed file types then we'll add a button submit button we want to give a name so at this moment let us just try run it our folder name is upload photo we'll give a heading here copy this let us add some CSS so this is our form now we'll add a table HTML table here to display the users with the photo so here we'll create a HTML table just after the form bs5 table so we'll use table bordered and we'll give serial number name and Pho this action will be to delete the row so let us just keep one row because we'll be using PHP Loop anyway so if we just run it now change the background of the header use table dark and here add a class mt5 so we have not yet added any database or any PHP code yet it is just a static form and a static HTML table so now we'll create a table we'll use test database so here we'll create a new table let us give the table name as users ID name and photo whereare create the table change it to primary key and change it to Auto increment so our table is ready now we'll go back to the project here we'll create a folder CFG for our database connection and we'll create DB connect. PHP we'll use new mysqli and we'll give four parameters server user ID password and database name and let us Define them for this example we are using root user and there is no password for the root and database name we are using test database and just check the connection if there is any error during connection we are going to stop here so we'll use die so our database connection script is done we go back to index.php here we'll include DB connect so now our table we have the table here so we'll populate this table though we don't have any data in the table but we just want to write the PHP script to get the data from the user table and display them in this table we'll write an SQL query so we are selecting everything from the users table we'll use prepare statement get the result now we will use a for Loop to display the data in the HTML table first check if there are any rows return by the query so we have to check if number of rows is greater than zero so if there are rows then only we want to use a for Loop here so within the loop we'll use this tier and close the loop and then give and else tier no users to display so first we are checking if number of rows greater than zero then we are using a for each Loop and within the for each Loop we are displaying the table row and if there are no rows return by the query we are adding one row with message as no users to display so now we have to display that table data here so we'll use a counter and if the rows are found and we'll increment the counter here and then we have name and then photo name and then give the photo but since photo is just a name of the file we cannot just give here because we have to give the image here we have to use the image tag SRC equal to photo so if we run now so it's giving the error DBC connect. PHP so DB connect is in the CFG folder so you have to specify the folder name here refresh so you can see it is saying no users to display let us give a head here that is style now as soon as the photo is selected we want to display preview here we'll go to index.php we'll add an image preview so just after the image this is the image We'll add a div class equal to image preview now we'll use some CSS for this image preview we'll display default image for this image preview we'll use a background image so let us create an image folder so we'll take one default image past it here so we have up.png so we'll use a background image now we are in CSS folder so we have to go one level up then image folder and then the file name give High to it and give a background size so if we refresh now so we just need to change the height it let us give a margin here now we'll write jqu script to display the preview of the image we'll create a new folder here JS we'll write our JavaScript in this folder so let us give the name as upload. Js now to run the jQuery we need a jQuery Library so we'll add a jQuery library from CDN and then add our custom Js Js upload. Js now we'll write the image preview so as soon as the image is selected we'll call a JavaScript function so this is our input file on change will be fired as soon as the image is selected preview image and then here write the function give the input first we'll check if the file is selected so we'll create a file reader object we will use onload event give the event now our image preview class is image preview We'll add the CSS give URL now here we have to use the event. Target and then we'll use read as data URL method and give the input file so here we are using a file reader object which will read the file and create an image URL and we are using using that image URL in the background of the image preview so let us refresh it and see so choose a file I select one so image is coming so image preview is done and we have created our database so now we'll work on the form so go to index PHP here is the input name we don't need this instead we'll use a div to display the error we'll use class equal to text danger and for the file also we'll use the same div to display any error related to the file so now when the form is submitted we want to write the PHP code there are two inputs one is name which is input text and another is file so we'll create a new file for the upload and to insert the data in the database so upload.php and then we'll include this in index.php so just include it here so after the form is submitted we'll write the PHP code to upload the photo and also we'll insert a row in the database so first of all we'll check if the form is submitted so this submit button name is submit then first we'll check some validation if the name is empty or not so we'll check if name is empty name error and also we'll use a flag dollar error validation fails so flag equal to two so we'll initialize this initially it will be false and if there is an error it will be true and check the file also so we'll see if the file is empty or not so dollar files will be available when the input file is submitted so then we'll give the name of the input file photo and then use the name if similarly we'll use the photo error now if there is no error then error will remain false so we'll check if not dollar error that means if there is no error then proceed with the upload validate and then ABD so here we are using name error so we'll display this in our form so we'll display it here similarly we'll use the photo error here so let us just test it now refresh it so it says name error and photo error not defined so we have to just initialize those these are the two variables we Define so we have to just initialize them refresh now click on submit button it's saying please enter a name please select a photo so we have to just change the class here text danger CLA SS refresh click on submit button without entering anything here so it is showing the error message so our script is working fine so now we'll proceed with the image validation so first we'll take the three variables here image name temporary name and the size of the image dollar files photo and name and then we'll use the temporary name and then size so now we'll first check the file extension so we'll get the extension of the selected file we'll use path info function and give the image name and then give path info extension so this will give the extension of the image file and now we'll Define a valid list of of extension so here let us use valid extension we'll use an array jpg and PNG if you see in an index.php allowed file types jpg jpg and PNG so we have used them in an array so now we'll check if the file extension matching with any of the extension given in the valid extension list then we'll change it to lower case and now we'll use inarr function if it's a valid extension then only we want to proceed else let us give a message and we'll Define this error message so let us test it let us give some name so we'll select a file which has a different extension we have a text document here it don't display the preview but still I am going ahead with submit so it is not coming here because we have not displayed the error message so we have to display this now index.php we'll just display message here just after the form so now let's see we'll select a file text document.txt extension preview will not be displayed because it's not an image file but still I'm going ahead click on submit button and it says that not a valid extension so our validation is working now we'll check if the image is really an image file we'll use PHP function XP type it works on the temporary image equal to image type jpg or XP image type equal to PNG so jpeg or PNG then it's a valid image else will give a message not a valid image file so we just test it so this is a text document we'll change it to we'll just change the extension to PNG so it's not an image file but the extension is PNG submit so not a valid image file so this is fine now we'll check the the size of the image so we have the image size greater than 4 M so I'm using approximate value here 1 2 3 4 56 give an error message image size exceeds 4 MB else we'll proceed with the upload so let us test for the size we'll select a file which is more than 4 MB so this image is more than 4 MB so you selected this submit so image size exceeds 4 MB so this validation is also working now we'll proceed with the upload so here write proceed with upload so we'll create a new image file here dollar New Image we'll use time function then give the base name and the image file so we have the image name so this will create a new image file so this is image so new image and now we'll use TR catch here so here we are using a triat and you will use move uploaded file and then the temp temporary name image TMP and then we have to give the target image file so we'll use a Target directory first let us create a new folder uploads so we'll upload the image file in the uploads directory so let us Define a variable here dollar Target directory now Target directory now in the move uploaded file let us give the target directory dot New Image so file will be uploaded here and in case there is any error it will come here in the exception and it will print the error message so now once the file is uploaded we'll insert a row in the database so again we'll use TR catch write the SQL statement so you have to write the insert statement users stable now let us see the column name we have name and photo dollar connect prepare so we have to use the bind param since we are using two parameters we are using two variables here name and photo name we already have got and for the photo you'll use the new image and both of them are string variables so we will use SS so we'll now execute it and then redirect it to index.php so let us now run it if you see uploads folder is empty now and in our database it's empty so let us refresh it so you can see the name is showing here if you see in the database it's showing the name and in the upload folder it is uploaded so we have uploaded the image successfully and inserted the row successfully but here it is not displaying the photo so let us see in index.php so here it should be SRC and we have to specify the folder name so it's in uploads folder so let us refresh sheet so we need to change the height and width so here image so let us just add this so we'll use a class here let us give border radius so it is showing the image so if we upload another one so it is uploading and it is displayed correctly now we'll add a delete action button here so we go to index.php we have the photo and then action so add a here so TD just give a button button default give it danger delete just refresh and see now here give a title delete the user now here get the confirmation first so we'll use on click equal to confirm and here let us close the anchor and we'll call index.php with parameter ID equal to Dollar row ID so we are sending the ID and calling the same index.php so if you refresh index. pH ID = to 2 now we'll go to upload.php and here we'll check for the ID dollar request ID if you said dollar request ID and not equal to blank so dollar ID equal to we need to get the image name from the database so we'll write SQL statement to get the data from the users table protoc column from users where ID equal to question mark statement equal to we have to bind the parameters we have the ID and it is an integer so we give I execute and then get result if F associate and then let us give the $4 photo equal to Dollar row photo so let us just declare this now once we get the photo we'll just check if file exist we have to give the target directory dollar photo use un link to delete the file just copy this then we have to delete from database so dollar SQL equ Al to execute it so here first we are checking whether the file exist or not so we are deleting it using aling function and deleting the entire row from the database ID equal to and we have to bind the parameter here after the prepare I and dollar ID so it will delete the row and then redirect so let us refresh it now we have two files two files we have click on this okay it is not deleting so there is some problem so let us see in the database is there so there is some problem so let's see what is the problem so let's see the index.php so you can see we have used a confirm but we have to use the return on click equal to return because once we click on the yes it will return true otherwise it will return false so we have to give the return here just before confirm so let us refresh now click on delete still there is some problem you can see there is a space here so you have to remove the space go here and just remove the space from here then refresh again click on delete okay the image is deleted so if you see in the database it is showing just one image now in the folder also it is showing one image let's delete the other one also it's deleted and the folder is empty and the database table is also empty so let us now add another one now the last thing we'll do when we click on the image the image will be displayed in a model so so let us do that so we'll create a model gstep model here in index.php bs5 model and here this is the button we don't need this we just take this copy this and go here in the image this is the image and here let us give a anchor tag and paste it here and give a data ID give the image file Lim which is actually the photo and here close that anchor tag let us remove this we do not need it anymore here change it to display display image photo and when the board you will display the image we'll just remove this and let us display the image here we do not need the save button and remove this script so we'll add our jqu script to display the image so we'll add a class here let us give a class so that we can use that in our jQuery now go to upload. Js do onclick and we have used the Class View comma function now we'll use the data ID where ID equal to data ID we have already used data ID for the image and then form a string with the image tag SRC equal to uploads SL then give the ID plus ID plus so this is the string and then we'll use the model body model body do HTML SP since we are using boab model we need need the CDN boep JS copy this and paste it here and remove the first one we don't need let us now refresh it and click on the image model is coming but image is not displayed so let's see data idal to doar 42 we have to give equal to here so let us refresh and click on it okay the model is opening image is showing we need to just change the height with WID let us give width and model word image so we'll just add the CSS close it close it refresh it click on the image so image is displayed now we can give a height also okay so let us upload another one click on the image so it is dis in the model so our upload and delete both are working and we can view the image in a model also so we have completed our development for uploading image using PHP and MySQL I have developed a similar video to upload an image using ax in PHP please see the video description for the link you can also visit my website Cod howto.com for many such web development Topics in PHP codeigniter and lar with my SQL database I hope this this video will be useful to you please give a like And subscribe to my channel thank you

Channel: Codehow2

Views: 467

Keywords: php, php development, php web development, php tutorial, php course, php developer, mysql, html, css, learn-php, php image upload, upload image, php image validation, php upload photo, upload picture, file upload, php file upload, upload php, preview photo javascript, preview image, image preview javascript, php crud, image validation, html form validation

Id: 1I2OyABAfbE

Length: 44min 40sec (2680 seconds)

Published: Mon Mar 18 2024