JavaScript API -- PHP File Upload

php Uploader

PHP File Uploader

Extending PHP File Uploader with JavaScript API

The goal of this section is to help you to gain comfort working with PHP File Uploader's JavaScript APIs.

1. Global Event Handlers

With the following global event handlers you can have multiple PHP File Uploader instances on the page where you can attach the same event handler to run the same code.

  • For most functions, returning false would cancel the default action.
  • Using 'this' you can get the uploader object.

Events Description
CuteWebUI_AjaxUploader_OnInitialize Fires when an PHP File Uploader is fully initialized.
CuteWebUI_AjaxUploader_OnStart Fires when an upload of a specific file has started.
CuteWebUI_AjaxUploader_OnStop Fires when upload is stopped and not do postback.
CuteWebUI_AjaxUploader_OnPostback Fires before the page do PostBack to server side and fire the FileUploaded event.
CuteWebUI_AjaxUploader_OnBrowse Fires when the upload button is clicked.
CuteWebUI_AjaxUploader_OnSelect Fires when files are selected.
CuteWebUI_AjaxUploader_OnProgress Fires when new information about the upload progress for a specific file is available.
CuteWebUI_AjaxUploader_OnQueueUI Fires when the upload queue table is available.


Example:

//Fires when an PHP File Uploader is fully initialized

function CuteWebUI_AjaxUploader_OnInitialize()

{

    var hidden=this;

    //warning , using the internalobject is not recommend .

    //if you use it, you need test the uploader again for each new version.

    var arr=[];

    for(var p in hidden.internalobject)

    {

       arr.push(p);

    }

    alert("internal object member list : "+arr);

}

 

//Fires when an upload of a specific file has started

function CuteWebUI_AjaxUploader_OnStart()

{

    var hidden=this;

    hidden.internalobject.insertBtn.style.display='none'

}

//Fires when upload is stopped and not do postback

function CuteWebUI_AjaxUploader_OnStop()

{

    var hidden=this;

    hidden.internalobject.insertBtn.style.display=''

}

//Fires before the page do PostBack to server side and fire the FileUploaded event.

function CuteWebUI_AjaxUploader_OnPostback()

{

    var hidden=this;

    hidden.internalobject.insertBtn.style.display=''

    //thie files are prepaired

    //return false to cancel it..

}

//Fires when the upload button is clicked.

function CuteWebUI_AjaxUploader_OnBrowse()

{

    //return false to cancel it..

}

//Fires when files are selected.

function CuteWebUI_AjaxUploader_OnSelect(files)

{

    //change the files array would take no effect.

    var name=files[0].FileName;

    var size=files[0].FileSize // (or -1)

    //return false to cancel it..

}

//Fires when new information about the upload progress for a specific file is available.

function CuteWebUI_AjaxUploader_OnProgress(enable,filename,begintime,uploadedsize,totalsize)

{

    var hidden=this;

    if(enable)

    {

       if(totalsize)

       {

         document.title=filename+" - "+Math.floor(100*uploadedsize/totalsize)+'%'

       }

       else

       {

       }

    }

    else

    {

    }

    return false; //hide the default UI.

}

//Fires when the upload queue table is available.

function CuteWebUI_AjaxUploader_OnQueueUI(list)

{

    var name=list[0].FileName

    var size=list[0].FileSize // (or -1)

    var stat=list[0].Status // Finish|Error|Upload|Queue

    var func=list[0].Cancel;

    //display the

    //return false to hide the default queue table!

}

2. Instance Event Handler

With the following instance event handlers you can attach event handlers directly to an instance of PHP File Uploader by setting obj.handlexxxxx (lower case).

  • For most functions, returning false would cancel the default action.
  • Using 'this' you can get the uploader object.

Events Description
handleinitialize Fires when an PHP File Uploader is fully initialized.
handlestart Fires when an upload of a specific file has started.
handlestop Fires when upload is stopped and not do postback.
handlepostback Fires before the page do PostBack to server side and fire the FileUploaded event.
handlebrowse Fires when the upload button is clicked.
handleselect Fires when files are selected.
handleprogress Fires when new information about the upload progress for a specific file is available.
handlequeueui Fires when the upload queue table is available.


Example:

var hidden=document.getElementById('myuploader')

hidden.handlebrowse=function()

{

 var checkbox=document.getElementById("agreecheckbox");

 if(!checkbox.checked)

 {

 alert("you must agree the contract")

 return false;

 }

}