CODEWITHSUNDEEP
jqueryjquery-plugins
Chris
Chris

Reputation: 3846

jquery file upload plugin: how to use callbacks?

I am trying to implement the blue imp jquery file upload plugin from: https://github.com/blueimp/jQuery-File-Upload/ as often stated already the documentation is very detailed, but for me as beginner to jquery not really understandable.

I think I have basically lets say almost zero experience with jquery, so if anyone could help me out or give me a him I would be very glad!

I have tried to set up the basic implementation as it is in the wiki and saved following as index.html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>

<body>

<input id="fileupload" type="file" name="files[]" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        url: 'server/php/',
        done: function (e, data) {
            $.each(data.result, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

</script>

</body> 
</html>

What I wanted to do is show the images that have been uploaded on the same page. I thought I need to do this in the callback when upload is finished. However, I have no idea where to put the code...

So, to find out where to put any code I simply tried to just get an alert-box and added this code | UPDATE: this works now:

$('#fileupload').bind('fileuploaddone', function (e, data) {alert("Message","Titel")});

I also tried to use simply (UPDATE: still does not work):

$('#fileupload').fileupload('disable');

as it is said in the wiki, but with no effect.

Am I using the code in the wrong place? The code itself should be OK I guess...

Thank in advance for any hint!

Upvotes: 4

Views: 16792

Answers (2)

Andras Barth
Andras Barth

Reputation: 74

You can use the fileuploadprogressall callback function and compare inside the loaded and total data:

$('#fileupload').fileupload({
  ...
}).bind('fileuploadprogressall', function (e, data) {
        if(data.loaded==data.total) {
             console.log("All photos have been done");
        }
});

Upvotes: 2

Kev Price
Kev Price

Reputation: 809

If you bind to 'fileuploadcompleted' then you can trigger actions when the images are uploaded.

This can be done by chaining the bind onto the end of your fileupload. e.g:

$('#fileupload').fileupload({
    dataType: 'json',
    url: 'server/php/',
    done: function (e, data) {
        $.each(data.result, function (index, file) {
            $('<p/>').text(file.name).appendTo(document.body);
        });
    }
}).bind('fileuploadcompleted', function (e, data) {alert("Message","Title")});

Or anywhere below your fileupload function call using:

$('#fileupload').bind('fileuploadcompleted', function (e, data) {alert("Message","Title")});

Upvotes: 2

Related Questions