1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Working Example with Razor Page

Working Example with Razor Page

Is there a working example of the Uploader with a Razor Page. I can test out the sample code using a MVC controller but not with a Razor Page.

I've tried something like the following on the page

var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/Projects/Responses/Index?handler=Save" };

And this method in class file

public IActionResult OnPostSave(IList<IFormFile> UploadFiles) {
...
}

But it's not called.

5 Replies
RR Rajendran R Syncfusion Team July 27, 2018 12:31 PM UTC

Hi Brad, 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query and we would like to inform you that the MVC sample browser and documentation section published with Razor page.  
 
 
Based on your requirement, we have prepared the sample with razor page and local file handler.  Please refer the below code block. 
 
[csHtml] 
 
@Html.EJS().Uploader("UploadFiles").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("/Home/Save"), RemoveUrl = @Url.Content("/Home/Remove") }).Removing("onFileRemove").Render() 
 
[script] 
 
function onFileRemove(args) { 
    //To pass only the file name for delete action 
    args.postRawFile = false; 
} 
 
[controller] 
 
[AcceptVerbs("Post")] 
public void Save() 
{ 
    try 
    { 
        if (System.Web.HttpContext.Current.Request.Files.AllKeys.Length > 0) 
        { 
            var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"]; 
 
            if (httpPostedFile != null) 
            { 
                var fileSave = System.Web.HttpContext.Current.Server.MapPath("UploadedFiles"); 
                var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName); 
                if (!System.IO.File.Exists(fileSavePath)) 
                { 
                    httpPostedFile.SaveAs(fileSavePath); 
                    HttpResponse Response = System.Web.HttpContext.Current.Response; 
                    Response.Clear(); 
                    Response.ContentType = "application/json; charset=utf-8"; 
                    Response.StatusDescription = "File uploaded succesfully"; 
                    Response.End(); 
                } 
                else 
                { 
                    HttpResponse Response = System.Web.HttpContext.Current.Response; 
                    Response.Clear(); 
                    Response.Status = "204 File already exists"; 
                    Response.StatusCode = 204; 
                    Response.StatusDescription = "File already exists"; 
                    Response.End(); 
                } 
            } 
        } 
    } 
    catch (Exception e) 
    { 
        HttpResponse Response = System.Web.HttpContext.Current.Response; 
        Response.Clear(); 
        Response.ContentType = "application/json; charset=utf-8"; 
        Response.StatusCode = 204; 
        Response.Status = "204 No Content"; 
        Response.StatusDescription = e.Message; 
        Response.End(); 
    } 
} 
 
[AcceptVerbs("Post")] 
public void Remove() 
{ 
    try 
    { 
        var fileSave = System.Web.HttpContext.Current.Server.MapPath("UploadedFiles"); 
        var fileName = System.Web.HttpContext.Current.Request.Form["UploadFiles"]; 
        var fileSavePath = Path.Combine(fileSave, fileName); 
        if (System.IO.File.Exists(fileSavePath)) 
        { 
            System.IO.File.Delete(fileSavePath); 
        } 
    } 
    catch (Exception e) 
    { 
        HttpResponse Response = System.Web.HttpContext.Current.Response; 
        Response.Clear(); 
        Response.Status = "200 OK"; 
        Response.StatusCode = 200; 
        Response.ContentType = "application/json; charset=utf-8"; 
        Response.StatusDescription = "File removed succesfully"; 
        Response.End(); 
    } 
} 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Rajendran R 
 


BP Brad Patton July 27, 2018 01:43 PM UTC

The example you supplied uses a MVC Controller and a View (using Razor syntax). 

I'm talking about the new Razor Pages in ASP.NET Core. Is there a working example for that?

BM Balaji M Syncfusion Team August 1, 2018 05:54 PM UTC

Hi Brad, 
 
Thanks for your update. 
 
Based on your requirement we have prepared the sample with Razor pages in ASP.Net core using AntiForgeryTokens. Please refer the below code block.
 
[Index.csHtml] 
 
@{ 
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "http://localhost:50707/Index?handler=Save", RemoveUrl = "http://localhost:50707/Index?handler=Remove" }; 
} 
 
@Html.AntiForgeryToken() 
 
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" multiple="false" autoUpload="false" uploading="addTokens"></ejs-uploader> 
 
 
<script> 
    function addTokens(args) { 
        args.currentRequest.setRequestHeader('XSRF-TOKEN', document.getElementsByName('__RequestVerificationToken')[0].value); 
    } 
</script> 
 
[Startup.cs] 
 
public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddMvc().AddJsonOptions(x => 
    { 
        x.SerializerSettings.ContractResolver = new DefaultContractResolver(); 
    }); 
    services.AddAntiforgery(o => o.HeaderName = "xsrf-token"); 
} 
 
[index.csHtml.cs] 
 
[AcceptVerbs("Post")] 
public IActionResult OnPostSave(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 = 204; 
                    Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists."; 
                } 
            } 
        } 
    } 
    catch (Exception e) 
    { 
        Response.Clear(); 
        Response.ContentType = "application/json; charset=utf-8"; 
        Response.StatusCode = 204; 
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "No Content"; 
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 
    } 
    return Content(""); 
} 
[AcceptVerbs("Post")] 
public IActionResult OnPostRemove(IList<IFormFile> UploadFiles) 
{ 
    try 
    { 
        foreach (var file in UploadFiles) 
        { 
            var fileName = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); 
            var filePath = Path.Combine(hostingEnv.WebRootPath); 
            var fileSavePath = filePath + "\\" + fileName; 
            if (!System.IO.File.Exists(fileSavePath)) 
            { 
                System.IO.File.Delete(fileSavePath); 
            } 
        } 
    } 
    catch (Exception e) 
    { 
        Response.Clear(); 
        Response.StatusCode = 200; 
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully"; 
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 
    } 
    return Content(""); 
} 
 
For your convenience, we have attached the sample in the below link. 
 
Kindly look at the sample and let us know whether it meets your requirement in your side and also let us know if you need further assistance on this. 
  
Regards, 
M. Balaji 


BP Brad Patton August 8, 2018 01:35 AM UTC

Thanks. I was able to get it working with your help.

BM Balaji M Syncfusion Team August 8, 2018 11:57 AM UTC

Hi Brad,  
  
Most welcome. We are happy to hear that reported query is solved.  
 
Regards, 
M. Balaji 


Loader.
Up arrow icon