How to get the events from Upload Component?
Question asked by Rogerio Picilli - 5/20/2020 at 6:47 AM
Answered
Hello, I'm working on a new project using FileUpload standalone on an ASP NET MVC platform. I'm not able to get the events from the files (Uploading, Uploaded, Deleted, etc.). Could someone help me shown the way on how to do this? 
What I would like to do is if 5 files are sent to my website to each file that finishes uploading, I would get the information about this file. 
Thanks in advance for any help

4 Replies

Reply to Thread
0
Cem Alacayir Replied
Employee Post
FYI, this is now fixed, please try with the latest version.

Version 7.4.0 - May 22, 2020

  • Fixed: Events set via ClientEvents property were not being registered for FileUploader.
0
Rogerio Picilli Replied
Hello Cem, I hope you're doing well.

I'm using the latest version. I don't know how to get those events. My fault.

Is there any code example on your site?

Best regards

Rogerio
0
Cem Alacayir Replied
Employee Post Marked As Answer
Oh I thought you were talking about a bug with client-side events.

There are 3 server-side events for FileUploader component:

fileUploader.Uploading += FileUploaderUploading;
fileUploader.Uploaded += FileUploaderUploaded;
fileUploader.Failed += FileUploaderFailed;

private static void FileUploaderUploading(object sender, FileUploaderReceivingEventArgs e)
{
  //You can iterate through e.Validationsproperty for all files that are about to be uploaded in a group
}

private static void FileUploaderUploaded(object sender, FileUploaderReceivedEventArgs e)
{
  //You can iterate through e.Items property for all files uploaded in a group
}

private static void FileUploaderFailed(object sender, FileUploaderFailedEventArgs e)
{
}
Refer to docs for all properties in the related eventArgs:



There are also 5 client-side events:

@using GleamTech.AspNet.Core
@using GleamTech.FileUltimate.AspNet.UI

<!DOCTYPE html>
@{
    var fileUploader = new FileUploader
    {
        Width = 600,
        Height = 300,
        Resizable = true,
        UploadLocation = "~/App_Data/Uploads",
        ClientEvents = new FileUploaderClientEvents
        {
            ItemUploaded = "genericEventHandler"
        }
    };
}
<html>
<head>
    <title>File Uploader</title>
    @this.RenderHead(fileUploader)

    <script type="text/javascript">
        function genericEventHandler(sender, e) {
            //Pretty print the chosen info (from event object)
            var json = JSON.stringify(e, null, 2);
            //alert(json);
            console.log(json);
        }
    </script>

</head>
<body>
@this.RenderBody(fileUploader)
</body>
</html>

Sample output in console:

{
  "eventName": "uploaded",
  "items": [
    {
      "itemType": "File",
      "name": "Spotlight 1.jpg",
      "nameWithoutPath": "Spotlight 1.jpg",
      "extension": "jpg",
      "dateModified": "2015-12-29T10:24:48.512Z",
      "type": "JPG File",
      "size": 1791421,
      "status": "Completed"
    },
    {
      "itemType": "File",
      "name": "New folder\\Screen 1.jpg",
      "nameWithoutPath": "Screen 1.jpg",
      "extension": "jpg",
      "dateModified": "2015-10-30T07:18:39.768Z",
      "type": "JPG File",
      "size": 1557291,
      "status": "Completed"
    }
  ],
  "uploadMethod": "Html5",
  "uploadMethodFeatures": {
    "selectFile": true,
    "selectMultiple": true,
    "selectFolder": true,
    "dragAndDrop": true,
    "displayThumbnails": true,
    "sendAsChunks": true,
    "sendAsMultipart": true,
    "reportProgress": true,
    "reportFileSize": true,
    "reportFileDate": true
  }
}
0
Rogerio Picilli Replied
Thank  you so much. I'll try it out.

Best regards

Rogerio

Reply to Thread