SfUploader message on upload failure and Template issues

[Shiv]

• Scenario: SfUploader without server side API endpoints.
• Syncfusion Blazor Nuget packages: 22.2.10

The ValueChange UploaderEvent triggers at start of file upload. However, the status message "File Uploaded successfully" appears immediately even though the upload process is not yet complete. If an exception occurs during the upload, I wanted to display an error message instead of the success message (and eventually localize strings).

I found the following similar issue and possible solution.

https://www.syncfusion.com/forums/163787/file-upload-onfailure

It suggests to use an UploadTemplate. I can get to the message field and update it, but it seems that using a template will result in loss of some of the SFUploader features. The file size formatted string is not available, e.g. xxKB, and I would have to provide this myself. Also, the 'X' to clear one item is not functioning. The progress bar also no longer displays during the upload.

I think because I am using a template, all those features that are not working are expected to come from the template. Is that correct? Or perhaps I am not using the template correctly and maybe there is a better way.

Really I only wanted to prevent the "File upload successfully" from appearing until the file was actually done. I seem to be getting lost with the template.

Any guidance or pointing out my errors is appreciated.

Simplified razor code - the css classes are probably a little mixed up but should not impact the SFUploader functions.

[Yohapuja Selvakumaran]

Hi Shiv,

Thank you for reaching out to us. We're delighted to inform you that, based on the information you provided, we've successfully created an uploader sample with a template that encompasses file name, file size with extension, a clear icon for list clearing, and an error message for both successful and failed uploads.

We're pleased that we could meet your requirements, and if you have any further questions, need additional assistance, please get back to us.

Regards,

Yohapuja S

Attachment: FileUpload_template_2e686a64.zip

[Shiv]

Hi  Yohapuja,

Thank you for providing the uploader sample. I appreciate putting this together and providing the zip file.

I am able to run your version and works as described, specifically the Remove icon triggers to remove each individual file. I am updating my project based on this.

I probably have an error somewhere which I cannot determine yet, but I am curious about one thing:

The <span> element with id removeIcon in your version results in attaching a click event listener for the icon. This allows the icon to be clicked and file is removed.

However, when I cut-paste the same <span> element into my own similar Uploader template, there is no event listener registered for that <span> element (DevTools inspector). So no remove trigger. That <span> element contains only css classes and so I am missing some knowledge, or magic, that allows it to work in the sample provided but not in my project.

I am interested to understand what wizarding trick is used. In the meantime I'll keep hunting.

Thanks and regards

Shiv

[Yohapuja Selvakumaran]

Hi Shiv,

We apologize for any inconvenience this may have caused. In version 21.1.35, we made some breaking changes that affected the behavior of the clear icon span, causing files not to be cleared as expected. You can find more details about these breaking changes in the release notes.

Release Notes:  https://blazor.syncfusion.com/documentation/release-notes/21.1.35?type=all#file-upload

To address this issue, we have manually added a click function to clear the uploaded file. Please refer to the attached sample for a demonstration of this solution.

Code snippet:

<div class="col-lg-12 control-section">

    <div class="control_wrapper">

        <div id="dropArea" style="height: auto;">

            <SfUploader ID="UploadFiles" SequentialUpload="true" @ref="UploadObj">

                <UploaderEvents></UploaderEvents>

                <UploaderTemplates>

                    <Template>

                        <div class="name file-name" style="padding:10px" title="@(context.Name)">@(context.Name)</div>

                        <div class="file-size" style="padding:10px">@(context.Size)</div>

                        <div class="status-message" style="padding:10px">@(context.Status)</div>

                        <span class="e-icons e-file-remove-btn" role="button" @onclick="@((e)=>RemoveHandlerAsync(context, e))"></span>

                    </Template>

                </UploaderTemplates>

            </SfUploader>

        </div>

    </div>

</div>

 

 

@code{

    SfUploader UploadObj;

    private void RemoveHandlerAsync(FileInfo message, MouseEventArgs args)

    {

        FileInfo[] fileArray = new FileInfo[] { message };

        UploadObj.RemoveAsync(fileArray);

    }

}

Regards,

Yohapuja S

Attachment: File_Upload_templateremove_780da858.zip

[Shiv]

Hi  Yohapuja,

Thank you for your efforts on this. I have incorporated your suggestion and I now have the expected outcome. I have noted your comments about the breaking changes from a prior release and will proceed with this in mind.

At least we have a successful workaround, I appreciate it. Thanks again.

[Shereen Shajahan]

Hi Shiv,

Glad to know that the provided solution helped. Please get back to us for assistance in the future.

Regards,

Shereen