CSS HTML MYSQL PHP

Upload and Preview sing PHP and MySQL Database







User experience can be greatly improved on an image upload feature if we enable the user to preview the image they have selected before actually uploading it to the server by clicking the upload button.

In this tutorial, we will create a form that takes two inputs: the user’s profile picture (image), and their bio (text). When the user fills the form and clicks on the upload button, we will use our PHP script to grab the form values (the image and the bio) and save the image in our project folder called images. Once the image is saved in the project folder, we will store a record in the database containing the image name and the user’s bio.

After saving this info, we will create another page that queries the user profiles from the database displays them on the page with each user’s bio against their profile picture.




So let’s get started with the implementation.

Create a project folder and call it image-preview-upload. Inside this folder, create a file called form.php and a folder called images for storing the images.

form.php:

Before I say anything about the form, let’s first of all create a styling file named main.css for the form in the root folder of our project.

main.css:

On the first line of our form.php file, we are including a file that contains our PHP script responsible for receiving the form values and processing them (that is, saving the image in the images folder and creating a corresponding record in the users table in the database).

If you take a look at the form, you will see that we are setting the value of the CSS property display to none; We are doing this because we don’t want to display the default HTML input element for file upload. Instead, we will create a different element and style it the way we want and then when the user clicks on our element, we will use JavaScript under the hood to trigger the HTML file input element which is hidden to us.

Now let’s add the scripts responsible for triggering the file input element and then also displaying the image for preview.

Create a file called scripts.js in the root of your application and add this code to it:




script.js:

Now when the user clicks on the round image area, the function triggerClick() will trigger a click event on the hidden file input element. When the user selects an image, an onChange event is triggered on the file input field and we can use JavaScript’s FileReader() class to temporarily display the image for preview.

When the user clicks the ‘Save User’ button, the input form will be submitted to the same page. So on that same form.php page, we are including a processForm.php file which contains the code to process our form.

So in the root folder of the project create a file named processForm.php;

processForm.php:

This code receives the input values that was submitted from the form. This input consists of the user image and the bio. On the server, we can access the image file and all related image information such as the image name, size, extension, etc, in the $_FILE[] super global variable while other information such as text is found in the $_POST[] superglobal variable.

Using the information in the $_FILE[] super global variable, we can validate the image. For instance, our source code can only accept images whose sizes are less than 200kb. Of course, you can always change this value if you want.

You notice in the code above that we are connecting to a database called img-upload. Create this database and create a table called users with the following fields:

users table:

Now open the form on your browser and input some info. If everything went well, your image will be uploaded to the images folder in your project and a corresponding record saved in the database.

Displaying Image from Database

Once our image is in the database, displaying it is a breeze. Create a file in the root folder and name it profiles.php.

profiles.php

Simple! This file connects to the database, queries all profile info from the users table and lists the user profiles in a tabular format displaying each user’s profile image against their bio. An image is displayed simply by using the image name from the database and pointing to the images folder where the image resides.

Conclusion

I hope you enjoyed this short tutorial. If you have any questions, drop it in the comments below.

Remember to support by sharing.







 

Leave a Reply

Your email address will not be published. Required fields are marked *