I have been searching for a solution similar to this in angular without much success. What I discovered is that I need to somehow use the "onchange" method in my code:
<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 represents 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 any way to combine the input type="file" and button type="submit"? Any assistance would be greatly appreciated.