AngularJS Uploading An Image With ng-upload

Question

I am trying to upload a file in AngularJS using ng-upload but I am running into issues  My html looks like this    lt div class  create-article  ng-controller  PostCreateCtrl  gt           lt form ng-upload method  post  enctype  multipart form-data  action   write   gt               lt fieldset gt                   lt label gt Category lt  label gt                   lt select name  category id  class    gt                       lt option value  0  gt Select A Category lt  option gt                       lt  php foreach  categories as  category     gt                           lt option value   lt     category - gt  category id    gt   gt  lt     category - gt  category name    gt  lt  option gt                       lt  php endforeach    gt                   lt  select gt                    lt label gt Title lt  label gt                   lt input type  text  class  title span5  name  post title                         placeholder  A catchy title here                            value   lt     post - gt  post title    gt     gt                    lt label gt Attach Image lt  label gt                   lt input type  file  name  post image    gt                     lt a href  javascript void 0    class  upload-submit  uploadPostImage contents  completed    gt Crop Image lt  a gt                    lt label gt Body lt  label gt                   lt div id  container  gt                   lt textarea id  mytextarea  wrap  off  name  post content  class  span7  placeholder  Content     gt  lt     post - gt  post content    gt  lt  textarea gt                   lt  div gt                   lt div style  clear both   gt  lt  div gt                   lt label gt Preview lt  label gt                   lt div id  textarea-preview  gt  lt  div gt                lt  fieldset gt               lt div class  span7  style  margin  0   gt                   lt input type  submit  class  btn btn-success  value  Create Post    gt               lt input type  submit  class  btn btn-warning pull-right draft  value  Save as Draft    gt               lt  div gt            lt  form gt       lt  div gt    And my js controller looks like this   ClabborApp controller  PostCreateCtrl      scope    PostModel   function  scope  PostModel          scope uploadPostImage   function contents  completed            console log completed           alert contents                 The problem I am facing is when the crop image is hit and it executes uploadPostImage  it uploads the entire form  Not desired behavior but I can make it work  The big problem is in the js the function uploadPostImage  contents  parameters is always undefined  even when the  completed  parameter comes back as true   The goal is to only upload an image for cropping  What am I doing wrong in this process

User · Answer

You can try ng-file-upload angularjs plugin (instead of ng-upload).

It's fairly easy to setup and deal with angularjs specifics. It also supports progress, cancel, drag and drop and is cross browser.

html

<!-- Note: MUST BE PLACED BEFORE angular.js-->
<script src="ng-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script>
<script src="ng-file-upload.min.js"></script> 

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directives and service.
angular.module('myApp', ['ngFileUpload']);

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];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        data: {myObj: $scope.myModelObj},
        file: file,
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).then(function(response) {
        var data = response.data;
        // file is uploaded successfully
        console.log(data);
      });
    }
  };
}];

User · Answer

In my case above mentioned methods work fine with php but when i try to upload files with these methods in node js then i have some problem  So instead of using  http              use the normal jquery ajax   For select file use this   lt input type  file  name  file  onchange  angular element this  scope   uploadFile this    gt    And in controller   scope uploadFile   function element       var data   new FormData    data append  file     element  0  files 0    jQuery ajax         url   brand upload         type  post         data  data        contentType  false        processData  false        success  function response          console log response                  error  function jqXHR  textStatus  errorMessage          alert  Error uploading      errorMessage

User · Answer

There s little-no documentation on angular for uploading files  A lot of solutions require custom directives other dependencies  jquery in primis    just to upload a file      After many tries I ve found this with just angularjs  tested on v 1 0 6   html   lt input type  file  name  file  onchange  angular element this  scope   uploadFile this files    gt    Angularjs  1 0 6  not support ng-model on  input-file  tags so you have to do it in a  native-way  that pass the all  eventually  selected files from the user   controller   scope uploadFile   function files        var fd   new FormData          Take the first selected file     fd append  file   files 0          http post uploadUrl  fd            withCredentials  true          headers    Content-Type   undefined            transformRequest  angular identity        success     all right       error    damn              The cool part is the undefined content-type and the transformRequest  angular identity that give at the  http the ability to choose the right  content-type  and  manage the boundary needed when handling multipart data

User · Answer

var app   angular module  plunkr           app controller  UploadController   function  scope  fileReader             scope imageSrc                 scope  on  fileProgress   function e  progress             scope progress   progress loaded   progress total                              app directive  ngFileSelect   function fileReader   timeout            return           scope                ngModel                         link  function  scope  el                function getFile file                fileReader readAsDataUrl file   scope                   then function result                     timeout function                          scope ngModel   result                                                                     el bind  change   function e                var file    e srcElement    e target  files 0               getFile file                                                     app factory  fileReader   function  q   log        var onLoad   function reader  deferred  scope            return function             scope  apply function                 deferred resolve reader result                                      var onError   function reader  deferred  scope            return function             scope  apply function                 deferred reject reader result                                      var onProgress   function reader  scope            return function event            scope  broadcast  fileProgress                 total  event total              loaded  event loaded                                    var getReader   function deferred  scope            var reader   new FileReader            reader onload   onLoad reader  deferred  scope           reader onerror   onError reader  deferred  scope           reader onprogress   onProgress reader  scope           return reader              var readAsDataURL   function file  scope            var deferred    q defer             var reader   getReader deferred  scope           reader readAsDataURL file            return deferred promise              return           readAsDataUrl  readAsDataURL                                       CSS                       img width 200px  height 200px                       HTML                        lt div ng-app  app  gt       lt div ng-controller  UploadController   gt           lt form gt           lt input type  file  ng-file-select  onFileSelect  files   ng-model  imageSrc  gt                   lt input type  file  ng-file-select  onFileSelect  files   ng-model  imageSrc2  gt           lt  --   lt input type  file  ng-file-select  onFileSelect  files   multiple gt  -- gt           lt  form gt            lt img ng-src    imageSrc      gt       lt img ng-src    imageSrc2      gt        lt  div gt       lt  div gt

[javascript] AngularJS Uploading An Image With ng-upload

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-http

Examples related to angularjs-fileupload