1
Catching Javascript events
Question asked by Sam Belcher - 6/21/2018 at 12:50 PM
Answered
I am using FileUltimate in a user control on the page, and I am attempting to change panels when a file is uploaded or deleted. I know there are the server side events that I can catch in the code behind and perform some operations, but I am looking to execute some javascript whenever one of these events occurs. I am unable to execute the javascript using a RegisterStartupScript or RegisterClientScriptBlock since the events don't trigger a postback. Are there any events, or other ways to catch a file upload or delete in the javascript?

1 Reply

Reply to Thread
0
Cem Alacayir Replied
Employee Post Marked As Answer
FYI, we have just released FileUltimate v6.2.0 with this featue:
 
Added: New client-side events. Before events: ClientCreating, ClientDeleting, ClientRenaming, ClientCopying, ClientMoving, ClientCompressing, ClientExtracting, ClientUploading, ClientDownloading, ClientPreviewing. It's possible to stop a file action (and optionally display a message) by canceling the corresponding before event. After events: ClientFolderChanged, ClientSelectionChanged, ClientCreated, ClientDeleted, ClientRenamed, ClientCopied, ClientMoved, ClientCompressed, ClientExtracted, ClientUploaded. Refer to new "Client-side events" sample and updated docs for event handler usage.
 
Now you can use these before and after client side events:
<head> 
  <script type="text/javascript">
  
    function fileManagerDeleting(sender, e) {
        var fileManager = sender;

        //Pretty print the event arguments
        var json = JSON.stringify(e, null, 2);

        alert(json);

        /*
        Canceling a before event (stops the corresponding action):
        e.isCanceled = true;
        
        Optionally displaying a message to the user when canceling
        e.message = e.eventName + " event is canceled!";
        */
    }

    function fileManagerDeleted(sender, e) {
        var fileManager = sender;

        //Pretty print the event arguments
        var json = JSON.stringify(e, null, 2);

        alert(json);
    }

    function fileManagerUploading(sender, e) {
        var fileManager = sender;

        //Pretty print the event arguments
        var json = JSON.stringify(e, null, 2);

        alert(json);

        /*
        Canceling a before event (stops the corresponding action):
        e.isCanceled = true;
        
        Optionally displaying a message to the user when canceling
        e.message = e.eventName + " event is canceled!";
        */
    }

    function fileManagerUploaded(sender, e) {
        var fileManager = sender;

        //Pretty print the event arguments
        var json = JSON.stringify(e, null, 2);

        alert(json);
    }

  </script>
</head> 
 
Binding JS event handlers in ASP.NET MVC:
var fileManager = new FileManager
{
    ClientDeleting = "fileManagerDeleting",
    ClientDeleted = "fileManagerDeleted",
    ClientUploading = "fileManagerUploading",
    ClientUploaded = "fileManagerUploaded"
};
 
Binding JS event handlers in ASP.NET WebForms:
<GleamTech:FileManager id="fileManager" runat="server" 
  ClientDeleting="fileManagerDeleting" 
  ClientDeleted="fileManagerDeleted"
  ClientUploading="fileManagerUploading"
  ClientUploaded="fileManagerUploaded" />
 
Sample outputs for these event handlers (pretty printing of event arguments):
//SAMPLE OUTPUT for ClientDeleting:
{
  "eventName": "deleting",
  "items": [
    {
      "name": "DOCX Document.docx",
      "fullPath": "[1. Root Folder]:\\DOCX Document.docx",
      "itemType": "File",
      "extension": "docx",
      "size": 84272
    },
    {
      "name": "Folder One",
      "fullPath": "[1. Root Folder]:\\Folder One",
      "itemType": "Folder",
      "extension": "",
      "size": null
    }
  ]
}

//SAMPLE OUTPUT for ClientDeleted:
{
  "eventName": "deleted",
  "items": [
    {
      "name": "DOCX Document.docx",
      "fullPath": "[1. Root Folder]:\\DOCX Document.docx",
      "itemType": "File",
      "extension": "docx",
      "size": 84272
    },
    {
      "name": "Folder One",
      "fullPath": "[1. Root Folder]:\\Folder One",
      "itemType": "Folder",
      "extension": "",
      "size": null
    }
  ]
}
*/

//SAMPLE OUTPUT for ClientUploading:
/*
{
  "eventName": "uploading",
  "items": [
    {
      "name": "Bitmap Image 2.bmp",
      "size": 196662
    },
    {
      "name": "DOCX Document.docx",
      "size": 84272
    },
    {
      "name": "PDF Document 1.pdf",
      "size": 2500618
    }
  ],
  "uploadMethod": "Html5"
}
*/

//SAMPLE OUTPUT for ClientUploaded:
{
  "eventName": "uploaded",
  "items": [
    {
      "name": "Bitmap Image 2.bmp",
      "size": 196662,
      "status": "Completed"
    },
    {
      "name": "DOCX Document.docx",
      "size": 84272,
      "status": "Completed"
    },
    {
      "name": "PDF Document 1.pdf",
      "size": 2500618,
      "status": "Completed"
    }
  ],
  "uploadMethod": "Html5"
}
 
 
 
 
 

Reply to Thread