CODEWITHSUNDEEP
angularjscallbackjquery-file-upload
yark.smolk
yark.smolk

Reputation: 21

Jquery file upload angular version - multiple file upload on the same page

Cheers,

here is a good example how to use jquery-file-upload plugin with angularjs how to use jquery file upload angular version?

BUT! What if on the same page we need few widgets? 

<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <!-- ... -->
</form>
<form class="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <!-- ... -->
</form>

This example works good, except:

  1. Callbacks. Using $scope.$on() is not quite right. How to specify specific callbacks for each widget?

  2. Drag-n-Drop. Seems like drag-n-drop area is also shared between two widgets, so when I drop the file at any place on the page both events triggered. So again, how to specify drop areas for each one?

My though is that jquery-file-upload can cover all this requirements itself and its all about poor jQuery File Upload AngularJS Plugin

Upvotes: 2

Views: 4302

Answers (2)

b-f-u
b-f-u

Reputation: 11

I had simmilar problems and was not able to find ANY exaple how to use more input fields at once, so I toyed with and after some quite loooong time experimenting with it, i finaly found a really easy solution:

  • you just need separate controller for each of the input fields and in (for) each of those you need to specify its drop zone... for example like this:

    < form ng-controller="MyVideoUploadController">< div id="videoFilesInputZone" >< /div >< /form >

    < form ng-controller="MyAudioUploadController">< div id="audioFilesInputZone" >< /div >< /form >

    .controller('MyVideoUploadController', [
'$scope', '$http', '$filter', '$window',
function ($scope) {
    $scope.options = {
        dropZone: $("#videoFilesInputZone")
    };
    $scope.loadingFiles = true;
}]).controller('MyAudioUploadController', [
'$scope', '$http', '$filter', '$window',
function ($scope) {
    $scope.options = {
        dropZone: $("#audioFilesInputZone")
    };
    $scope.loadingFiles = true;
}

    ])

and thats all you need. Only drawback is that you can not drop the files just anywhere, but must drop them exactly over the selected elements...

Upvotes: 1

danial
danial

Reputation: 4098

Not sure how to fix this but angular-file-upload directive might save you the hassle. It is lightweight and simple to use and it supports non-HTML5 browsers with FileAPI flash shim. It also supports drag&drop and upload progress.

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)" multiple>
  <div class="drop-box" ng-file-drop="onFileSelect($files);" ng-show="ddSupported">drop files here</div>
  <div ng-file-drop-available="dropSupported=true" ng-show="!ddSupported">HTML5 Drop File is not suported></div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $upload.upload({
        url: 'my/upload/url',
        file: $file,
        progress: function(e){}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

Upvotes: 3

Related Questions