File Upload using AngularJS

Question

Here is my HTML form    lt form name  myForm  ng-submit    gt       lt input ng-model  file  type  file   gt       lt input type  submit  value  Submit   gt   lt  form gt    I want to upload an image from local machine and want to read the content of the uploaded file  All this I want to do using AngularJS   When I try to print the value of  scope file it comes as undefined

User · Answer

I know this is a late entry but I have created a simple upload directive. Which you can get working in no time!

<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />

ng-simple-upload more on Github with an example using Web API.

User · Answer

The code will helps to insert file      lt body ng-app    myApp  gt   lt form ng-controller  insert Ctrl   method  post  action     name  myForm  enctype  multipart form-data  novalidate gt       lt div gt           lt p gt  lt input type  file  ng-model  myFile  class  form-control   onchange  angular element this  scope   uploadedFile this   gt               lt span style  color red  ng-show   myForm myFile  error required amp  amp myForm myFile  touched   gt Select Picture lt  span gt           lt  p gt       lt  div gt       lt div gt           lt input type  button  name  submit   ng-click  uploadFile    class  btn-primary  ng-disabled  myForm myFile  invalid  value  insert  gt       lt  div gt   lt  form gt   lt script src  http   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt    lt script src  insert js  gt  lt  script gt   lt  body gt    insert js  var app   angular module  myApp       app service  uploadFile      http    window   function   http  window        this uploadFiletoServer   function file uploadUrl           var fd   new FormData            fd append  file   file            http post uploadUrl  fd                transformRequest  angular identity              headers    Content-Type   undefined                      success function data               alert  insert successfull                 window location href         your window location                     error function                alert  Error                           app controller  insert Ctrl       scope    uploadFile   function  scope  uploadFile        scope uploadFile   function              scope myFile    scope files 0           var file    scope myFile          var url    save data php           uploadFile uploadFiletoServer file url               scope uploadedFile   function element            var reader   new FileReader            reader onload   function event                 scope  apply function  scope                     scope files   element files                   scope src   event target result                                     reader readAsDataURL element files 0                 save data php   lt  php     require  dbconnection php        ext   pathinfo   FILES  file    name   PATHINFO EXTENSION        image   time        ext      move uploaded file   FILES  file    tmp name    upload    image        query  insert into test table values   null    image         mysqli query  con  query     gt

User · Answer

in simple words  in Html -  add below code only        lt form name  upload  class  form  data-ng-submit  addFile    gt     lt input type  file  name  file  multiple   onchange  angular element this  scope   uploadedFile this     gt    lt button type  submit  gt Upload  lt  button gt   lt  form gt    in the controller -  This function is called when you click  upload file button   it will upload the file  you can console it    scope uploadedFile   function element     scope  apply function  scope       scope files   element files                   add more in controllers - below code add into the function   This function is called when you click on  button which is used   hitting the api  POST    it will send file which uploaded  and form-data to the backend     var url   httpURL     reporttojson          var files  scope files            for   var i   0  i  lt  files length  i                           var fd   new FormData                 angular forEach files function file                fd append  file  file                                 var data                  msg   message                sub   sub                sendMail  sendMail                selectUsersAcknowledge false                               fd append  data   JSON stringify data                   http post url  fd                   withCredentials   false                 headers                      Content-Type    undefined                                transformRequest   angular identity                 success function data                                   toastr success  Notification sent successfully      timeOut  2000                       scope removereport                       timeout function                         location reload                       1000                    error function data                               toastr success  Error in Sending Notification      timeOut  2000                   scope removereport                                in this case    i added below code as form data  var data              msg   message            sub   sub            sendMail  sendMail            selectUsersAcknowledge false

User · Answer

Working Example using Simple Directive  ng-file-model     directive  ngFileModel    function        return          scope              ngFileModel                     link  function   scope any  element  attributes              element bind  change   function  changeEvent any                  var reader   new FileReader                  reader onload   function  loadEvent                       scope  apply function                             scope ngFileModel                               lastModified  changeEvent target files 0  lastModified                            lastModifiedDate  changeEvent target files 0  lastModifiedDate                            name  changeEvent target files 0  name                            size  changeEvent target files 0  size                            type  changeEvent target files 0  type                            data  changeEvent target files 0                                                                               reader readAsDataURL changeEvent target files 0                                    and use FormData to upload file in your function   var formData   new FormData     formData append  document    scope ngFileModel data   formData append  user id    scope userId    all credits go for  https   github com mistralworks ng-file-model  I have faced a small probelm you can check it here  https   github com mistralworks ng-file-model issues 7  Finally here s a forked repo  https   github com okasha93 ng-file-model blob patch-1 ng-file-model js

User · Answer

HTML   lt html gt       lt head gt  lt  head gt    lt body ng-app    myApp  gt      lt form ng-controller    myCtrl  gt        lt input type    file  file-model  files  multiple  gt        lt button ng-click    uploadFile    gt upload me lt  button gt        lt li ng-repeat  file in files  gt   file name   lt  li gt     lt  form gt    Scripts     lt script src          http   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt     lt script gt      angular module  myApp       directive  fileModel      parse   function   parse            return              restrict   A              link  function scope  element  attrs                  element bind  change   function                   parse attrs fileModel  assign scope element 0  files                   scope  apply                                                       controller  myCtrl      scope     http   function  scope   http             scope uploadFile function           var fd new FormData            console log  scope files           angular forEach  scope files function file           fd append  file  file                       http post  http   localhost 1337 mediaobject upload  fd                              transformRequest  angular identity                 headers    Content-Type   undefined                                      success function d                                        console log d                                                      lt  script gt

User · Answer

We have used HTML  CSS and AngularJS  Following example shows about how to upload the file using AngularJS    lt html gt       lt head gt         lt script src    https   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt      lt  head gt       lt body ng-app    myApp  gt          lt div ng-controller    myCtrl  gt            lt input type    file  file-model    myFile   gt            lt button ng-click    uploadFile    gt upload me lt  button gt         lt  div gt          lt script gt           var myApp   angular module  myApp                  myApp directive  fileModel      parse   function   parse                return                  restrict   A                  link  function scope  element  attrs                      var model    parse attrs fileModel                     var modelSetter   model assign                     element bind  change   function                         scope  apply function                            modelSetter scope  element 0  files 0                                                                                                           myApp service  fileUpload      http   function   http                this uploadFileToUrl   function file  uploadUrl                  var fd   new FormData                   fd append  file   file                    http post uploadUrl  fd                      transformRequest  angular identity                    headers    Content-Type   undefined                                     success function                                       error function                                                             myApp controller  myCtrl      scope    fileUpload   function  scope  fileUpload                scope uploadFile   function                   var file    scope myFile                  console log  file is                     console dir file                   var uploadUrl     fileUpload                  fileUpload uploadFileToUrl file  uploadUrl                                        lt  script gt       lt  body gt   lt  html gt

User · Answer

Below is working example of file upload   http   jsfiddle net vishalvasani 4hqVu   In this one function called   setFiles   From View which will update the file array in controller  or   You can check jQuery File Upload using AngularJS  http   blueimp github io jQuery-File-Upload angularjs html

User · Answer

Above accepted answer is not browser compatible  If some one has compatibility issue try this   Fiddle  View Code    lt div ng-controller  MyCtrl  gt         lt input type  file  id  file  name  file   gt         lt br gt         lt button ng-click  add    gt Add lt  button gt         lt p gt   data   lt  p gt       lt  div gt    Controller code  var myApp   angular module  myApp        function MyCtrl  scope         scope data    none            scope add   function          var f   document getElementById  file   files 0             r   new FileReader          r onloadend   function e                     var binary       var bytes   new Uint8Array e target result   var length   bytes byteLength   for  var i   0  i  lt  length  i           binary    String fromCharCode bytes i        scope data    binary  toString               alert  scope data                 r readAsArrayBuffer f

User · Answer

UPLOAD FILES       lt input type  file  name  resume  onchange  angular element this  scope   uploadResume    ng-model  fileupload  id  resume    gt             scope uploadResume   function                   var f   document getElementById  resume   files 0                scope selectedResumeName   f name               scope selectedResumeType   f type              r   new FileReader                 r onloadend   function  e                      scope data   e target result                             r readAsDataURL f                 DOWNLOAD FILES              lt a href    applicant resume    download gt  download resume lt  a gt   var app   angular module  myApp                     app config    compileProvider   function   compileProvider                     compileProvider aHrefSanitizationWhitelist    s  https  local data chrome-extension                       compileProvider imgSrcSanitizationWhitelist    s  https  local data chrome-extension

User · Answer

Easy with a directive  Html    lt input type  file  file-upload multiple  gt    JS   app directive  fileUpload   function      return       scope  true           create a new scope     link  function  scope  el  attrs            el bind  change   function  event                var files   event target files                iterate files since  multiple  may be specified on the element             for  var i   0 i lt files length i                        emit event upward                 scope  emit  fileSelected     file  files i                                                                                  In the directive we ensure a new scope is created and then listen for changes made to the file input element  When changes are detected with emit an event to all ancestor scopes  upward  with the file object as a parameter   In your controller    scope files          listen for the file selected event  scope  on  fileSelected   function  event  args         scope  apply function                            add the file object to the scope s files collection          scope files push args file                 Then in your ajax call   data    model   scope model  files   scope files     http   shazwazza com post uploading-files-and-json-data-in-the-same-request-with-angular-js

User · Answer

The easiest is to use HTML5 API  namely FileReader  HTML is pretty straightforward    lt input type  file  id  file  name  file   gt   lt button ng-click  add    gt Add lt  button gt    In your controller define  add  method    scope add   function         var f   document getElementById  file   files 0           r   new FileReader         r onloadend   function e          var data   e target result          send your binary data via  http or  resource or do anything else with it            r readAsBinaryString f       Browser Compatibility  Desktop Browsers     Edge 12  Firefox Gecko  3 6 1 9 2      Chrome 7  Opera  12 02  Safari 6 0 2   Mobile Browsers      Firefox Gecko  32    Chrome 3    Opera  11 5    Safari 6 1   Note   readAsBinaryString   method is deprecated and readAsArrayBuffer   should be used instead

User · Answer

Some of the answers here propose using FormData    but unfortunately that is a browser object not available in Internet Explorer 9 and below  If you need to support those older browsers  you will need a backup strategy such as using  lt iframe gt  or Flash   There are already many Angular js modules to perform file uploading   These two have explicit support for older browsers    https   github com leon angular-upload - uses iframes as a fallback https   github com danialfarid ng-file-upload - uses FileAPI Flash as a fallback   And some other options    https   github com nervgh angular-file-upload  https   github com uor angular-file https   github com twilson63 ngUpload https   github com uploadcare angular-uploadcare   One of these should fit your project  or may give you some insight into how to code it yourself

User · Answer

this works  file html   lt html gt      lt head gt         lt script src    https   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt      lt  head gt      lt body ng-app    app  gt         lt div ng-controller    myCtrl  gt            lt input type    file  file-model    myFile   gt            lt button ng-click    uploadFile    gt upload me lt  button gt         lt  div gt      lt  body gt      lt script src  controller js  gt  lt  script gt   lt  html gt    controller js       var app   angular module  app              app service  fileUpload      http   function   http            this uploadFileToUrl   function file  uploadUrl              var fd   new FormData               fd append  file   file                http post uploadUrl  fd                  transformRequest  angular identity                headers    Content-Type   undefined                success function res                   console log res                 error function error                   console log error                                            app controller  fileCtrl      scope    fileUpload   function  scope  fileUpload            scope uploadFile   function               var file    scope myFile              console log  file is                 console dir file               var uploadUrl     fileUpload php       upload url stands for api endpoint to handle upload to directory            fileUpload uploadFileToUrl file  uploadUrl                            lt  script gt    fileupload php     lt  php      ext   pathinfo   FILES  file    name   PATHINFO EXTENSION        image   time        ext      move uploaded file   FILES  file    tmp name     DIR           image       gt

User · Answer

This should be an update comment to  jquery-guru s answer but as I don t have enough rep it will go here  It fixes the errors that are now generated by the code   https   jsfiddle net vzhrqotw   The change is basically   FileUploadCtrl  inject      scope   function FileUploadCtrl scope      To   app controller  FileUploadCtrl   function  scope      Feel free to move to a more appropriate location if desired

User · Answer

i think this is the angular file upload   ng-file-upload  Lightweight Angular JS directive to upload files   Here is the DEMO page Features   Supports upload progress  cancel abort upload while in progress  File drag and drop  html5   Directory drag and drop  webkit   CORS  PUT html5  POST methods  validation of file type and size  show preview of selected images audio videos  Cross browser file upload and FileReader  HTML5 and non-HTML5  with Flash polyfill FileAPI  Allows client side validation modification before uploading the file Direct upload to db services CouchDB  imgur  etc    with file s content type using Upload http    This enables progress event for angular http POST PUT requests  Seperate shim file  FileAPI files are loaded on demand for non-HTML5 code meaning no extra load code if you just need HTML5 support  Lightweight using regular  http to upload  with shim for non-HTML5 browsers  so all angular  http features are available   https   github com danialfarid ng-file-upload

User · Answer

I tried all alternatives that  Anoyz  Correct answer  gives    and the best solution is https   github com danialfarid angular-file-upload  Some Features    Progress Multifiles Fields  Old browsers  IE8-9    It s work fine for me  You just have to pay attention to instructions   In server-side i use NodeJs  Express 4 and Multer middleware to manage multipart request

User · Answer

You may consider IaaS for file upload  such as Uploadcare  There is an Angular package for it  https   github com uploadcare angular-uploadcare  Technically it s implemented as a directive  providing different options for uploading  and manipulations for uploaded images within the widget    lt uploadcare-widget   ng-model  object image info uuid    data-public-key  YOURKEYHERE    data-locale  en    data-tabs  file url    data-images-only  true    data-path-value  true    data-preview-step  true    data-clearable  true    data-multiple  false    data-crop  400 200    on-upload-complete  onUCUploadComplete info     on-widget-ready  onUCWidgetReady widget     value     object image info cdnUrl        gt    More configuration options to play with  https   uploadcare com widget configure

User · Answer

I am able to upload files using AngularJS by using below code   The file for the argument that needs to be passed for the function ngUploadFileUpload is  scope file as per your question   The key point here is to use transformRequest      This will prevent  http with messing with the contents of the file           function getFileBuffer file                var deferred   new  q defer                var reader   new FileReader                reader onloadend   function  e                    deferred resolve e target result                             reader onerror   function  e                    deferred reject e target error                              reader readAsArrayBuffer file               return deferred promise                     function ngUploadFileUpload endPointUrl  file                 var deferred   new  q defer                getFileBuffer file  then function  arrayBuffer                      http                       method   POST                       url  endPointUrl                      headers                             accept    application json odata verbose                            X-RequestDigest   spContext securityValidation                           content-length   arrayBuffer byteLength                                            data  arrayBuffer                      transformRequest                        then function  data                        deferred resolve data                      function  error                        deferred reject error                       console error  Error   error                                     function  error                    console error  Error   error                               return deferred promise

User · Answer

You can use a FormData object which is safe and fast      Store the file object when input field is changed  scope contentChanged   function event       if   event files length          return null        scope content   new FormData         scope content append  fileUpload   event files 0          scope  apply          Upload the file over HTTP  scope upload   function         http           method   POST            url    remote url           headers    Content-Type   undefined            data   scope content         success function response               Uploading complete         console log  Request finished   response

User · Answer

Your file and json data uploading at the same time     x000D   x000D     FIRST SOLUTION x000D   var  post   function  file  jsonData    x000D               http   x000D                  url  your url  x000D                  method   POST   x000D                  headers     Content-Type   undefined    x000D                  transformRequest  function  data    x000D                      var formData   new FormData    x000D                      formData append  model   angular toJson data model    x000D                      formData append  file   data files   x000D                      return formData  x000D                     x000D                  data    model  jsonData  files  file   x000D                 then function  response    x000D                    x000D                  x000D            x000D     END OF FIRST SOLUTION x000D   x000D     SECOND SOLUTION x000D     If you can add plural file and  If above code give an error  x000D     You can try following code x000D   var  post   function  file  jsonData    x000D               http   x000D                  url  your url  x000D                  method   POST   x000D                  headers     Content-Type   undefined    x000D                  transformRequest  function  data    x000D                      var formData   new FormData    x000D                      formData append  model   angular toJson data model    x000D                  for  var i   0  i  lt  data files length  i      x000D                         add each file to x000D                         the form data and iteratively name them x000D                      formData append  file    i  data files i    x000D                    x000D                      return formData  x000D                     x000D                  data    model  jsonData  files  file   x000D                 then function  response    x000D                    x000D                  x000D            x000D     END OF SECOND SOLUTION x000D   x000D   x000D

User · Answer

This is the modern browser way  without 3rd party libraries  Works on all the latest browsers    app directive  myDirective   function  httpPostFactory        return           restrict   A           scope  true          link  function  scope  element  attr                 element bind  change   function                      var formData   new FormData                    formData append  file   element 0  files 0                    httpPostFactory  upload image php   formData  function  callback                          recieve image name to use in a ng-src                      console log callback                                                              app factory  httpPostFactory   function   http        return function  file  data  callback             http               url  file              method   POST               data  data              headers    Content-Type   undefined             success function  response                callback response                            HTML     lt input data-my-Directive type  file  name  file  gt    PHP     if  isset   FILES  file     amp  amp    FILES  file    error      0        uploads image in the folder images      temp   explode        FILES  file    name          newfilename   substr md5 time     0  10          end  temp       move uploaded file   FILES  file    tmp name     images      newfilename       give callback to your angular code with the image src name     echo json encode  newfilename       js fiddle  only front-end  https   jsfiddle net vince123 8d18tsey 31

User · Answer

Use the onchange event to pass the input file element to your function    lt input type  file  onchange  angular element this  scope   fileSelected this     gt   So when a user selects a file  you have a reference to it without the user needing to click an  Add  or  Upload  button    scope fileSelected   function  element        var myFileSelected   element files 0

User · Answer

HTML    lt input type  file  id  file  name  file  onchange  angular element this  scope   profileimage this     gt    add  profileimage    method to your controller        scope profileimage   function selectimage          console log selectimage files 0     var selectfile selectimage files 0           r   new FileReader            r onloadend   function  e                debugger              var data   e target result                     r readAsBinaryString selectfile

User · Answer

The  lt input type file gt  element does not by default work with the ng-model directive  It needs a custom directive  Working Demo of select-ng-files Directive that Works with ng-model1  x000D   x000D  angular module  app        angular module  app   directive  selectNgFiles   function       return       require   ngModel       link  function postLink scope elem attrs ngModel          elem on  change   function e            var files   elem 0  files          ngModel  setViewValue files                          x000D   lt script src    unpkg com angular angular js  gt  lt  script gt     lt body ng-app  app  gt       lt h1 gt AngularJS Input  type file  Demo lt  h1 gt            lt input type  file  select-ng-files ng-model  fileList  multiple gt            lt h2 gt Files lt  h2 gt       lt div ng-repeat  file in fileList  gt          file name        lt  div gt     lt  body gt  x000D   x000D   x000D     http post from a FileList  scope upload   function url  fileList        var config     headers     Content-Type   undefined                       transformResponse  angular identity                         var promises   fileList map function file            return  http post url  file  config               return  q all promises       When sending a POST with a File object  it is important to set  Content-Type   undefined  The XHR send method will then detect the File object and automatically set the content type

User · Answer

lt form id  csv file form  ng-submit  submit import csv    method  POST  enctype  multipart form-data  gt       lt input ng-model  file  type  file   gt       lt input type  submit  value  Submit   gt   lt  form gt    In angularJS controller   scope submit import csv   function             var formData   new FormData document getElementById  csv file form             console log formData              ajax               url   import               type   POST               data   formData              mimeType  multipart form-data               contentType  false              cache  false              processData false              success  function result  textStatus  jqXHR                            console log result                                      return false

User · Answer

I ve read all the thread and the HTML5 API solution looked the best  But it changes my binary files  corrupting them in a manner I ve not investigated  The solution that worked perfectly for me was    HTML     lt input type  file  id  msds  ng-model  msds  name  msds   gt   lt button ng-click  msds update    gt      Upload  lt  button gt    JS   msds update   function         var f   document getElementById  msds   files 0           r   new FileReader        r onloadend   function e            var data   e target result          console log data           var fd   new FormData            fd append  file   data           fd append  file name   f name            http post  server handler php   fd                transformRequest  angular identity              headers    Content-Type   undefined                      success function                console log  success                        error function                console log  error                           r readAsDataURL f       Server side  PHP     file content     POST  file     file content   substr  file content      strlen  data text plain base64       file content   base64 decode  file content

User · Answer

You can achieve nice file and folder upload using flow js   https   github com flowjs ng-flow  Check out a demo here  http   flowjs github io ng-flow   It doesn t support IE7  IE8  IE9  so you ll eventually have to use a compatibility layer  https   github com flowjs fusty-flow js

User · Answer

http   jsfiddle net vishalvasani 4hqVu  works fine in chrome and IE  if you update CSS a little in background-image   This is used for updating progress bar    scope progress   Math round evt loaded   100   evt total    but in FireFox angular s  percent  data is not updated in DOM successfully although files are uploading successfully

User · Answer

app directive  ngUpload   function           return           restrict   A         link  function  scope  element  attrs           var options             options enableControls   attrs  uploadOptionsEnableControls              get scope function to execute on successful form upload       if  attrs  ngUpload               element attr  target    upload iframe            element attr  method    post                Append a timestamp field to the url to prevent browser caching results         element attr  action   element attr  action        t     new Date   getTime              element attr  enctype    multipart form-data            element attr  encoding    multipart form-data                Retrieve the callback function         var fn   attrs  ngUpload   split      0           var callbackFn   scope  eval fn           if  callbackFn    null    callbackFn    undefined     angular isFunction callbackFn                       var message    The expression on the ngUpload directive does not point to a valid function                 console error message             throw message     n                                               Helper function to create new  i frame for each form submission         var addNewDisposableIframe   function  submitControl                 create a new iframe           var iframe       lt iframe id  upload iframe  name  upload iframe  border  0  width  0  height  0  style  width  0px  height  0px  border  none  display  none    gt                   attach function to load event of the iframe           iframe bind  load   function                        get content - requires jQuery               var content   iframe contents   find  body   text                      execute the upload response function in the active scope               scope  apply function      callbackFn content  content           upload completed                            remove iframe               if  content           Fixes a bug in Google Chrome that dispose the iframe before content is ready                  setTimeout function      iframe remove       250                   submitControl attr  disabled   null                 submitControl attr  title    Click to start upload                                   add the new iframe to application           element parent   append iframe                          1  get the upload submit control s  on the form  submitters must be decorated with the  ng-upload-submit  class             2  attach a handler to the controls  click event             upload-submit   element  click            function                   addNewDisposableIframe   this     pass the submit control                   scope  apply function      callbackFn  Please wait      false    upload not completed                         var enabled   true              if  options enableControls     null    options enableControls     undefined    options enableControls length  gt   0                     disable the submit control on click                 this  attr  disabled    disabled                  enabled   false                               this  attr  title    enabled     ENABLED         DISABLED         Uploading  please wait                       submit the form               element  submit                          attr  title    Click to start upload                   else         alert  No callback function found on the ngUpload directive                                 lt form class  form form-inline  name  uploadForm  id  uploadForm  ng-upload  uploadForm12   action  rest uploadHelpFile   method  post  enctype  multipart form-data  style  margin-top  3px margin-left  6px  gt   lt button type  submit  id  mbUploadBtn  class  upload-submit  ng-hide  true  gt  lt  button gt   lt  form gt    RequestMapping value     uploadHelpFile   method   RequestMethod POST    public  ResponseBody String uploadHelpFile  RequestParam value    file   CommonsMultipartFile   file  RequestParam value    fileName   String fileName  RequestParam value    helpFileType   String helpFileType  RequestParam value    helpFileName   String helpFileName

[angularjs] File Upload using AngularJS

Examples related to angularjs

Examples related to angularjs-fileupload