0

I want to upload a file in angular. I have tried following :

<div >
<form  enctype="multipart/form-data" method="post" novalidate name="form">          
                    <input type="file"  onchange="angular.element(this).scope().setFile(this)" required>                
                    {{files.name}}                  
    <div >
        <button type="button" ng-class="{'tbt-btn':true, 'primary-btn':true}" ng-click="uploadFile(form,files)">Save</button>           
    </div>
</form>
</div>

JS---

 $scope.uploadFile = function (form,files) {
     if (form.$invalid) return;
     var path = files;        

    var uploadProgress = function (e) {
        if (e.lengthComputable) {
          var percent = Math.round(e.loaded * 100 / e.total);
          console.log('upload progress: ' + percent + '%');
        }
      },
      uploadComplete = function (e) {
        if (e.target.status !== 200) {
          uploadError(e);
          return;
        }
        var locations = JSON.parse(e.target.responseText);
        //function I want to call
      },
      uploadError = function (e) {

      },
      uploadAbort = function (e) {

      };

    var fd = new FormData();
    var files = files;
    for (var i = 0; i < files.length; i++) {
      fd.append("file", files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadError, false);
    xhr.addEventListener("abort", uploadAbort, false);        
    xhr.open("POST", "/fileupload");        
    xhr.send(fd);

}

but its not working .I am getting error - "Missing initial multi part boundary" Also , I am not sure what parameters I need to pass in xhr.open();. Can you please help me on this?

Thanks

  • open() method is fine, althought you can add it more parameters if you need them https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#open() – Drumnbass May 14 '15 at 12:28
  • if fileupload a folder? – Drumnbass May 14 '15 at 12:32
  • yes it is.. what is the significance of URL in open method ? –  May 15 '15 at 05:21
  • well, always that I have used the XHR object I've filled the URL with a servlet name, or just the URL of my localhost, but I've necer used a folder. Anyway, there are a lot of questions about this on internet. If don't find anything (would be weird), let me know. – Drumnbass May 15 '15 at 05:28
  • ok.. I tried it using localhost url and previous error is gone. But there comes a new error - Uncaught SyntaxError: Unexpected token –  May 15 '15 at 05:47
  • What did you use as localhost URL? Edit your question and update it with that line at the end. – Drumnbass May 15 '15 at 06:21
  • Btw, did you know that there actually is a AngularJS library to upload files? http://ngmodules.org/modules/angular-file-upload – Drumnbass May 15 '15 at 06:25
  • Check this post out too http://stackoverflow.com/questions/18571001/file-upload-using-angularjs – Drumnbass May 15 '15 at 06:32

1 Answers1

0

You can use this simple control to upload your file:

HTML:

  <input type="file" data-ng-model="fileName" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)"
                                   name="file">

CONTROLLER:

   $scope.uploadFile = function (files) {
                var fd = new FormData();
                fd.append("file", files[0]);
                 "your api with (fd)".then(function (response) {
                    if (files && files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e:any) {
                            $('#blah').attr('src', e.target.result).width(190).height(200);
                        };
                        reader.readAsDataURL(files[0]);
                    }
                     $scope.imageName = response;

                })
            };
forgottofly
  • 2,729
  • 11
  • 51
  • 93