Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Traditional way of uploading files
$('#uploadBtn').change(function () {
var file = this.files[0];
if (typeof file === "undefined") {
// some validations goes here using `file.size` & `file.type`
var myFormData = new FormData();
myFormData.append('videoFile', this.files[0]); // `videoFile` is the file name expected at the backend
url: '/file/post',
type: 'POST',
processData: false,
contentType: false,
dataType: 'json',
data: myFormData,
xhr: function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Check if upload property exists
myXhr.upload.addEventListener('progress', handleProgressBar, false); // For handling the progress of the upload
return myXhr;
success: function(){
// Upload has been completed
function handleProgressBar(e) {
if (e.lengthComputable) {
// reflect values on your progress bar using `` & `e.loaded`
class FileController {
public function postAction() {
// Disable views/layout the way suites your framework
if (!isset($_FILES['imageFile'])) {
// Throw an exception or handle it your way
// Nginx already did all the work for us, & received the file in the `/tmp` folder
$uploadedFile = $_FILES['imageFile'];
$OriginalFileName = $uploadedFile['name'];
$size = $uploadedFile['size'];
$completeFilePath = $uploadedFile['tmp_name'];
// Do some validations on file's type & file's size (using `$size` & `filesize($filePath)`
// & if all is fine, then start processing your file here, & probably return a success message
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.