Monday, November 18, 2019

PHP File and Image Upload: Step by Step

There are lots of images and videos all over the internet. A lot of applications these days demand that the user is able to manipulate and upload files to the server. Thankfully, PHP provides the functions to handle file uploads. There are two main ways to handle file uploads with PHP: The barebones way, which includes building an HTML form that allows users to submit files, and then creating a PHP file upload script to handle the files; and using Cloudinary’s solution.
This post shows you how to use either of these methods to handle PHP file uploads:
  • The Barebones PHP way- This includes building an HTML form that enables users to submit files, and then creating a PHP upload script to handle the files.
  • Using Cloudinary’s Cloud Service - Cloudinary is a media management service has support for uploading, manipulating and managing all kinds of media files, including images, videos and audio to emerging media types. Cloudinary also provides an API for fast upload directly from your users’ browsers or mobile apps. Check out Cloudinary’s documentation for more information on how to integrate it in your apps.

File Upload in PHP - The barebones way

Let’s quickly get started on how to handle file upload with PHP, the barebones way. We need:

1. The HTML Form

You need to build up an HTML form that will contain the fields that the user will interact with to upload a file. Create an index.html file in your root directory and add the following code to it:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload with PHP</title>
</head>
<body>
    <form action="fileUpload.php" method="post" enctype="multipart/form-data">
        Upload a File:
        <input type="file" name="myfile" id="fileToUpload">
        <input type="submit" name="submit" value="Upload File Now" >
    </form>
</body>
</html>
In the code above, we have a form with one input field and a submit button. The form tag has an action attribute that points to the script that will take care of the actual upload process. It also has a method attribute that specifies the kind of operation this form will undertake, which is a POST action.
The value of the enctype attribute is very important. It determines the content-type that the form submits. If we were not dealing with file uploads, then we would not specify the enctype attribute on the form in most cases.
Spin up your PHP server like so:
spin up the PHP server
You should see something similar to this come up on your web page:
Web page with upload options
Note: Different browsers, such as Safari, Edge, Firefox and Chrome might display the form in different ways.

2. File Upload in PHP Script

There are lots of things to consider when dealing with file uploads. I’ll highlight the common ones in form of questions.
  • In which directory will the files be stored?
  • Is the directory writable?
  • What type of files should the users be allowed to upload?
  • What types of browsers should support the upload?
  • What is the maximum file size that the server should allow?
  • Should the user be allowed to upload the same image more than once?
Create a file, fileUpload.php, in the root directory and add this code to it:
<?php
    $currentDir = getcwd();
    $uploadDirectory = "/uploads/";

    $errors = []; // Store all foreseen and unforseen errors here

    $fileExtensions = ['jpeg','jpg','png']; // Get all the file extensions

    $fileName = $_FILES['myfile']['name'];
    $fileSize = $_FILES['myfile']['size'];
    $fileTmpName  = $_FILES['myfile']['tmp_name'];
    $fileType = $_FILES['myfile']['type'];
    $fileExtension = strtolower(end(explode('.',$fileName)));

    $uploadPath = $currentDir . $uploadDirectory . basename($fileName); 

    if (isset($_POST['submit'])) {

        if (! in_array($fileExtension,$fileExtensions)) {
            $errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
        }

        if ($fileSize > 2000000) {
            $errors[] = "This file is more than 2MB. Sorry, it has to be less than or equal to 2MB";
        }

        if (empty($errors)) {
            $didUpload = move_uploaded_file($fileTmpName, $uploadPath);

            if ($didUpload) {
                echo "The file " . basename($fileName) . " has been uploaded";
            } else {
                echo "An error occurred somewhere. Try again or contact the admin";
            }
        } else {
            foreach ($errors as $error) {
                echo $error . "These are the errors" . "\n";
            }
        }
    }


?>
Look at the code above.
  • $fileName = $_FILES['myfile']['name']; This refers to the real name of the uploaded file.
  • $fileSize = $_FILES['myfile']['size']; This refers to the size of the file.
  • $fileTmpName = $_FILES['myfile']['tmp_name']; This is the temporary uploaded file that resides in the tmp/ directory of the web server.
  • $fileType = $_FILES['myfile']['type']; This refers to the type of the file. Is it a jpeg or png or mp3 file?
  • $fileExtension = strtolower(end(explode('.',$fileName))); This grabs the extension of the file.
  • $uploadPath = $currentDir . $uploadDirectory . basename($fileName); This is the path where the files will be stored on the server. We grabbed the current working directory.
In the code, we are checking to ensure that only jpeg and png files can be uploaded.
if (! in_array($fileExtension,$fileExtensions)) {
            $errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
        }
// Checks to ensure that only jpeg and png files can be uploaded.
We are also checking that only files less than or equal to 2MB can be uploaded.
if ($fileSize > 2000000) {
            $errors[] = "This file is larger than 2MB. It must be less than or equal to 2MB";
        }
// Checks to ensure the file is not more than 2MB
Note: Before you try out your code again, you need to ensure that there are some configurations in place.
  • Make sure the uploads/ directory is writable. Run this command: chmod 0755 uploads/ on your terminal to make the directory writable.
  • Open your php.ini file and ensure that these constants have correct values like:
    • max_file_uploads = 20
    • upload_max_size = 2M
    • post_max_size = 8M
Now, run the code again. Your file should upload successfully to the uploads directory.
Note: There are many checks you should consider when handling file uploads, including security precautions . You really don’t want someone uploading a virus to your web server. Do you? So by all means don’t use this exact code above in production. Add more valuable checks!
Also, it’s recommended that you upload your files to a dedicated file server, not just your web application server. Check out the source code for a tutorial.

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)