Angular Js File Upload

Question

i am new to angular js. i want to upload file using this. i used following link

http://jsfiddle.net/jasonals/WEvwz/27/? upload.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script src="http://blueimp.github.com/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<div ng-controller='TestCtrl'>
  <div>
      <input id="fileupload" type="file" name="files[]" data-url="/" multiple>
      <ul>
          <li ng-repeat="file in fileList">
              {{file.name}}
          </li>
      </ul>
  </div>

  <button ng-click='addButtonClicked()'>Add File</button>
</div>

controlller file.
$(document).ready(function(){
    $('#fileupload').fileupload({
        dataType: 'json'});
});

TestCtrl = function($scope){
    $scope.fileList = [];
    $('#fileupload').bind('fileuploadadd', function(e, data){
        // Add the files to the list
        numFiles = $scope.fileList.length
        for (var i=0; i < data.files.length; ++i) {
            var file = data.files[i];
        // .$apply to update angular when something else makes changes
        $scope.$apply(
            $scope.fileList.push({name: file.name})
            );
        }
        // Begin upload immediately
        data.submit();
    });
    $scope.addButtonClicked = function(){
        var numFiles = $scope.fileList.length;
        $scope.fileList.push({name: ('fileName' + numFiles)});
    }
}

but i am unable to post the url using this.

aaronfay · Accepted Answer · 2013-12-05 07:35:33Z

I can't answer your question directly, except to say: make sure you have the data-url set on your input from the example on JSFiddle.

As an alternative, I would recommend angular-file-upload which I've used with success. It uses angular directives to accomplish the uploading. This pattern uses a little more code, but separates the concerns in your application so you Controller just glues things together, and your service actually talks to the outside world.

This will make your app easier to test:

<div ng-controller="FileUploadController">
  <h3>Upload a file</h3>
  <input type="file" ng-file-select="uploadFile($files)" />
</div>

And the javascript:

// define the app, include the file upload dependency
var app = angular.module('MyApp', ['ng', 'angularFileUpload']);

// controller to handle the file upload event
app.controller('FileUploadController', 
  function ($scope, $rootScope, FileUploadService) {
    var service = FileUploadService;
    /** 
     *  Handler to upload a new file to the server.
     */
    $scope.uploadFile = function ($files) {
      var $file = $files[0];
      service.uploadFile($file, function (error) {
        if (error) {
          alert('There was a problem uploading the file.');
        }
        // handle successfully-uploaded file
      })
    }
  });

// services should interact with the outside world
app.factory('FileUploadService', function ($http) {
  var api = {
    uploadFile: function (file, callback) {
      $http.uploadFile({
        url: '/some/remote/end/point/',
        file: file
      }).progress(function(event) {
        console.log('percent: ' + parseInt(100.0 * event.loaded / event.total));
      }).error(function (data, status, headers, config) {
        console.error('Error uploading file')
        callback(status);
      }).then(function(data, status, headers, config) {
        callback(null);
      });
    }
  }
  return api;
});

thanks . here is what i actually want. really it's working proper. thanks for help.

Mayank Gour · Accepted Answer · 2013-12-05 07:21:53Z

0

try this one...

$(document).ready(function(){
    $('#fileupload').fileupload({
        dataType: 'json'});
});

TestCtrl = function($scope){
    $scope.fileList = [];
    $('#fileupload').bind('fileuploadadd', function(e, data){
            $scope.$apply(
            $scope.fileList.push({name: file.name})
            );   
        data.submit();
    });

}

answered Dec 5, 2013 at 7:21

Mayank Gour

1361 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular Js File Upload

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related