CODEWITHSUNDEEP
javascriptangularjs
gr3g
gr3g

Reputation: 2914

Get file in javascript

Is there a way to access a file from a type="file" input in javascript?
The purpose is to send it with XHR afterwards.

Example :
<input type="file" id="myFile"/>

var file = $('#myFile');

With AngularJS : 

<input type="file" file-changed/>

.directive('fileChanged', function(){
  return {
    link : function(scope, element){
        element.on('change', function(e){
           if(e.target.value != ""){
               scope.myCtrl.file = e.target;   
           }
        });
     }
  }
)

.controller('myCtrl', function(){

  var self = this;
  self.file;

  //self.file should be available here for XHR.

});

Global need :
Multiple input type files needs to be send to a REST api.
I need to keep track of the progress of each file upload, WITHOUT using an external libary.

Upvotes: 0

Views: 70

Answers (2)

felipekm
felipekm

Reputation: 2910

You can use this directive below to attach the file to some $scope variable:

HTML:

  <input type="file" file-model="myFile"/>
  <button ng-click="uploadFile()">Upload</button>

DIRECTIVE:

angular.module('yourApp').directive('fileModel', ['$parse', function ($parse) {
    "use strict";

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            var model       = $parse(attrs.fileModel),
                modelSetter = model.assign;

            element.bind('change', function () {
                scope.$apply(function () {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };

}]);

CONTROLLER:

 $scope.uploadFile = function () {
     var file      = $scope.myFile,
         uploadUrl = "URL://";

     fileUploadService.uploadFileToUrl(file, uploadUrl, function (err, data) {
         $scope.ret = err || data;
     });
 };

Upvotes: 1

Jesse
Jesse

Reputation: 2830

This can be accomplished easily through FileReader

This is well supported these days http://caniuse.com/#feat=filereader

enter image description here

Here is a snippet of code from HTMLGoodies that will help you get started ::

function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0];

    if (f) {
        var r = new FileReader();
        r.onload = function(e) {
            var contents = e.target.result;
            alert("Got the file.n" + "name: " + f.name + "n" + "type: " + f.type + "n" + "size: " + f.size + " bytesn" + "starts with: " + contents.substr(1, contents.indexOf("n")));
        }
        r.readAsText(f);
    } else {
        alert("Failed to load file");
    }
}

document.getElementById('fileinput').addEventListener('change', readSingleFile, false);

Upvotes: 2

Related Questions