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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom Error Message for File Upload

Thread ID:

Created:

Updated:

Platform:

Replies:

143706 Apr 2,2019 01:50 AM UTC Jun 17,2020 11:39 AM UTC ASP.NET Core - EJ 2 8
loading
Tags: File Upload
Mohd Mohaimin Zakaria
Asked On April 2, 2019 01:50 AM UTC

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 [Syncfusion]
Replied On April 2, 2019 05:47 AM UTC

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 


Mohd Mohaimin Zakaria
Replied On April 18, 2019 08:30 AM UTC

Hi.

Thanks for your help. It really helps.

Gopi Govindasamy [Syncfusion]
Replied On April 19, 2019 05:26 AM UTC

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 [Syncfusion]
Replied On April 19, 2019 05:27 AM UTC

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
Replied On December 18, 2019 10:22 PM UTC

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 [Syncfusion]
Replied On December 19, 2019 10:11 AM UTC

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
Replied On June 16, 2020 08:38 PM UTC

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 [Syncfusion]
Replied On June 17, 2020 11:39 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon