CODEWITHSUNDEEP
javascriptangularjsfile-upload
merveotesi
merveotesi

Reputation: 2183

Which event to get multiple file selected at single input

So far i get the file(single file) from single input using

$scope.$on("fileSelected", function (event, args) {

            $scope.$apply(function () {            


                $scope.files.push(args.file);
            });
        });

I wonder if i use "multiple" file input, can i still get file"s" with event "fileSelected"???

<input type='file' id='tempFiles' multiple></input>

An if i can, can i do something like

$scope.$on("fileSelected", function (event, args) {
                                    $scope.$apply(function () {            


                $scope.files.push(args.files);
            });         });

Upvotes: 0

Views: 346

Answers (1)

Ayobami Opeyemi
Ayobami Opeyemi

Reputation: 752

You could use Daniel Afarid's Angular File Upload

Controller

$scope.selectedFiles = [];
$scope.dataUrls = [];
$scope.model = 'test model';

$scope.onImageSelect = function($files) {

    $scope.selectedFiles['image'] = $files[0];


    var $file = $files[0];
    if (window.FileReader && $file.type.indexOf('image') > -1) {
        var fileReader = new FileReader();
        fileReader.readAsDataURL($files[0]);

        fileReader.onload = function(e) {
        $timeout(function() {
        $scope.dataUrls['image'] = e.target.result;
            });
        }
    }    

}

$scope.save_image =  function(){

        $upload.upload({
                 data:$scope.model
                  url: 'the/url',
                  file: $scope.selectedFiles['image']

        }).then(//success and error callbacks);


    }

View 

                                     <input type="file" ng-file-select="onImageSelect($files)">
                                <br />
                                <img ng-show="dataUrls['image']" ng-src="{{dataUrls['image']}}">

Upvotes: 1

Related Questions