We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom Error Message for File Upload

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.

13 Replies

CI Christopher Issac Sunder K Syncfusion Team April 1, 2019 09:47 PM

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(""); 
} 
 

Please let us know if you require any further assistance. 

Thanks,
Christo 



MM Mohd Mohaimin Zakaria April 18, 2019 12:30 AM

Hi.

Thanks for your help. It really helps.


GG Gopi Govindasamy Syncfusion Team April 18, 2019 09:26 PM

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. 



GG Gopi Govindasamy Syncfusion Team April 18, 2019 09:27 PM

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. 



GB Greg Boyer December 18, 2019 02:22 PM

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



SP Sureshkumar P Syncfusion Team December 19, 2019 02:11 AM

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 



MS Michael Schletz June 16, 2020 12:38 PM

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;
    }


SP Sureshkumar P Syncfusion Team June 17, 2020 03:39 AM

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 



PE Peter October 25, 2021 09:13 PM

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?




DR Deepak Ramakrishnan Syncfusion Team October 27, 2021 07:51 AM

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 (29th,October 2021). We appreciate your patience until then. 
 
 
 
Thanks, 
Deepak R 



DR Deepak Ramakrishnan Syncfusion Team November 4, 2021 12:55 AM

 
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] 
 
 
 
 
 
[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. 
 
 
 



PE Peter replied to Deepak Ramakrishnan November 4, 2021 12:04 PM

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



DR Deepak Ramakrishnan Syncfusion Team November 7, 2021 10:51 PM

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon