CODEWITHSUNDEEP
javascriptangularjsangular-file-upload
Backer
Backer

Reputation: 1114

Upload file when button clicked in Angularjs

I have at the moment af button and a file input field to upload files.

Button

<button type="button" class="btn btn-success pull-right" ng-click="uploader.uploadAll()">Upload</button>

Input field

<input id="myUploader" type="file" uploader="uploader">

At the moment I first have to choose a file, with the input field, and then my button enables itself, which allow me to click on it and upload the file.

What I really want is to be able to directly click the button, which allows my to choose a file, and then automatically upload the file after it is chosen.

I've accomplished the first part by changing the ng-click="uploader.uploadAll()" with an onclick="$('#myUploader').trigger('click');"

My problem now is that I don't know how to trigger the uploader.uploadAll() function after the file is chosen.

Can anybody help me?

Upvotes: 1

Views: 3503

Answers (2)

ThisClark
ThisClark

Reputation: 14823

I don't know that I'm doing a good job of exactly addressing your question since I'm not doing it with angular, but I think you might find this contribution helpful so I'll share it. I first found a reference to solving this task by reading the post and trying examples at Reading files in JavaScript using the File APIs on html5rocks.com.

I recently worked on a project with this specific task and have a fully worked out demo for handling the upload of multiple files. You could trim it down to suit your needs for just one file, but here is all the code and a snippet to try it out in:

var totalDocumentCount = 0;
var totalDocumentsProcessed = 0;
var mapDocuments = {}; //a new object, maybe used as associative array

function parseXML(evt, file) {
	var key = file.name;
	var value = evt.target.result;
  
    //you could store a reference to each document in an associative array
	mapDocuments[key] = value;

	if (++totalDocumentsProcessed === totalDocumentCount) {
        //do something after the last file is uploaded
	}
}

//handles more than one file, but also works for a single file
function onFilesSelected(event) {
	var files = event.target.files; // FileList object
	totalDocumentCount = files.length;
	for (var i = 0, f; f = files[i]; i++) {
		var fileReader = new FileReader();
		fileReader.onloadend = (function (file) { //returns asynchronous, so i wrap in a closure
			return function (evt) {
				parseXML(evt, file)
			}
		})(f);
		fileReader.readAsText(f);
	}
}

document.getElementById('files').addEventListener('change', onFilesSelected, false);
<input type="file" id="files" name="files[]" multiple />

Upvotes: 1

just95
just95

Reputation: 1099

You could listen for change events on the input field.

Unfortunately ng-change does not seem to be working with file inputs. It's therefore necessary to use onchange.

To access the angular scope from inside of the event handler you can use angular.element(this).scope(). The final result would look like:

<input id="myUploader" type="file" uploader="uploader" onchange="angular.element(this).scope().uploader.uploadAll()">

See also this related question.

Upvotes: 1

Related Questions