How to upload large file in express with progress bar?

It can be done with the xhr.upload progress event. It is supported from html5.

For example:https://github.com/zeMirco/express-upload-progress

In php the upload information can be attached to the session, so it works with html4, maybe there is a nodejs extension for that too, I'll google it.

According to this:How to do upload with express in node.jsthere is a progress event in express by file upload, so you can set a variable in the session with the actual progress data, and read it with ajax from client side.

node.js upload express progress-bar

Here is the jsfiddle using angular js and ng-file-upload directive.

The jsfiddle works for images and files but to upload the videos you will have change the POST url to your server.

//inject angular file upload directives and services.var app = angular.module('fileUpload', ['ngFileUpload']);app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function($scope, Upload, $timeout) {  $scope.uploadFiles = function(file, errFiles) {    $scope.f = file;    $scope.errFile = errFiles && errFiles[0];    if (file) {      file.upload = Upload.upload({        url: 'https://angular-file-upload-cors-srv.appspot.com/upload',        data: {          file: file        }      });      file.upload.then(function(response) {        $timeout(function() {          file.result = response.data;        });      }, function(response) {        if (response.status > 0)          $scope.errorMsg = response.status + ': ' + response.data;      }, function(evt) {        file.progress = Math.min(100, parseInt(100.0 *          evt.loaded / evt.total));      });    }  }}]);

.thumb {  width: 24px;  height: 24px;  float: none;  position: relative;  top: 7px;}form .progress {  line-height: 15px;}.progress {  display: inline-block;  width: 100px;  border: 3px groove #CCC;}.progress div {  font-size: smaller;  background: orange;  width: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script><script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script><body ng-app="fileUpload" ng-controller="MyCtrl">  <h4>Upload on file select</h4>  <button type="file" ngf-select="uploadFiles($file, $invalidFiles)"  ngf-max-height="1000" ngf-max-size="100MB">    Select File</button>  <br>  <br> File:  <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}    <span class="progress" ng-show="f.progress >= 0">          <div style="width:{{f.progress}}%"                 ng-bind="f.progress + '%'"></div>      </span>  </div>  {{errorMsg}}</body>

Expand snippet