How to set up ng-file-upload in laravel-angular project?

Question

I am using laravel-angular set up. http://www.laravel-angular.io/#/

I am also trying to use ng-file-upload as described here. https://github.com/danialfarid/ng-file-upload

I am having trouble set up my project to access this ngFileUpload directive, it says in the installation.( https://github.com/danialfarid/ng-file-upload#-install)

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support -->
<script src="ng-file-upload(.min).js"></script>

but my question is where to I put these references if I am using elixir to compile all my dependencies?

Also where can I put this line if I need to load it into the app (I was thinking index.modules.js)

var app = angular.module('fileUpload', ['ngFileUpload']);

Have installed and used a few plugins for this project before, but this one is giving me trouble. Any suggestions would be greatly appreciated.

I keep getting errors when the app starts running, before I need to inject "Upload" into the controller.

Thanks,

Matt

If it's not giving any error, just inject Upload in your controller and use it. — developer033
– developer033, Commented Jul 19, 2016 at 3:38
i get an error before that point that it cannot find the necessary scripts, will edit question with more explination. — Matt Catellier
– Matt Catellier, Commented Jul 19, 2016 at 3:43

Matt Catellier · Accepted Answer · 2016-07-20 16:50:04Z

3

I found a work around, basically need to inject $scope into the controller and define fileChanged() function as follows.

class TestController{
    constructor($scope,API){
        'ngInject';
        this.API = API
        this.$scope = $scope;
    }

    $onInit(){
        this.file = null;
        this.$scope.fileChanged = function(elm) {
            console.log('hey')
            this.file = elm.file;
            this.$apply();
        }
    }
    upload() {
        console.log(this.file)
    }

}

can now call in HTML template like so:

<input type="file"
               accept="image/*"
               ng-model="vm.file"
               onchange="angular.element(this).scope().fileChanged(this); angular.element(this).scope().$digest();" />

I do not fully understand how this works, but it seems to be calling my function now, so should be able to get it working. The following 2 links were extremely helpful.

https://egghead.io/lessons/angularjs-file-uploads

https://github.com/angular/angular.js/issues/1375

answered Jul 20, 2016 at 16:50

Matt Catellier

8682 gold badges12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Catellier Over a year ago

this means no longer using prebuild directive, I will building my own that is ore compliant with laravel-angular way of doing things

lightswitch05 Over a year ago

this works by setting vm.file outside of angular (onchange is not angular event) and then forcing a recompile of the angular component to recognize the updated vm.file

Collectives™ on Stack Overflow

How to set up ng-file-upload in laravel-angular project?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related