Jquery file upload autoupload and frontend validation before upload - angularjs

Question

I use plugin from: https://github.com/blueimp/jQuery-File-Upload
My script loading order is:
jquery.js, angular.js, jquery.ui.widget.js, jquery.iframe-transport.js, jquery.fileupload.js, jquery.fileupload-process.js, jquery.fileupload-validate.js, jquery.fileupload-angular.js
My controller is:
$scope.profileUploadOptions = {
url: API_URL + "images/user",
maxFileSize: 50,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
forceIframeTransport: false,
add: function(e, data) {
$.each(data.files, function (index, file) {
console.log("Added file: " + file.name);
});
console.log(data);
},
start: function(e) {
console.log("Uploads started");
},
stop: function (e) {
console.log("Uploads finished");
},
change: function (e, data) {
$.each(data.files, function (index, file) {
console.log("Changed file: " + file.name);
});
},
progress: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log("Progress: " + progress);
},
progressAll: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log("Progress: " + progress);
},
done: function(e, data) {
console.log("Done: ");
console.log(data);
},
fail: function(e, data) {
console.log("Fail: ");
console.log(data);
},
always: function(e, data) {
console.log("Always: ");
console.log(data);
}
};
How i can submit upload after browse single file from browse window, and where i can handle errors if file type not in acceptFileTypes Regex, or is bigger than maxFileSize?

Answer 1

The plugin documentation should answer your question on auto-uploading, and there are a host of examples that are easy enough to find regarding setting up the fileinput piece of your question.
As far as validating files before submitting an upload, this posed answer, pasted below, is a good starting point.
$fileInput.fileupload({
url: 'upload_url',
type: 'POST',
dataType: 'json',
autoUpload: false,
disableValidation: false,
maxFileSize: 1024 * 1024,
messages: {
maxFileSize: 'File exceeds maximum allowed size of 1MB',
}
});
$fileInput.on('fileuploadadd', function(evt, data) {
var $this = $(this);
var validation = data.process(function () {
return $this.fileupload('process', data);
});
validation.done(function() {
makeAjaxCall('some_other_url', { fileName: data.files[0].name, fileSizeInBytes: data.files[0].size })
.done(function(resp) {
data.formData = data.formData || {};
data.formData.someData = resp.SomeData;
data.submit();
});
});
validation.fail(function(data) {
console.log('Upload error: ' + data.files[0].error);
});
});
Using the other author's code, the providing user feedback can be achieved in the validation.fail handler.