Bob February 2016

Upload file angular

I have a simple form

<div ng-controller='MyCtrl'>
 <form ng-submit='submit()'>
    <input name="name" value="name">
    <lf-ng-md-file-input lf-files='files'> </lf-ng-md-file-input>
    <button type='submit'> Submit
 </form>
</div>

I use this html element for choosing file on client side: https://github.com/shuyu/angular-material-fileinput.

How can I access to my upload file to send it on server?

Answers


johnny 5 February 2016

I'd recommend using Ng-File-upload Will do the trick you can do something like this, there is more documentation on the site as well as the fiddle for different examples

<body ng-app="fileUpload" ng-controller="MyCtrl">
 <h4>Upload on file select</h4>
  <button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
      accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
  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>

Controller:

//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));
        });
    }   
  }
}]);


shuyu March 2016

Hi ~ sorry i not illustrate the lf-ng-md-file-input clearly.

This angular directive is focus on make material look and upload file base on ajax.

So the most important thing is you need fetch files yourself from "lf-files" data bind, not input element because it clear every time after resolve file.

The "lf-files" data is an array variable, object in array contain properties with lfFileName(file name) 、 lfFile(file object) and lfDataUrl(for preview) from resolve input file.

You can observe "lf-files" by using $watch.

html :

<lf-ng-md-file-input lf-files='files' multiple> </lf-ng-md-file-input>

javascript :

app.controller('MyCtrl',function($scope){
    $scope.$watch('files.length',function(newVal,oldVal){
        console.log($scope.files);
    });
});

So after you finish select files you need adjust data like below to fit your server side.

javascript :

app.controller('MyCtrl',function($scope){

    ...

    $scope.onSubmit = function(){
        var formData = new FormData();
        angular.forEach($scope.files,function(obj){
            formData.append('files[]', obj.lfFile);
        });
        $http.post('./upload', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(function(result){
            // do sometingh                   
        },function(err){
            // do sometingh
        });
    };

    ...

});

In my case i use node.js( express + formidable ) on server side, "Formidable" is a node module for parsing form data, there has other similar like "Multer".

Server :

var express = require('express');
var formidable = require('formidable');
var app = express();
app.use(express.static(__dirname + '/public'));

...

app.post('/upload',function(req,res){
    var form = new formidable.IncomingForm 

Post Status

Asked in February 2016
Viewed 2,625 times
Voted 11
Answered 2 times

Search




Leave an answer