3 Ways to Upload Large Files in PHP – Settings, Chunking, Resumable

Welcome to a tutorial on how to upload large files in PHP. Once upon a time in the Stone Age of the Internet, uploads were manageable without large files. But these days, we have to deal with all kinds of insanely oversized files, and the “traditional” upload mechanism just can’t handle it.

In order to deal with the large file uploads in PHP, there are a few alternatives:

  • Change the upload_max_filesize limit in php.ini.
  • Implement file chunk upload. Split the upload into smaller pieces, and assemble them when the upload is complete.
  • Implement resumable uploads.

But just how do we implement each of the methods? Read on to find out!

ⓘ I have included a zip file with all the example code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes PHP Settings Chunk Upload
Resumable Upload Useful Bits & Links The End

 

DOWNLOAD & NOTES

First, here is the download link to the example code as promised.

 

QUICK NOTES

  • There are 3 sets of examples in the zip file.
    • 1- Basic PHP setting tweak.
    • 2- Chunk upload.
    • 3- Resumable upload.
  • For the resumable upload, install Composer and use it to get the PHP server-side library first – composer require flowjs/flow-php-server.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example code in a zip file – I have released it under the MIT License, so feel free to build on top of it if you want to.

 

 

METHOD 1) TWEAK PHP SETTINGS

All right, let us start with the easiest way – This is for you guys who are still dealing with somewhat manageable uploads, just change the maximum allowed file size in PHP.

 

1A) UPDATE PHP.INI

php.ini
upload_max_filesize = 150M
post_max_size = 150M
max_input_time = 300
max_execution_time = 300

There are 4 settings to look out for when it comes to allowing large file uploads:

  • upload_max_filesize – The maximum allowed upload file size.
  • post_max_size – The maximum allowed POST data size.
  • max_input_time – Maximum allowed input time.
  • max_execution_time – Maximum allowed time the scripts are allowed to run.

But of course, I will not recommend changing the php.ini file directly. This will affect the entire server and all your other websites as well.

 

1B) UPDATING THE HTACCESS FILE

.htaccess
php_value upload_max_filesize 150M
php_value post_max_size 150M
php_value max_input_time 300
php_value max_execution_time 300

If you don’t have access to php.ini, or just want to apply the settings for a single site – It is also possible to change the settings by creating a .htaccess file. IIS and NGINX users, it is also possible to achieve this, but you need to do some of your own research.

 

1C) UPLOAD!

1c-upload.php
<!-- (A) HTML UPLOAD FORM -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="up" required/>
  <input type="submit" value="Go"/>
</form>
 
<?php
// (B) HANDLE FILE UPLOAD
if (isset($_FILES["up"])) {
  $source = $_FILES["fileup"]["tmp_name"];
  $destination = $_FILES["fileup"]["name"];
  move_uploaded_file($source, $destination);
  echo "OK";
}
?>

Well, this is just a regular upload form. For those who may have missed out on basic file upload.

 

 

1D) INI SET?

For you guys who are thinking of using ini_set() to change the upload size – Take note that according to the official core php.ini directives, upload_max_filesize is only changeable in PHP_INI_PERDIR. Meaning, it can only be tweaked in the php.ini or .htaccess file; ini_set("upload_max_filesize", "150M") will not work.

 

METHOD 2) CHUNK UPLOAD

This second method is called “chunking” – Splitting a large file and uploading them in smaller chunks. While it may sound difficult, there is thankfully an open-source library called Plupload that we can use.

 

2A) HTML & JAVASCRIPT

2a-chunk.html
<!-- (A) UPLOAD BUTTON & FILE LIST -->
<input type="button" id="pickfiles" value="Upload"/>
<div id="filelist"></div>
 
<!-- (B) LOAD PLUPLOAD FROM CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/plupload/3.1.3/plupload.full.min.js"></script>
<script>
// (C) INITIALIZE UPLOADER
window.addEventListener("load", () => {
  // (C1) GET HTML FILE LIST
  var filelist = document.getElementById("filelist");
 
  // (C2) INIT PLUPLOAD
  var uploader = new plupload.Uploader({
    runtimes: "html5",
    browse_button: "pickfiles",
    url: "2b-chunk.php",
    chunk_size: "10mb",
    filters: {
      max_file_size: "150mb",
      mime_types: [{title: "Image files", extensions: "jpg,gif,png"}]
    },
    init: {
      PostInit: () => { filelist.innerHTML = "<div>Ready</div>"; },
      FilesAdded: (up, files) => {
        plupload.each(files, (file) => {
          let row = document.createElement("div");
          row.id = file.id;
          row.innerHTML = `${file.name} (${plupload.formatSize(file.size)}) <strong></strong>`;
          filelist.appendChild(row);
        });
        uploader.start();
      },
      UploadProgress: (up, file) => {
        document.querySelector(`#${file.id} strong`).innerHTML = `${file.percent}%`;
      },
      Error: (up, err) => { console.error(err); }
    }
  });
  uploader.init();
});
</script>

Yikes! This looks like a handful, but it is pretty much a modified version of the “default Plupload” demo script.

  1. There are only 2 HTML elements here.
    • <input id="pickfiles"> Click to pick files for upload.
    • <div id="filelist"> Upload file list and progress.
  2. Captain Obvious. Load Plupload from the CDN.
  3. Initiate Plupload on page load. Not going to explain line by line, but this basically starts the upload immediately after choosing a file.

That is the gist of it, read the official documentation (links in the extra section below) if you need more customizations.

 

 

2B) SERVER-SIDE UPLOAD HANDLER

2b-chunk.php
<?php
// (A) HELPER FUNCTION - SERVER RESPONSE
function verbose ($ok=1, $info="") {
  if ($ok==0) { http_response_code(400); }
  exit(json_encode(["ok"=>$ok, "info"=>$info]));
}

// (B) INVALID UPLOAD
if (empty($_FILES) || $_FILES["file"]["error"]) {
  verbose(0, "Failed to move uploaded file.");
}

// (C) UPLOAD DESTINATION - CHANGE FOLDER IF REQUIRED!
$filePath = __DIR__ . DIRECTORY_SEPARATOR . "uploads";
if (!file_exists($filePath)) { if (!mkdir($filePath, 0777, true)) {
  verbose(0, "Failed to create $filePath");
}}
$fileName = isset($_REQUEST["name"]) ? $_REQUEST["name"] : $_FILES["file"]["name"];
$filePath = $filePath . DIRECTORY_SEPARATOR . $fileName;

// (D) DEAL WITH CHUNKS
$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;
$out = @fopen("{$filePath}.part", $chunk == 0 ? "wb" : "ab");
if ($out) {
  $in = @fopen($_FILES["file"]["tmp_name"], "rb");
  if ($in) { while ($buff = fread($in, 4096)) { fwrite($out, $buff); } }
  else { verbose(0, "Failed to open input stream"); }
  @fclose($in);
  @fclose($out);
  @unlink($_FILES["file"]["tmp_name"]);
} else { verbose(0, "Failed to open output stream"); }

// (E) CHECK IF FILE HAS BEEN UPLOADED
if (!$chunks || $chunk == $chunks - 1) { rename("{$filePath}.part", $filePath); }
verbose(1, "Upload OK");

That’s right, this is not your basic PHP upload script. A quick summary:

  • It creates an empty .part file on the first chunk.
  • Then appends more chunks into the .part file as they are being uploaded.
  • When all the chunks are assembled, the .part file is renamed back to what it is supposed to be.

Done! You now have a system that is capable of handling large file uploads.

 

2C) PLUPLOAD LINKS

Plupload is already loaded off the CDN in this example, here are a couple more links if you need:

 

 

METHOD 3) RESUMABLE UPLOAD

You should be familiar with this last method – Resumable uploads. Yep, there are open source plugins that we can use, and this one is called FlowJS and FlowPHP.

 

3A) HTML & JAVASCRIPT

3a-resumable.html
<!-- (A) UPLOAD BUTTON & LIST -->
<input type="button" id="upbrowse" value="Browse"/>
<input type="button" id="upToggle" value="Pause OR Continue"/>
<div id="uplist"></div>
 
<!-- (B) LOAD FLOWJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flow.js/2.14.1/flow.min.js"></script>
<script>
// (C) INIT FLOWJS
window.addEventListener("load", () => {
  // (C1) NEW FLOW OBJECT
  var flow = new Flow({
    target: "3c-resumable.php",
    chunkSize: 1024*1024, // 1MB
    singleFile: true
  });
 
  if (flow.support) {
    // (C2) ASSIGN BROWSE BUTTON
    flow.assignBrowse(document.getElementById("upbrowse"));
    // OR DEFINE DROP ZONE
    // flow.assignDrop(document.getElementById("updrop"));
 
    // (C3) ON FILE ADDED
    flow.on("fileAdded", (file, evt) => {
      let fileslot = document.createElement("div");
      fileslot.id = file.uniqueIdentifier;
      fileslot.innerHTML = `${file.name} (${file.size}) - <strong>0%</strong>`;
      document.getElementById("uplist").appendChild(fileslot);
    });

    // (C4) ON FILE SUBMITTED (ADDED TO UPLOAD QUEUE)
    flow.on("filesSubmitted", (arr, evt) => { flow.upload(); });
 
    // (C5) ON UPLOAD PROGRESS
    flow.on("fileProgress", (file, chunk) => {
      let progress = (chunk.offset + 1) / file.chunks.length * 100;
      progress = progress.toFixed(2) + "%";
      let fileslot = document.getElementById(file.uniqueIdentifier);
      fileslot = fileslot.getElementsByTagName("strong")[0];
      fileslot.innerHTML = progress;
    });
 
    // (C6) ON UPLOAD SUCCESS
    flow.on("fileSuccess", (file, message, chunk) => {
      let fileslot = document.getElementById(file.uniqueIdentifier);
      fileslot = fileslot.getElementsByTagName("strong")[0];
      fileslot.innerHTML = "DONE";
    });
 
    // (C7) ON UPLOAD ERROR
    flow.on("fileError", (file, message) => {
      let fileslot = document.getElementById(file.uniqueIdentifier);
      fileslot = fileslot.getElementsByTagName("strong")[0];
      fileslot.innerHTML = "ERROR";
    });
 
    // (C8) PAUSE/CONTINUE UPLOAD
    document.getElementById("upToggle").onclick = () => {
      if (flow.isUploading()) { flow.pause(); }
      else { flow.resume(); }
    };
  }
});
</script>

This is yet another handful, but let’s take a quick walkthrough:

  1. The HTML only has 3 elements.
    • <input id="upbrowse"/> Upload button.
    • <input id="upToggle"/> Pause/resume button.
    • <div id="uplist"> Upload file list.
  2. Load the FlowJS library.
  3. Initiate FlowJS, not going to run through line-by-line again. But just like Plupload, this starts uploading once a file is selected. Read their documentation if you want the full list of settings and events. Links below.

 

 

3B) DOWNLOAD FLOW PHP SERVER

Next, we will build the server-side. Don’t need to fret, FlowJS has a PHP library as well.

  • Download and install Composer if you have not done so.
  • Open the command line, navigate to your project folder.
  • Run composer require flowjs/flow-php-server.

That’s all. Composer will fetch the latest version into the vendor/ folder.

 

3C) FLOW PHP UPLOAD HANDLER

3c-resumable.php
<?php
// (A) INIT PHP FLOW
require __DIR__ . DIRECTORY_SEPARATOR . "vendor" . DIRECTORY_SEPARATOR . "autoload.php";
$config = new \Flow\Config();
$config->setTempDir(__DIR__ . DIRECTORY_SEPARATOR . "temp");
$request = new \Flow\Request();

// (B) HANDLE UPLOAD
$uploadFolder = __DIR__ . DIRECTORY_SEPARATOR . "uploads" . DIRECTORY_SEPARATOR;
$uploadFileName = uniqid() . "_" . $request->getFileName(); 
$uploadPath = $uploadFolder . $uploadFileName;
if (\Flow\Basic::save($uploadPath, $config, $request)) {
  // File saved successfully
} else {
  // Not final chunk or invalid request. Continue to upload.
}

Yep, this is just a small modified version of the official demo. Probably shouldn’t use this as-it-is, but a good start nonetheless.

 

3D) FLOW JS AND PHP LINKS

 

USEFUL BITS & LINKS

That’s it for all the upload methods, and here is a section of small extras and links that may be useful to you.

 

FILE TYPE RESTRICTIONS

All the above examples now accept all kinds of files and extensions. If you want to restrict the file types, I will highly recommend doing a simple server-side check instead.

<?php
$ext = strtoupper(pathinfo($FILE, PATHINFO_EXTENSION));

// LET'S SAY, WE ALLOW ONLY XLS, XLSX
if ($ext!="XLS" || $ext!="XLSX") { exit("INVALID FILE TYPE"); }

 

LINKS & REFERENCES

 

YOUTUBE TUTORIAL

 

WHAT NEXT?

Thank you for reading, and we have come to the end of this short tutorial. I hope that it has helped to solve your big upload woes. If you have stuff you like to add to this guide, please feel free to comment below. Good luck and happy coding!

9 thoughts on “3 Ways to Upload Large Files in PHP – Settings, Chunking, Resumable”

  1. Thanks for the Tutorial, brilliant.
    I used the 2nd option (chunks) on my phone, which works wonderfully when I upload files already saved, but when I try to upload a Picture or Video I have just taken on my phone the upload doesn’t start.
    Any ideas?

  2. In the form I created, I choose a folder using input type = “file”. Of course, there are many subfolders and files in the folder. Do you have any idea how I can do this with the 2nd alternative? thank you…

  3. Thank you for this great tutorial its very well written and helped me a lot.
    For file type restrictions. For Method 3 I added the below code into the fileAdded function which stops the file from being uploaded if its not in this case a txt file. Hope this helps someone 🙂

    One thing I noticed in your code, is that uploading a large file that takes minutes to upload, it jumps backwards and forwards on the total uploaded, so for e.g. it will say 100% and then drop back to 96%, its not quite right but I’m not sure what needs to be changed to fix it!

    All the best

    // (C) ON FILE ADDED
    flow.on('fileAdded', function(file, event){
      var check_file = (file.name);
      if (check_file.toLowerCase().endsWith(".txt")) {
        let fileslot = document.createElement("div");
        fileslot.id = file.uniqueIdentifier;
        fileslot.innerHTML = `${file.name} (${file.size}) - 0%`;
        document.getElementById("uplist").appendChild(fileslot);
      } else {
        return false;
      }
    });
    
    1. let progress = (chunk.offset + 1) / file.chunks.length * 100; does the percentage calculation. I have a hunch that parallel upload (multiple chunks upload at a time) is causing the chunk.offset to jump around.

  4. Thank you for this tutorial. But how can I retrieve the output of the responce function (verbose)? In your example the file ‘2b-upload.php’ returns a json object if the upload was successfull. In first step, I just want to show the response via console.log or javascript alert.

Leave a Comment

Your email address will not be published.