Dj Techblog

A blog on web development

File upload in php

Last modified on on Feb 22, 2021
php image file upload and display as profile picture
In this blog, I will create a html form to let user upload his image file in the website and display it as profile picture. We apply some styling to the image so that it looks classy or we can also make it rounded and look like facebook profile picture.



Before, we start want to see a demo?    

Follow these steps,
  1. Html form for image file upload and display as profile picture
  2. Script for php file upload to the server
  3. Errors page: to print the errors while uploading the image file to the server

Recommended read, File upload to php server via ajax call


Html form to upload image file and display it as profile picture


I have included the upload.php file here to handle the file uploading. Apart from that this page contains a simple form where user can browse through her files in the file system and upload it. I have made the corners of the uploaded image rounded. If you want to keep it straight and simple reduce the border-radius property of the image. I have included the errors.php file too to print the errors.
While uploading file to the server, always use html POST method. GET method doesn't work here. And encryption type is enctype="multipart/form-data

Html form for file upload

<?php include('upload.php')?>
<html>
<head>
  <style>
      #welcome-image img
      {
          margin: auto;
          border-radius: 30px;
          height: 190px;
          width: 180px;
      }
  </style>
</head>
<body>
  <div id="welcome-image">
          <img src="<?php echo "profile_pic/" . $newfilename ?>" alt="Upload photo">
          <form action="" method="post" enctype="multipart/form-data">
              <input type="file" name="fileToUpload" id="fileToUpload">
              <p></p>
              <input type="submit" height="10px" width="40px" value="Upload Image" name="submit">
              <p> <?php include_once('errors.php');?> </p>
          </form>
  </div>
</body>
</html>

Also read,

Write php script for file upload


The file start with including the sessions.php. The sessions.php file checks that the user is logged in or not, it also retrives the username of the user. We retrieve the username and save it in $user_check. We append the username as filename to make sure that always a single copy of the image is stored at the server for any user. The new filename is set by the line $newfilename = $user_check . '.' . 'jpg';.
We set the target directory, in which the image file will be stored after uploading, $target_dir = "profile_pic/";
We also check for the fake image, that is, the image user is uploading is valid or not. After it we check for file size of the image. User can upload a image file more than 50Kb. We only allow for JPG, JPEG, PNG & GIF file type.

Php script for file upload to the server

<?php include('session.php') ?>
<?php
$errors = array() ;
$success = array() ;
$newfilename = $user_check .  '.' . 'jpg';
$target_dir = "profile_pic/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) 
{
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) 
{
$uploadOk = 1;
} 
else 
{
array_push($errors, "File is not an image.");
$uploadOk = 0;

}


// Check file size
if ($_FILES["fileToUpload"]["size"] > 50000) 
{
array_push($errors, "Sorry, your file is too large..");
$uploadOk = 0;

}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) 
{
array_push($errors, "Sorry, only JPG, JPEG, PNG & GIF files are allowed.");
$uploadOk = 0;

}

// Check if file already exists
//if (file_exists($target_file)) {array_push($errors, "Sorry, file already exists.");$uploadOk = 0;}



// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) 
{
array_push($errors, "Sorry, your file was not uploaded.");

// if everything is ok, try to upload file
} 
else 
{
$temp = explode(".", $_FILES["fileToUpload"]["name"]);
$newfilename = $user_check ."profile-picture". '.' . end($temp);
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],"profile_pic/" . $newfilename)) 
{
array_push($success, "The image has been uploaded successfully. ");
} 
else 
{

array_push($errors, "Sorry, there was an error uploading your file.");

}
}

}

?>

Errors page to print errors while file upload in php


Values which we receive through update user details form is collected at separate variables here. We make a database connection and then check whether username is already registered or not. If it is registered, we update the user details in database, if no such user is found we make a row in the table for new user. Thats all in this page.

upload.php

<?php  if (count($errors) > 0) : ?>
<div class="error">
<?php foreach ($errors as $error) : ?>
<p><?php echo $error ?></p>
<?php endforeach ?>
</div>
<?php  endif ?>

<?php  if (count($success) > 0) : ?>
<div class="success">
<?php foreach ($success as $succes) : ?>
<p><?php echo $succes ?></p>
<?php endforeach ?>
</div>
<?php  endif ?>



If you face any issue while implementing the code, you can contact me. Thanks for patient reading.

If you like this article, share with your friends. It will inspire me to write more.
Published on Dec 5, 2020

Ad section

Intro

Debabratta Jena

I mainly write about HTML5, CSS3, Javascript, Angular JS, Ajax, PHP, Mysql, On page SEO, Google Ads, Tag manager, Universal Analytics, Google My Business, SERP, Apache server configuration etc, Yoga is my passion.

Reach to me in the contact us form below

Follow me on

Contact us

Subscribe

Tags

Php HTML5 Javascript CSS Ajax Angular JS Google My bisiness Listing Google tag Manager Google Universal Analytics Search Engine Optimization On page SEO Off page SEO Google Marketing platform Digital Marketing Google Ads Mysql Apache Server

Ad section
×

Subscribe to get email notification about our new post

Name

Email

We neither sell nor share your personal information with any third party. Your identity is safe with us.