Custom upload + submit in one button angularjs

Question

I've tried to find something like this in angular but wasn't lucky. What did I found that I have to use somehow method "onchange". No my code looks like:

   <form ng-controller="uploadCtrl as up" name="up.upload_form">
       <div class="fileUpload btn btn-primary">
                    <span>Upload</span>
                    <input type="file" class="upload"
                           ngf-select
                           ng-model="up.file"
                           name="file"
                           ngf-max-size="20MB"/></div>
     <button type="submit" class="btn btn-default" ng-click="up.submit()">Upload</button>
   <i ng-show="up.upload_form.file.$error.required">*required</i><br>
   <i ng-show="up.upload_form.file.$error.maxSize">File too large
      {{up.file.size / 1000000|number:1}}MB: max 20M</i>
   <button class="btn btn-default"  ng-click="compare_it()">Compare it</button>
                    <pre>{{up.progress}}</pre>
 </form>

this is my controller

app.controller('uploadCtrl',['Upload','$window',function(Upload,$window){
    var vm = this;
    vm.submit = function(){ //function to call on form submit
        if (vm.upload_form.file.$valid && vm.file) {//check if from is valid

            //console.log(vm.file.name);
            vm.upload(vm.file); //call upload function
            //vm.file.name = prompt("put you name");
        }
    };

    vm.upload = function (file) {
        Upload.upload({
            url: '/upload', //webAPI exposed to upload the file
            data:{file:file} //pass file as data, should be user ng-model
        }).then(function (resp) { //upload function returns a promise
            if(resp.data.error_code === 0){ //validate success
                $window.alert('Success ' + resp.config.data.file.name + ' uploaded.');
            } else {
                $window.alert('an error occured');
            }
        }, function (resp) { //catch error
            console.log('Error status: ' + resp.status);
            $window.alert('Error status: ' + resp.status);
        }, function (evt) {
            console.log(evt);
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
            vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
        });
    };
}]);

Is there anyway to merge input type="file" and button type="submit"? I appreciate any help

dave · Accepted Answer · 2016-04-21 04:13:00Z

2

In the controller:

$scope.$watch("up.file", function() { if (up.file) up.submit() });

Or in the view:

<input type="file" class="upload"
                       ngf-select
                       ng-model="up.file"
                       ng-change="up.submit()"
                       name="file"
                       ngf-max-size="20MB"/>

answered Apr 21, 2016 at 4:13

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

1 Comment

Anton Over a year ago

Wow, works like magic! thank you so much, so asI can see you used ng-change instead onchange, and set watch for file, it's really cool

Collectives™ on Stack Overflow

Custom upload + submit in one button angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related