2

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

2 Answers 2

3

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

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.