Callback and Events

Listeners, Callback and Events

Real Uploader has several listeners for almost every type of event. Callback functions can be bind at start up using the listeners option of the uploader or during run time using the on function.

Bind listeners at start up

The complete list of listeners

                        <div id="targetElement"></div>
    <script type="text/javascript">
        var uploader = new RealUploader("#targetElement", {
            md5Calculate: true,
            url: "../examples/upload.php",
            listeners: {
                start: function() {
                    console.log("Upload All pressed");
                },
                startFile: function(file) {
                    console.log("Upload file start: " +file.name);
                },
                finish: function() {
                    console.log("All files have been uploaded");
                },
                finishFile: function(file, msg) {
                    console.log("Upload file start: " +file.name);
                },
                error: function(msg) {
                    console.log("There was an error general error: "+ msg);
                },
                errorFile: function(file, info, name) {
                    console.log("There was an error uploading this file: " +info);
                },
                beforeUpload: function(fileListArray) {
                    //if return false then upload will be stopped
                    console.log("Before upload triggered");
                    return true;
                },
                beforeUploadFile: function(file, name) {
                    //if return false this file will not be uploaded
                    console.log("Before upload "+name+" triggered");
                    return true;
                },
                /**
                *
                * @param file File Object (JS object class)
                * @param template String in HTML format
                */
                beforeRenderFile: function(file, template) {
                    //this events runs before file template is attached to the DOM
                    //useful if dom template html manipulation is needed
                    console.log("beforeRenderFile render triggered");
                },
                /**
                *
                * @param file File Object (JS object class)
                * @param domObject JS object to access the DOM elements
                * domObject.container is the main container
                */
                afterRendererFile: function(file, domObject) {
                    //if return false this file will not be uploaded
                    console.log("afterRendererFile triggered");
                },
                init: function() {
                    console.log("Real Uploader has been initialized");
                },
                progress: function(totalBytes) {
                    console.log("Total bytes uploading: " + totalBytes);
                },
                progressFile: function(file, percent) {
                    console.log("Progress called for " + file.name+ "-"+percent);
                },
                beforePreview: function(file) {
                    console.log("Doing preview of file "+file.name);
                    //return false to stop preview
                    return true;
                },
                preview: function(file) {
                    console.log("Preview of file done successfully "+file.name);
                },
                select: function(fileListArray) {
                    //runs on files select/or drag and drop
                    console.log("Number of selected files "+fileListArray.length);
                },
                chunkUpload: function(file, name, size, chunk, xhr) {
                    console.log("Chunk uploaded "+file.name);
                },
                exifDone: function(file, exifObject) {
                    console.log("Exif read ", exifObject);
                },
                md5Done: function(file, md5) {
                    console.log("MD5 of file ", file.name, "is", md5);
                },
                beforeImageResize: function(file) {
                    console.log("Starting image resizing", file.name);
                    //if return false the resize will be cancelled
                    //this event will run only for images
                    return true;
                },
                imageResize: function(file, blob) {
                    console.log("Image Resize done", file.name);
                },
                validateFile: function(name, ext, size) {
                    //this callback is particular, this is used
                    //of user custom file validation
                    //validation is passed if returns false/0/null/undefined
                    //if returns something different from the above the
                    //file will not be added for upload and that will be
                    //used as error message
                    return false;
                }
            }
        });
    </script>
    
                    

Try here the result

Bind events on runtime

                        
    <script type="text/javascript">
    uploader.on('select', function(){
        console.log("This is another callback added to the select event ");
    });
    </script>

                    

Try here the result

Open the console of your browser to see the result