Creating File Upload Forms

Tutorial 1 of 5

1. Introduction

Goal of the Tutorial

This tutorial aims to guide you through the process of creating a form that allows users to upload files to a server. The form will be created using HTML and the file uploads will be handled using PHP.

Learning Outcomes

By the end of this tutorial, you will learn how to:
- Create a form with a file input field in HTML
- Handle file uploads in PHP

Prerequisites

Basic knowledge of HTML and PHP is required to follow this tutorial.

2. Step-by-Step Guide

Concepts

HTML File Upload Form: This is a form that allows users to choose a file from their system to be uploaded to a server. The form uses the POST method and the enctype attribute is set to 'multipart/form-data'.
PHP File Handling: PHP is used to handle the uploaded file on the server. It can validate the file and move it to a designated location on the server.

Examples

HTML File Upload Form:

<!-- HTML File Upload Form -->
<form action="upload.php" method="post" enctype="multipart/form-data">
  Select file to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload File" name="submit">
</form>

In the above example, when the user selects a file and clicks the 'Upload File' button, the form data is sent to 'upload.php' for processing.

PHP File Handling:

<?php
$target_dir = "uploads/"; // directory to save the uploaded file
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); // path of the file to be uploaded

if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
  echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
  echo "Sorry, there was an error uploading your file.";
}
?>

In the above PHP code, $_FILES is a superglobal array in PHP which is used to handle uploaded files. $_FILES["fileToUpload"]["tmp_name"] contains the temporary location of the file on the server.

3. Code Examples

Let's combine the HTML form and PHP file handling into a complete working example.

<!-- HTML File Upload Form -->
<html>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
  Select file to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload File" name="submit">
</form>

</body>
</html>

<!-- upload.php -->
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  exit;
}

// Try to upload file
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
  echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
  echo "Sorry, there was an error uploading your file.";
}
?>

The above code checks if a file with the same name already exists in the 'uploads' directory. If the file does not exist, it tries to upload the file.

4. Summary

In this tutorial, you learned how to create a form that allows users to upload files and how to handle those file uploads in PHP.

5. Practice Exercises

Exercise 1: Create a form that allows users to upload multiple files at once.
Exercise 2: Validate the uploaded file to only accept images (jpg, jpeg, png, and gif).
Exercise 3: Display an error message if the uploaded file exceeds a certain size.

Here are the solutions and explanations for the above exercises:

Solution 1: To allow multiple file uploads, add the 'multiple' attribute to the file input field and change the name attribute to an array (e.g., 'fileToUpload[]').
Solution 2: To only accept images, check the file extension of the uploaded file. Use the pathinfo() function in PHP to get the file extension and check if it is 'jpg', 'jpeg', 'png', or 'gif'.
Solution 3: To check the file size, use $_FILES["fileToUpload"]["size"] which gives the size of the uploaded file in bytes. If the size exceeds the limit, display an error message.

Keep practicing to get more comfortable with file uploads in HTML and PHP. Good luck!