Angular fileupload dropzone does not work

Question

I have the following controller:.

    app.controller('DashboardController', ['$http', '$scope','$sessionStorage','$log','Session','api','FileUploader',  function ($http, $scope, $sessionStorage,$log, Session, api,FileUploader) {

    $scope.post = {user_id: $sessionStorage.user.user.id};


    var uploader = $scope.uploader = new FileUploader({
        url: 'js/controllers/upload.php'
    });

    // FILTERS

    uploader.filters.push({
        name: 'customFilter',
        fn: function(item /*{File|FileLikeObject}*/, options) {
            return this.queue.length < 10;
        }
    });

    // CALLBACKS

    uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
    };
    uploader.onAfterAddingFile = function(fileItem) {
        console.info('onAfterAddingFile', fileItem);
    };
    uploader.onAfterAddingAll = function(addedFileItems) {
        console.info('onAfterAddingAll', addedFileItems);
    };
    uploader.onBeforeUploadItem = function(item) {
        item.file.test = "gg";
        console.info('onBeforeUploadItem', item);
    };
    uploader.onProgressItem = function(fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
    };
    uploader.onProgressAll = function(progress) {
        console.info('onProgressAll', progress);
    };
    uploader.onSuccessItem = function(fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
    };
    uploader.onErrorItem = function(fileItem, response, status, headers) {
        console.info('onErrorItem', fileItem, response, status, headers);
    };
    uploader.onCancelItem = function(fileItem, response, status, headers) {
        console.info('onCancelItem', fileItem, response, status, headers);
    };
    uploader.onCompleteItem = function(fileItem, response, status, headers) {
        console.info('onCompleteItem', fileItem, response, status, headers);
    };
    uploader.onCompleteAll = function() {
        console.info('onCompleteAll');
    };

    console.info('uploader', uploader);
}]);

With the following html:

<div class="b-a b-2x b-dashed wrapper-lg bg-white text-center m-b" nv-file-over="" over-class="b-info" uploader="uploader">
                               Base drop zone

my goal is to upload as soon as i drop an item on the Base drop zone

However whenever i attempt to pull something into it does not take the item. Can anyone see what ive done wrong?

Giannis · Accepted Answer · 2015-05-09 21:27:31Z

3

Simply include nv-file-drop="" on your div.

<div class="b-a b-2x b-dashed wrapper-lg bg-white text-center m-b" nv-file-drop="" nv-file-over="" over-class="b-info" uploader="uploader">Base drop zone</div>

Try to drop a file on it, and check your browser's console for the events that are getting called.
You can then invoke uploader.uploadAll() on onAfterAddingFile event for example.

answered May 9, 2015 at 21:27

Giannis

4866 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Angular fileupload dropzone does not work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related