This app shows you how to use an HTML form to upload a picture file to your server and have PHP process and save it. The PHP app then automatically creates a gallery so that you can see the pictures you have uploaded. This teaches you how to deal with file uploads.
PHP Configuration:
Your php.ini file may have to be edited to be able to upload files. Within your php.ini file make sure file_uploads = On. Then check upload_max_size and see if it’s set appropriately. The php.ini file is usually located at /etc/php/7.x/apache2/php.ini . The 7.x is for the version of PHP you are using and this is for Apache. Once the changes have been made make sure to restart the Apache service with sudo service apache2 restart
Also make sure the folder you are uploading files to has the appropriate Linux level permissions. For these types of projects I recommend 777 so that you don’t have to troubleshoot permissions while you are learning PHP.
; Whether to allow HTTP file uploads.
file_uploads = On
; Temporary directory for HTTP uploaded files.
; Will use system default if not set.
;upload_tmp_dir =
; Maximum allowed size for uploaded files.
upload_max_filesize = 16MCode language: JavaScript (javascript)Code Explanation:
pic-upload.php
Line 1 – Title for App
Line 3 – Open Form set action to send form data back to the pic-upload.php script as method post. The enctype must be set when sending files with an HTML form.
Line 4 – Set input type to file with a name of image
Lines 5-6 – Create submit button and close form.
Line 8 – Open PHP script
Line 9 – Create variable $error and set value to 0. This will be used to make sure that the file that was uploaded is within requirements.
Line 11 – If statement for if a file was sent to the PHP script.
Lines 12-14 – Create variables form name, size and temp name and set them from the $_FILES array that was created when the file was sent to the PHP script.
Line 15 – Creates a variable for the extension of the file that was uploaded. The strtolower() sets all characters to lowercase. The explode() function turns $_FILES[‘image’][‘name’] into an array based separated by a . . The end() function then takes the final value in an array and this is then set as the value of $file_ext.
Line 17 – Create an array for all extensions that we want to allow to be uploaded.
Line 19 – echo var_dump() can be used in troubleshooting to make sure the $_FILES array has appropriate values if the script isn’t working. Should be left commented out unless you need to troubleshoot.
Line 21 – 24 – If statement to check if the file extension of the file uploaded matches with acceptable extensions that were coded in line 17. If it’s not we print out an error message and then set $error to value of 1.
Line 26- 29 – We create an If statement to make sure file is under the maximum size. Make sure this value is less than the max upload value in php.ini file. If a file is smaller than the value in the If statement, but bigger than what’s in the php.ini file the script will fail silently. I set the value to 2000000. Technically 2 MB is 2097152 Bytes, but rounding down eliminates possible “quirks” in file sizes.
If the file is too big an error message is printed, and the value of $error is set to 1.
Line 31 – If statement to check if $error is 1. If $error does not equal 1 the the file is written to the folder, if it does equal 1 a final error message is printed.
Line 32 – We create a name the file will be saved as. For this project I set this to be a unique name for every upload by using the time() function. This way you won’t run into problems with files with the same name. $new_name is set to the current time in Unix timestamp concatenated with the extension of the original file.
Line 33 – We no save the file with move_upload_file() function. We use the temporary file name created when a file is uploaded, then state what the file should be saved as. In this example we use “./” to state the file should be saved in the current folder and then concatenate on the new file name we just created.
Line 37 – Closes the upload portion of the PHP script
Line 39 – Starts the gallery portion of the script and with the glob() function finds all files with jpeg,jpg,png extensions and adds then to the $photos array. (You can add different extensions here, just don’t put a space after commas.)(make sure the display extensions match with the extensions you allow to be uploaded. If not uploaded pictures will not be displayed in the gallery area)
Line 41 – var_dump of $photos for troubleshooting if needed
Line 43 – We reverse sort the $photos array so the newest pictures are on top. This is made simple because the names of the images are timestamps.
Lines 45-49 – We use a foreach() loop to loop through the pictures in the array and dynamically build an image gallery with the picture names.
Line 51 – We close the PHP script
<h1>Pic Upload App</h1>
<form action="pic-upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit">
</form>
<?php
$error = 0;
if(isset($_FILES['image'])){
$file_name = $_FILES['image']['name'];
$file_size =$_FILES['image']['size'];
$file_tmp =$_FILES['image']['tmp_name'];
$file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));
$extensions= array("jpeg","jpg","png");
//echo var_dump($_FILES);
if(in_array($file_ext,$extensions)== false){
echo "This app only accepts .jpeg .jpg and .png files<br>";
$error = 1;
}
if($file_size > 2000000){
echo "The image is too big. Must be below 2 MB<br>";
$error = 1;
}
if($error != 1){
$new_name = time().".".$file_ext;;
move_uploaded_file($file_tmp,"./".$new_name);
}else {
echo "There was a problem uploading the image.";
}
}
$photos = glob("*.{jpeg,jpg,png}", GLOB_BRACE);
//echo var_dump($photos);
rsort($photos);
foreach($photos as $pic){
echo "<div style='display:block; margin-left:auto; margin-right:auto; width:50%;'>$pic";
echo "<img style='display:block; margin-left:auto; margin-right:auto; width:50%;' src='$pic'><br><br>";
echo "</div>";
}
?>
Code language: HTML, XML (xml)
