Get file in javascript

Question

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.

Maybe this helps for the first part: stackoverflow.com/questions/18571001/… (second answer) — juvian
– juvian, Commented Oct 28, 2015 at 17:08

Jesse · Accepted Answer · 2015-10-28 17:14:31Z

2

This can be accomplished easily through FileReader

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

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);

answered Oct 28, 2015 at 17:14

Jesse

2,8621 gold badge23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gr3g Over a year ago

Thank you! Any good information website to understand what is exactly happening with type="file" inputs in the browser?

halfer · Accepted Answer · 2023-07-20 19:08:29Z

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;
     });
 };

Collectives™ on Stack Overflow

Get file in javascript

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