Custom Error Message for File Upload

[Mohd Mohaimin Zakaria]

Hi,

I have a file upload for an excel file. The file will be process line by line to be inserted in a DB.

I already have a the function to check the data on each line and assign the error line to a variable.

But I don't know how to create a Custom Error Message via popup or dialog box and pass the variable if there are an error while uploading a file.

Thank you.

[Christopher Issac Sunder K]

Hi Mohd Mohaimin, 

Greetings from Syncfusion!!! 

The uploader component allows you to modify the file after uploading to the server, which can be achieved using failure event of the uploader. You can use custom headers to send the data from server to client side. While receiving custom headers in client side, it will contain the server details along with the sent message. Kindly refer to the following code snippet. 

<div class="upload_Wrap"> 

    <ejs-uploader id="UploadFiles" failure="onUplaodFail" asyncSettings="@asyncSettings"></ejs-uploader> 

</div> 

<script> 

    function onUplaodFail(args) { 

        var header = args.response.headers; 

        var statusMessage = header.slice(header.indexOf('status'), header.indexOf('date')); 

        statusMessage = statusMessage.slice(statusMessage.indexOf(',') + 1); 

        args.statusText = statusMessage.trim(); 

    } 

</script> 

[Server side] 

[AcceptVerbs("Post")] 

public IActionResult Save(IList<IFormFile> UploadFiles) 

{ 

    try 

    { 

        foreach (var file in UploadFiles) 

        { 

            if (UploadFiles != null) 

            { 

                var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); 

                filename = hostingEnv.WebRootPath + $@"{filename}"; 

                if (!System.IO.File.Exists(filename)) 

                { 

                    using (FileStream fs = System.IO.File.Create(filename)) 

                    { 

                        file.CopyTo(fs); 

                        fs.Flush(); 

                    } 

                } 

                else 

                { 

                    Response.Clear(); 

                    Response.StatusCode = 404; 

                    Response.Headers.Add("status", "File Already Exists"); 

                } 

            } 

        } 

    } 

    catch (Exception e) 

    { 

        Response.Clear(); 

        Response.ContentType = "application/json; charset=utf-8"; 

        Response.StatusCode = 400; 

        Response.Headers.Add("status", e.Message); 

    } 

    return Content(""); 

} 

 

Sample Link:http://www.syncfusion.com/downloads/support/forum/143706/ze/Uploader_dotnetcore1878020108 

Please let us know if you require any further assistance. 

Thanks,
Christo 

[Mohd Mohaimin Zakaria]

Hi.

Thanks for your help. It really helps.

[Gopi Govindasamy]

Hi Team,  

Thanks for the update. We are happy to hear your problem has been resolved.   

  

Please get back to us, if you need further assistance. 

Regards, 

Gopi G. 

[Gopi Govindasamy]

Hi Mohd Mohaimin,  

Thanks for the update. We are happy to hear your problem has been resolved.   

  

Please get back to us, if you need further assistance. 

Regards, 

Gopi G. 

[Greg Boyer]

Should this approach work with actionComplete?  I want to return info on success but I get an error trying to reference "headers" in the actionComplete method.

//View:

<ejs-uploader id="uploadFilesXRY" autoUpload="true" dropArea=".control-fluid" asyncSettings="@asyncSettingsXRY" uploading="onBeforeUpload" actionComplete="onCompleteXRY" failure="onFailure" sequentialUpload="true"></ejs-uploader>

//Controller:

 public async Task<IActionResult> UploadXRY(IList<IFormFile> UploadFilesXRY)

{

.

.

.

            Response.Clear();

            Response.Headers.Add("sampleIds", "test");

            return Content(string.Empty);

        }

}

//Javascript:

    function onCompleteXRY(args) {

        var header = args.response.headers;

    }

//Result:

Thank you,

Greg B

[Sureshkumar P]

Hi Mohd, 

 

Thanks for your update. 

 

We have validated your requirement with shared code. We suspect that you have tried to send the success and failure status. We would like to say this we have separate success and failure event to showcase each file status with every server request. We suggest you use our success and failure event to get rid of your issue. 

 

Kindly refer the below code block. 

 

@{ 

    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://localhost:44342/Home/Save", RemoveUrl = "https://localhost:44342/Home/Remove" }; 

} 

 

<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" autoUpload="false" selected="onSelect" success="onSuccess" failure=""="onFailure" ></ejs-uploader> 

 

<script> 

function onSuccess() {         

        console.log("success") 

    } 

 

function onFailure() { 

        console.log("failur") 

    } 

</script> 

 

Regards, 

Sureshkumar P 

[Michael Schletz]

I prefer to send the message in the content and not in the header:

[Server Side (Razor Page)]

public IActionResult OnPostUpload(IList<IFormFile> uploadFiles)

{

    //...

    Response.Clear();

    Response.ContentType = "application/json";

    // Sennd HTTP 200 (OK), 400, or what you want.

    return StatusCode(200, new { Message = $"{successMessage}" });

}

[Client Side]

    function onUploadSuccess(args) {

        let response = JSON.parse(args.e.target.response);

        args.statusText = response.message;

    }

    function onUploadFail(args) {

        let response = JSON.parse(args.e.target.response);

        args.statusText = response.message;

    }

[Sureshkumar P]

Hi Michael, 

 

Thanks for your update.  

 

Based on your shared code example, we suspect that you want to change the status code and status text in the success and failure event. We suggest you remove the Response.Clear and Response.ContentType from your server-side code to achieve your requirement.  

 

Please find the code example below. 

 public IActionResult OnPostUpload(IList<IFormFile> uploadFiles) 

    { 

        //... 

        // no need to update the Response here  

        @* Response.Clear(); 

        Response.ContentType = "application/json"; *@ 

        // Sennd HTTP 200 (OK), 400, or what you want. 

        return StatusCode(200, new { Message = $"{successMessage}" }); 

    } 

 

 

Regards, 

Sureshkumar P 

[Peter]

Hi there,

I'm using the approach above using the response body to set the failure message, but the only thing I can't figure out is if it is possible to split the response over multiple lines.

e.g. my response content is:

One or more users failed.

Record with user name 'User name' has the incorrect number of values.
Record with user name 'azure_cli_user' has the incorrect number of values.

But it displays as:

One or more users failed. Record with user name 'User name' has the incorrect number of values. Record with user name 'azure_cli_user' has the incorrect number of values.

I'd like it to display as:

One or more users failed.

Record with user name 'User name' has the incorrect number of values.
Record with user name 'azure_cli_user' has the incorrect number of values.

Is this possible?

[Deepak Ramakrishnan]

Hi Peter, 

 

 

Thanks for your update. 

 

 

Yes we are also facing the scenario when the status text is long . We will check the possibilities and update the further details in two business days (29^th,October 2021). We appreciate your patience until then. 

 

 

 

Thanks, 

Deepak R 

[Deepak Ramakrishnan]

 

Hi Peter, 

 

Thanks for your update. 

 

We have created a sample as per your requirement by using ‘actionComplete’ event . It will be triggered once the action got completed , So based on the failure message existence we have modified the innerHtml of the required element .Kindly refer the following code for your reference. 

 

[Snapshot] 

 

 

 

Sample Link :  https://www.syncfusion.com/downloads/support/forum/143706/ze/Uploader_dotnetcore-1151681847  

 

 

[Index.cshtml] 

 

<div class="upload_Wrap">  

    <ejs-uploader id="UploadFiles" failure="onUplaodFail" actionComplete="FilerenderingHandler"  asyncSettings="@asyncSettings"></ejs-uploader> 

</div> 

 

<script> 

 

    var username = 'peter' 

    var user = 'azure_cli_user' 

    function onUplaodFail(args) { 

        var header = args.response.headers; 

        var statusMessage = header.slice(header.indexOf('status'), header.indexOf('date')); 

        statusMessage = statusMessage.slice(statusMessage.indexOf(',') + 1); 

        console.log(statusMessage); 

        //args.statusText = args.response.headers.slice(header.indexOf('status'), header.indexOf('.'));; 

    } 

    function FilerenderingHandler(args) { 

 

 

        if (document.getElementsByClassName('e-upload-fails')) { 

            var failureMessage = document.getElementsByClassName('e-upload-fails'); 

 

            for (var i = 0; i < failureMessage.length;i++ ) 

            document.getElementsByClassName('e-upload-fails')[i].innerHTML = "<span>One or more users failed</span> <br/> <span>Record with user name " + username + " has the incorrect number of values</span> <br/> <span>Record with user name " + user+" has the incorrect number of values</span>" 

        } 

        console.log(args); 

    } 

 

 

Thanks, 

Deepak R. 

 

 

 

[Peter]

Thanks Deepak, that is brilliant! Got it working in my solution, and looking good :) 

[Deepak Ramakrishnan]

Hi Peter, 

 

Thanks for your update. 

 

We are glad that your requirement has fulfilled . We are always happy to assist you if you need any further assistance. 

 

Thanks, 

Deepak R. 

[Dheeraj Verma]

Hi, I have similar requirement where I want to receive the errors in File upload from server. I can add that in Resonse headers from server. But I never recieve them in my angular applicaiton in 

onUploadFailure(args: any) {

    var header = args.response.headers;

    var statusMessage = header.slice(header.indexOf('status'), header.indexOf('date'));

    statusMessage = statusMessage.slice(statusMessage.indexOf(',') + 1);

    args.statusText = statusMessage.trim();

  }

[Priyanka Karthikeyan]

Hi Dheeraj Verma,

Thank you for the update. If you need to receive the custom header in the Failure event, you need to add the header in the save method on the server side as shown below.

 Response.Headers.Add("Access-Control-Expose-Headers", "ID");

Response.Headers.Add("ID", "Custom Message");

 Please find the client and server side sample for your reference.
 

Client: https://stackblitz.com/edit/angular-qukapg-ydbljkbx?file=src%2Fapp.component.html,src%2Fapp.component.ts,package.json

KB Reference: https://support.syncfusion.com/kb/article/14941/handling-custom-parameters-in-javascript-file-upload-control

Regards,

Priyanka K

Attachment: SyncfusionCoreUploader1174200444_(3)_21ec300a.zip