Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
Plain PHP Resumable Large File Uploads In Chunks Using FlowJs
05th February 2021
3 mins read
Share On
In this article let's see how we can upload large files in chunks using FlowJs.
Code available at GitHub Php FlowJs Resumable File Upload
FlowJs Package Installation
Use the following composer command to install Flow PHP Server to handle the uploaded file.
composer require flowjs/flow-php-server
HTML File With Client Side FlowJS Configuration
HTML Page
Resumable File Uploads With PHP FlowJs
Project Folder Structure
Project Folder Structure
index.html
<!DOCTYPE html>
<html>
<head>
<title>StackCoder - Resumable Upload Demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 text-center">
<h3 class="text-primary">Resumable File Uploads With<br/>PHP & FlowJs</h1>
<br><br>
<p>
<!-- Upload button -->
<button type="button" id="upbrowse" class="btn btn-primary"><span class="glyphicon glyphicon-upload"></span> Browse Files</button>
<button type="button" id="upToggle" class="btn btn-default"><span class="glyphicon glyphicon-play"></span> Pause OR Continue</button>
<!-- Upload file listing -->
<div id="uplist"></div>
</p>
</div>
</div>
</div>
<!-- Check https://cdnjs.com/libraries/flow.js for latest version -->
<!-- GitHub Link https://github.com/flowjs/flow.js/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flow.js/2.14.1/flow.min.js"></script>
<script>
window.addEventListener("load", function () {
/* Setup new flow object and server php file here */
var flow = new Flow({
target: 'resumable.php',
chunkSize: 1024 * 1024, /** Whole file is broken in chunks of 1MB */
singleFile: true
});
if (flow.support) {
/* Browse button */
flow.assignBrowse(document.getElementById('upbrowse'));
/* Incase if you want to support Drop zone box then uncomment the following */
// flow.assignDrop(document.getElementById('updrop'));
/* Action to perform when the file is added */
flow.on('fileAdded', function (file, event) {
let fileslot = document.createElement("div");
fileslot.id = file.uniqueIdentifier;
fileslot.innerHTML = `${file.name} (${file.size}) - <strong>0%</strong>`;
document.getElementById("uplist").appendChild(fileslot);
});
/** Any action soon as the file is submitted */
flow.on('filesSubmitted', function (array, event) {
// console.log(array, event);
flow.upload();
});
/** Action to perform while the file is being uploaded ie in progress state */
flow.on('fileProgress', function (file, chunk) {
// console.log(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;
});
/** When the uploading on the file is completed */
flow.on('fileSuccess', function (file, message, chunk) {
// console.log(file, message, chunk);
let fileslot = document.getElementById(file.uniqueIdentifier);
fileslot = fileslot.getElementsByTagName("strong")[0];
fileslot.innerHTML = "DONE";
});
/** Action to perform when an error occurs during file upload */
flow.on('fileError', function (file, message) {
console.log(file, message);
let fileslot = document.getElementById(file.uniqueIdentifier);
fileslot = fileslot.getElementsByTagName("strong")[0];
fileslot.innerHTML = "ERROR";
});
/** Pause or Unpause the upload process */
document.getElementById("upToggle").addEventListener("click", function () {
if (flow.isUploading()) { flow.pause(); }
else { flow.resume(); }
});
}
});
</script>
</body>
</html>
resumable.php
<?php
/** Add autoload php file so that the classes are autoloaded automatically using PSR standard */
require "./vendor/autoload.php";
$config = new \Flow\Config();
/** Set the temporary directory path for the file chunks */
$config->setTempDir("./temp");
$request = new \Flow\Request();
/** Once all the chunks are uploaded then move to the destination upload folder */
$uploadFolder = "./uploads/";
$uploadFileName = uniqid() . "_" . $request->getFileName();
$uploadPath = $uploadFolder . $uploadFileName;
if (\Flow\Basic::save($uploadPath, $config, $request)) {
/* File uploaded successfully, now you can save the data to database */
} else {
/* Not final chunk or invalid request. Continue to upload. */
}
Code available at GitHub Php FlowJs Resumable File Upload
Random Articles For You
Lazy Load Images In Chrome With This Simple Trick
Lazy Load YouTube And Other Videos In Website
Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench
Why And How To Use PHP PDO With CRUD Examples
Sass or SCSS @function vs @mixin
Setup MAMP Virtual Hosts For Local PHP Development
Route Model Binding In Laravel & Change Default Column id To Another Column
Composer Install v/s Composer Update
Redirect www to a non-www Website Or Vice Versa
Sass or SCSS @mixin vs @extends vs Placeholder (%)
Factories To Speed Up Test-Driven Development In Laravel
