Coding Demo

Tutorial

Image upload and delete

Images are widely used accross the board from Company's logo, product images, and expense claim receipts. Images are limited by the format type, and the size of the image. The programme need to identify the image files before upload them to the server.
This tutorial shows you the source code how to handle the image upload and delete.

Program flow chart

Webpage generated from the code.

Item text file.

In text-base database, every text file is a record or data. In the record, the sequence of the text in the lines are the database structure how the program read the file. In this example. the very first line is the item name, follow by description, then image file path. All subsequence program has to follow the structure to read the file.

Functions used in this webpage:

PHP

$_FILES[] function
$_POST[] function
trim() function
if statement
fopen() function
fclose() function
fwrite() function
fgets() function
echo function

HTML

HTML Forms

Coding area:

<?php
/* Set maximum execution time to 30 seconds */
set_time_limit(30);
/* receive image information by POST */
$image = trim($_POST["existing_image"]);
echo "Existing Image = ".$image."<br>"; 
$submit = trim($_POST["submit"]);
echo "Submit = ".$submit."<br>";  
echo "file name = ".$_FILES['image']['name']."<br>";
/* create an item file if not */
$item_file = "item.txt";
if (!file_exists($item_file))
{
$item_file_edit = fopen($item_file,"w");
fwrite($item_file_edit,"item name\n");
fwrite($item_file_edit,"item description\n");
fwrite($item_file_edit,"https://www.dotdesign.com.sg/images/noimage2.jpg\n");
fclose($item_file_edit);
}

/* 3 steps - After uploaded the image, update the text file and display the upload image */
/* Define the maximum file size (in bytes)*/
/* if (isset($_FILES['image']) && (file_exists($image) or strpos($image, "noimage2") !== false)) */
if (isset($_FILES['image']))
{
$maxFileSize = 2 * 1024 * 1024; // 2 MB
$errorMessage = '';
// Check if file was uploaded without errors
if ($_FILES['image']['error'] == 0)
{
// Get file details
$fileName = $_FILES['image']['name'];
$fileSize = $_FILES['image']['size'];
$fileTmpName = $_FILES['image']['tmp_name'];
$fileType = $_FILES['image']['type'];
$fileExtension = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
// Define allowed file types
$allowedTypes = array('jpg', 'jpeg', 'png', 'gif');
// Check if file type is allowed
if (in_array($fileExtension, $allowedTypes)) 
{
// Check if file size is within the allowed limit
if ($fileSize <= $maxFileSize)
{
// Define upload directory
$uploadDir = 'uploads/';
// Create the directory if it doesn't exist
if (!is_dir($uploadDir)) 
{
	mkdir($uploadDir, 0755, true);
}
// Create a unique file name to avoid overwriting
$newFileName = uniqid('', true) . '.' . $fileExtension;
// Move the file to the upload directory
if (move_uploaded_file($fileTmpName, $uploadDir . $newFileName)) 
{
	echo "<script>alert('File uploaded successfully: " . $uploadDir . $newFileName . "');</script>";
/* Set the image file to the uploaded file */
$new_image = $uploadDir.$newFileName;
/* delete old image and change the image url in the item file */
if (trim($new_image) !== "")
{

/* Read image url for verification to prevent upload again due to F5 */
if ($image == "" or (strpos(trim($image), "noimage2") !== false))
{
$file = new SplFileObject($item_file);
$file->seek(2); // SplFileObject is 0-indexed, so 2 is the third line
$image = $file->current();
echo "read from file = ".$image."<br>";
}
/* remove the item image if it is not marker */
if (file_exists(trim($image)) && (strpos(trim($image), "noimage2") == false))
{
	unlink(trim($image));
	echo $image." deleted "."<br>";
}
/* write the new image to the item file */
/* Read the file into an array */
$fileLines = file($item_file, FILE_IGNORE_NEW_LINES);
/* Check if the line number is valid */
$lineNumber = 2;
if ($lineNumber < 0 || $lineNumber >= count($fileLines))
{
	throw new Exception("Invalid line number");
}
/* Modify the specific line */
$fileLines[$lineNumber] = $new_image;
/* Write the array back to the file */
file_put_contents($item_file, implode(PHP_EOL, $fileLines));
/* replace the item image with new image */
$item_image = $new_image;
}
}
else
{
	echo "<script>alert('Error: There was a problem uploading your file.');</script>";
}
}
else 
{
	$errorMessage = "Error: File size exceeds the allowed limit of 2 MB.";
}
}
else
{
	$errorMessage = "Error: Only JPG, JPEG, PNG, and GIF files are allowed.";
}
} 
else
{
$errorMessage = "Error: " . $_FILES['image']['error'];
}
// Display error message if any
if (trim($errorMessage) !== '') 
{
echo "<script>alert('$errorMessage');</script>";
}
}
/* Delete image and modified the item file image url */
if ($submit == "Delete")
{
/* Delete the image and change the text file image to no image */
if (file_exists(trim($image)))
{
	unlink($image);
}
/* write the new image to the item file */
/* Read the file into an array */
$fileLines = file($item_file, FILE_IGNORE_NEW_LINES);
/* Check if the line number is valid */
$lineNumber = 2;
if ($lineNumber < 0 || $lineNumber >= count($fileLines))
{
	throw new Exception("Invalid line number");
}
/* Modify the specific line */
$fileLines[$lineNumber] = "https://www.dotdesign.com.sg/images/noimage2.jpg";
/* Write the array back to the file */
file_put_contents($item_file, implode(PHP_EOL, $fileLines));
/* replace the item image with new image 
$item_image = "https://www.dotdesign.com.sg/images/noimage2.jpg";*/
}
/* Read the item file - check image */
$item_file_edit = fopen($item_file,"r");
if($item_file_edit)
{
$item_name = fgets($item_file_edit);
$item_description = fgets($item_file_edit);
$item_image = fgets($item_file_edit);
fclose($item_file_edit);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload Image</title>
<script type="text/javascript">
function checkexisting(barcode)
{
var errormessage ="";
var barcodefile = barcode + ".txt";
var url = "items/"+ barcodefile;
var http = new XMLHttpRequest();
if (document.orderForm2.barcode.value == 0)
{
errormessage += " Please enter your barcode. \n";
}
if (document.orderForm2.barcode.value != 0)
{
http.open('GET', url, false);
http.send();
if (http.status === 200) 
{ 
	errormessage += "barcode exist. \n";
}
}
if (errormessage != "")
{
alert(errormessage);
return false;
}
}
</script>
<style>
/* Simple CSS for spinner */
.spinner {
display: none;
width: 50px;
height: 50px;
border: 5px solid lightgray;
border-top: 5px solid blue;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
	<img src="<?php echo $item_image; ?>" width="100"><br>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input name="existing_image" value="<?php echo $item_image; ?>" size="40" type="hidden">

<label for="files" class="btn">Select Image</label>
<input id="files" type="file" name="image" style="visibility:hidden;" accept="image/*" required onchange="submitForm()">
</form>
<div class="spinner" id="spinner"></div>
<script>
function submitForm() {
document.getElementById('uploadForm').submit();
document.getElementById('spinner').style.display = 'block';
}
</script>
<br><br>
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input name="existing_image" value="<?php echo $item_image; ?>" size="40" type="hidden">
<input type="submit" value="Delete" name="submit" style="height: 50px; width: 100%;">
</form>
</body>
</html>