All geek questions in one place

Download angular file

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 to select a file on the client side: https://github.com/shuyu/angular-material-fileinput .

How can I access my download file to send it to the server?

+4
source share
2 answers

I would recommend using Ng-File-upload Will do the trick, you can do something like this, there is still documentation on the site as a violin 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));
        });
    }   
  }
}]);
0
source

Hi, sorry, I did not illustrate the input lf-ng-md-file explicitly.

angular , ajax.

, - "lf-files", , .

"lf-files" , lfFileName ( ), lfFile ( ) lfDataUrl ( ) .

"lf " $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);
    });
});

, , , , , .

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

    ...

});

node.js(express + formidable) , "Formidable" - node , "Multer".

:

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();
    form.uploadDir = __dirname +'/public/uploads';
    //file upload path
    form.parse(req, function(err, fields, files) {
        //you can get fields here
    });
    form.on ('fileBegin', function(name, file){
        file.path = form.uploadDir + "/" + file.name;
        //modify file path
    });
    form.on ('end', function(){
        res.sendStatus(200);
        //when finish all process    
    });
});

...

, .

0

Source: https://habr.com/ru/post/1627808/

More articles:


All Articles