jquery file upload plugin: how to use callbacks?

Question

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!

Kev Price · Accepted Answer · 2013-06-06 12:14:56Z

2

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")});

answered Jun 6, 2013 at 12:14

Kev Price

79710 silver badges21 bronze badges

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

Comments

John Paul · Accepted Answer · 2014-11-05 00:21:42Z

2

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");
        }
});

edited Nov 5, 2014 at 0:21

John Paul

12.8k7 gold badges57 silver badges78 bronze badges

answered Nov 5, 2014 at 0:01

Andras Barth

7411 bronze badges

Collectives™ on Stack Overflow

jquery file upload plugin: how to use callbacks?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related