0

I am trying to upload a file. I have a working example which does it like this:

<div class="btn btn-default btn-fileinput">
    <span class="glyphicon glyphicon-upload"></span> <input
        type="file" id="fileUploadInput" name="files" multiple
        accept="text/xml" data-ng-file-select="uploadFiles($files)" style="width: 40px;">
</div>

I modified it a bit and came up with this:

<label class="btn btn-default btn-file">
    Upload 
    <input 
        type="file" 
        style="display: none;"
        name="files"        
        multiple                        
        data-ng-file-select="uploadModel($files)"
        >
</label>

<span data-ng-file-select="uploadModel($files)" class="btn btn-primary btn-lg" role="button">Test</span>

However, the uploadModel() function is not getting called:

$scope.uploadModel = function($files) {
    alert('Uploading ' + $files);
}

How can I make this work in order to upload a file?

Dependencies:

    <!-- Dependencies -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

Application modeule:

var emaApp = angular.module('emaApp', ['ui.bootstrap', 'angularFileUpload']);
Stefan Falk
  • 23,898
  • 50
  • 191
  • 378

1 Answers1

0

If it's the following module, then you should be using nv-file-select rather than data-ng-file-select in combination with an uploader object. nv-file-select doesn't look to take any kind of function/callback, instead you'd using various hooks such as onAfterAddingFile attached to uploader object that would allow you to execute actions at different points in the select/upload process. Looking at their API documentation there doesn't seem to be any data-ng-file-select directive, unless you created a custom one.

Otherwise you can create a custom directive to watch for changes to the file input type field like this.

HTML

<label class="btn btn-default btn-file">
    Upload 
    <input 
        type="file" 
        style="display: none;"
        name="files"        
        multiple                        
        nv-file-select 
        uploader="uploader" />
</label>

JS

app.controller('someController', function($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
        url: 'some/end/point'
    });

    uploader.onAfterAddingFile = function($files) {
        console.info('onAfterAddingFile', $files);
    };
});
Community
  • 1
  • 1
Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91
  • Regarding the endpoint.. should this work for a POST request? For example I have `http://localhost:8080/rest-api/dl4j/we/uploadModel` which is the endpoint for the file upload. – Stefan Falk Feb 03 '17 at 16:02
  • I ask because I don't see anything going out if I implement it that way. – Stefan Falk Feb 03 '17 at 16:04
  • Oh I see - I still have to make the POST myself :D – Stefan Falk Feb 03 '17 at 16:06
  • Looking at the source, It looks like it would be a POST action to the specified endpoint. – Alexander Staroselsky Feb 03 '17 at 16:06
  • I don't think you need to do a manual $http.post(). Instead within the `onAfterAddingFile()` you can set the `formData` property for each given item then execute `upload()` on the item (assuming autoUpload set to false). [Issue #409](https://github.com/nervgh/angular-file-upload/issues/409), [Issue #646](https://github.com/nervgh/angular-file-upload/issues/646), and [Issue #441](https://github.com/nervgh/angular-file-upload/issues/441) – Alexander Staroselsky Feb 03 '17 at 17:08