Upload file when button clicked in Angularjs

Question

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?

did you found the solution for this? – Vilas Kumkar Mar 04 '16 at 15:49 — Vilas Kumkar, Mar 04 '16 at 15:49

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

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.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 08 '15 at 01:17

just95

1,089
8
13

1

I've tried adding you're `input field` but it's like the `uploader.uploadAll()`doesn't get trigged. No errors in the console or anything at all – Backer Apr 08 '15 at 09:08

score 1 · Answer 2 · answered Apr 08 '15 at 02:53

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 />

Upload file when button clicked in Angularjs

2 Answers2