CODEWITHSUNDEEP
angularjsfine-uploader
paulmelnikow
paulmelnikow

Reputation: 17208

Event when list of uploads has changed

I'm integrating Fine Uploader into an existing workflow. The user needs to provide a bit of metadata and select a file, then click Upload.

The Upload button should be disabled until a file is selected. If the user deletes the file, it should go back to disabled. I have autoUpload:false.

I'm using AngularJS so I'm binding to a function which invokes $("#fine-uploader").fineUploaderS3('getUploads'), and seems like a nice way to handle it.

However, I need a way to get notified when the list has changed, so I can trigger the digest cycle and update the UI. I've tried registering callbacks for the submitted and cancel events, which works – except that cancel is called when the upload is still in the list.

Is there a cleaner way to get a callback when the user adds or removes a file from the list of uploads?

Upvotes: 0

Views: 115

Answers (2)

paulmelnikow
paulmelnikow

Reputation: 17208

Here's my working solution, in case it's useful to someone else:

$scope.uploader = $('#fine-uploader').fineUploaderS3({
    ...
}).on('statusChange', function (event, id, oldStatus, newStatus) {
    $timeout(function () {
        $scope.$digest();
    });
});

$scope.has_selected_file = function () {
    if (!$scope.uploader) return false;
    var uploads = $scope.uploader.fineUploaderS3('getUploads');
    var result = _(uploads).some(function (item) {
        return item.status !== qq.status.CANCELED;
    });
    return result;
};

(Uses Underscore.js)

Upvotes: 0

Ray Nicholus
Ray Nicholus

Reputation: 19890

In your case, listening for the "cancel" event is not appropriate. Why? Because the file/upload is not actually cancelled when your cancel callback is invoked due to the fact that you are able to abort the cancel attempt via your callback handler's return value.

You can be sure that the file has been cancelled internally by listening for the statusChange event. When it has truly been cancelled, your statusChange event handler will be called with the file ID and a newStatus parameter of qq.status.CANCELED.

You can read more on status change handling in the docs.

UPDATE: Since you are using Fine Uploader UI, the file is not removed from the UI until just after this status is updated. This doesn't seem like an issue for you though, since you are utilizing the getUploads method to determine file status.

Upvotes: 1

Related Questions