Customise file status in onFileListRendering

[Dimitri]

Hi,

I'm preloading files into the uploader and I wish to give some of them a custom status.

I've registered a FileListRendering event and its being triggered for each file I've preloaded.

function onFileListRendering(args) {

    args.fileInfo.status = "custom status";

    args.fileInfo.statusCode = "0";

    console.log("Updated args:", args);

}

By printing the args to the console I can see that my changes are having an effect in args.

However, the files on the page still have a status of "File Uploaded Successfully"

Is there something I need to do to make the changes take effect?

[Priyanka Karthikeyan]

Hi Dimitri,

 

To customize the file status for preloaded files, you can access the file's element within the fileListRendering event and modify the status text accordingly. Below is a code snippet for your reference:

 

 

fileListRendering: function(args) {

            args.element.querySelectorAll(".e-file-status")[0].innerText = "custom status"

        }

 

Sample: https://stackblitz.com/edit/5jrui8-cz6krd?file=index.js

 

Regards,

Priyanka K

[Dimitri]

Hi Priyanka,

Thanks for this solution. However editing the html after the fact is my least preferred option.

Is it possible to change the status either during the Selected event or when providing the list of Files in the first instance?

Thanks

[Amy Brooks]

To customize the file status in onFileListRendering in a file upload component (likely using a library such as Syncfusion's uploader or similar), you can override or modify the file list rendering by customizing the file status. Here's how you can do it:

Example Using Syncfusion Uploader

In Syncfusion’s uploader component, onFileListRendering allows you to customize how each file is displayed in the file list, including the file status.

Code Implementation:

// Example customization in Syncfusion's Uploader

// Define your custom function to handle file rendering

function onFileListRendering(args) {

    // args.fileData contains the file information

    const file = args.fileData;

    // Customizing the status message based on conditions

    if (file.statusCode === '1') {

        args.status = "Uploading...";

    } else if (file.statusCode === '2') {

        args.status = "Upload complete!";

    } else if (file.statusCode === '3') {

        args.status = "Upload failed. Please retry.";

    } else {

        args.status = "Ready to upload";

    }

}

// Initialize the uploader with the custom rendering logic

var uploader = new ej.inputs.Uploader({

    asyncSettings: {

        saveUrl: 'https://your-upload-endpoint.com',

        removeUrl: 'https://your-remove-endpoint.com'

    },

    onFileListRendering: onFileListRendering, // Attach the custom rendering handler

});

uploader.appendTo('#file-uploader');

[Yohapuja Selvakumaran]

Hi Dimitri ,

Thank you for getting back to us! We understand that you want to ensure the status and status code for preloaded files are accurately reflected in the UI and handled programmatically.

 

We have modified the code to change the status using the element, which updates the UI of the file upload component. In addition, we recommend modifying the filesData property using the instance of the file uploader, ensuring that the status message and code are updated correctly in both the UI and the uploader's internal data.

 

Here’s the updated code snippet for your reference:

 

Code snippet:

 

 

function CreateHandler(args) {

     debugger;

     const statusElements = document.getElementsByClassName('e-file-status');

 

     // Loop through each status element

     for (let i = 0; i < statusElements.length; i++) {

         if(document.getElementsByClassName("e-file-size")[i].textContent == "0.0 KB"){

             statusElements[i].innerText = `File Upload failed`;

             statusElements[i].className = statusElements[i].className.replace('e-upload-success', 'e-upload-failed');

             document.getElementById("UploadFiles").ej2_instances[0].filesData[i].status = `File Upload failed`;

             document.getElementById("UploadFiles").ej2_instances[0].filesData[i].statusCode = `0`;

             console.log(document.getElementById("UploadFiles").ej2_instances[0].getFilesData());

         }

          

     }

 }

 

 

 

 

In this implementation, we update both the UI by changing the text and class for failed files and we ensure the filesData property of the uploader instance is updated with the correct status and status code.

 

Please check out the modified code and let us know if it resolves your issue.

 

We hope this helps! If you need any further assistance, feel free to reach out. We're happy to assist you.

 

 

Regard,

Yohapuja S

Attachment: ASPCoreSamples_uploader_e82992b4.zip

[Sharanya Murugeshan]

Hi Dimitri,

 

A ticket has been created for the same query under your account. Please follow the ticket for further updates. Therefore, marking this thread as solved.

 

Regards,

Sharanya M