1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How do I handle an uploaded file in a custom action?

How do I handle an uploaded file in a custom action?

I'm looking to use the uploader and manage the files in a custom action, however I can't seem to find how to access the file properties in the controller.
I'm able to set the appropriate settings

..... AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/MyController/SaveAttachment", .....

I've verified via breakpoints in debugging that the action is successfully called, but I don't know what to put in as a parameter to access any content.

In the old UploadBox it appears that it could be accessed through IEnumerable<HttpPostedFileBase> but I can't find any documentation for the equivalent when using the Uploader control, all the examples have "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" documentation defined which doesn't really help in this scenario.

Thank you in advance,
Nathan 


10 Replies
NA Nathan May 31, 2018 01:30 AM UTC

I believe I've resolved the issue, it turns out that the input name was different to the IEnumerable<HttpPostedFileBase> variable name. Once I amended the names I can successfully access the file details.


KR Karthik Ravichandran Syncfusion Team May 31, 2018 12:22 PM UTC

Hi Nathan, 
 
Sorry for the inconvenience. 
 
We have checked your query. We would like to inform you that, you can access the selected files in the server side by using the uploader name attribute. If the name attribute is not present, component id will be considered as name value.  
 
Please refer the below code snippet. 
 
 
[csHtml] 
 
@Html.EJS().Uploader("UploadFiles").AutoUpload(false).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/Home/Save", RemoveUrl = "/Home/Remove" }).Render() 
 
[controller] 
 
[AcceptVerbs("Post")] 
public void Save() 
{ 
        if (System.Web.HttpContext.Current.Request.Files.AllKeys.Length > 0) 
        { 
            // Get the files using the name attribute as a key. 
            var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"]; 
 
            if (httpPostedFile != null) 
            {                         
                var fileSave = System.Web.HttpContext.Current.Server.MapPath("UploadedFiles"); 
                if (!Directory.Exists(fileSave)) 
                { 
                    Directory.CreateDirectory(fileSave); 
                } 
                var fileSavePath = Path.Combine(fileSave, httpPostedFile.FileName); 
                if (!System.IO.File.Exists(fileSavePath)) 
                {    /*To save files at server*/ 
                    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 = "400 File already exists"; 
                    Response.StatusCode = 400; 
                    Response.StatusDescription = "File already exists"; 
                    Response.End(); 
                } 
            } 
        } 
} 
 
 
[AcceptVerbs("Post")] 
public void Remove() 
{ 
 
    try 
    { 
        var fileSave = System.Web.HttpContext.Current.Server.MapPath("UploadedFiles"); 
        var fileName = System.Web.HttpContext.Current.Request.Files["UploadFiles"].FileName; 
        var fileSavePath = 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 = "404 File not found"; 
        Response.StatusCode = 404; 
        Response.StatusDescription = e.Message; 
        Response.End(); 
    } 
} 
 
 
We have showcased our server sider action steps in below MVC online demo link.  
 
For your convenience we have prepared the sample and attached in the below link. 
 
We have planned to include uploader server-side codes with our UG documentation in all platforms, we will let you know once it has been published. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


NA Nathan June 4, 2018 07:56 AM UTC

That's excellent, thank you for the response. I've been able to set up my sever side handling code successfully.
I have come across one more issue however, it looks like when I pre-load file information in to the loader and try to remove them the System.Web.HttpContext.Current.Request.Files property is null. If I add a new file and remove it, all works fine but trying to remove a pre-loaded file doesn't seem to post the same information.
Is this a known issue or is it perhaps something I may be doing wrong in setting up the data source?

Kind Regards,
Nathan Pelle

KR Karthik Ravichandran Syncfusion Team June 5, 2018 11:18 AM UTC

Hi Nathan, 
 
Thanks for your update. 
 
We have checked your query. Your reported issue is a bug and we have already fixed it in our side. Fix for this issue will be included in our upcoming main release for volume 2, 2018. 
As a workaround, you can achieve your requirement by adding the file name in argument of uploading and removing event. Please refer the below code block. 
 
[component.html] 
<ejs-uploader #defaultupload  [asyncSettings]='path' (uploading) = 'Uploading($event)' (removing) = 'Removing($event)'></ejs-uploader> 
 
[component.ts] 
 
public path: Object = { 
  saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', 
  removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' 
}; 
 
public Uploading = (args) => { 
  var data = []; 
  data.push({ name: args.fileData.name }); 
  args.customFormData = data; 
} 
 
public Removing = (args) => { 
  var data = []; 
  data.push({ name: args.filesData[0].name }); 
  args.customFormData = data; 
} 
 
 
You can get the files in server end by using below code. 
 
[uploader server handler] 
 
HttpContext.Current.Request.Form["key"]     // uploader name attribute will be a key 
 
 
For your convenience we have prepared the sample in the below link.  
 
The workaround solution will work after upgrade the release also. Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


NA Nathan July 27, 2018 07:12 AM UTC

Hi, I've noticed that this bug still seems to be present after upgrading to the newest version following the major release.
Is there something I need to update to get it to work? Or do I need to continue using the work around?

Cheers,
Nathan

KR Karthik Ravichandran Syncfusion Team July 28, 2018 05:15 PM UTC

Hi Nathan, 
 
Thanks for your update. 
 
We have provided built-in support to access file data when on remove the preload file also. So, we no need to continue using workaround solution. We were not able to reproduce the reported issue in our end with our latest package (v16.2.45).   
-                      Could you please confirm whether you upgraded your package to v16.2.45 version? 
-                      Remove the workaround solution and access the file data from server.  
[uploader server handler]  
HttpContext.Current.Request.Form["key"]     // uploader name attribute will be a key  

If you are still facing the same issue, could you please share more information to replicate the issue in our end along with ej2-ng-inputs package version details which you have used in your application. This will help us to provide the solution at earliest. 
 
Regards, 
Rajendran R

NA Nathan July 30, 2018 01:08 AM UTC

Thanks for your response, further detail below:
- Can confirm I've updated to the latest package.

- My uploader definition is as follows

@Html.EJS().Uploader("fileUploader").DropArea(".e-upload").AutoUpload(true).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/MyController/SaveAttachment", RemoveUrl = "/MyController/RemoveAttachment" }).Success("onUploadSuccess").Files((System.Collections.Generic.List<Syncfusion.EJ2.Inputs.UploaderUploadedFiles>)ViewBag.existingAttachments).Render()

- The removal function in the controller



If I upload a file and then remove it, everything is fine and the fileUploader variable contains information


If I then load my form with a pre-loaded attachment and try to remove it I get the following:


I hope this outlines the issue I'm having a bit better.

Kind regards,
Nathan

RR Rajendran R Syncfusion Team July 30, 2018 12:22 PM UTC

Hi Nathan, 
 
Thanks for update clear details to replicate this issue in our end.  
 
We would like to inform you that we send filename alone to the server-end for remove action of preload-file functionality. Since we couldn’t get complete “rawFile” details on enable preload-file. So, we need to receive file details as FormCollection on enable preload-files. As per shared code block, you have received argument as HttpPostedFileBase. It will applicable for the file selected manually.  
 
To resolve this issue, you can receive file details as FormCollection by set postRawFile option as false in removing event. It works both preload-files and manually select the file scenario.  
 
Please refer to the below code block: 
@Html.EJS().Uploader("fileUploader").DropArea(".e-upload").AutoUpload(true).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "/Home/SaveAttachment", RemoveUrl = "/Home/RemoveAttachment" }).Files((System.Collections.Generic.List<Syncfusion.EJ2.Inputs.UploaderUploadedFiles>)ViewBag.existingAttachments).Removing("onFileRemove").Render() 
 
 
<script> 
 
function onFileRemove(args) { 
    args.postRawFile = false;   /* It will sent only the file name to delete action in server end */ 
} 
</script> 
 
In server-end, you can receive as FormCollection type. Please refer to the below code block. 
public void RemoveAttachment(FormCollection fileUploader) 
{ 
            // Your code here 
} 
 
For your convenience, we have prepared the sample in the below link. 
https://www.syncfusion.com/downloads/support/forum/137839/ze/preloadFilesMVC393267924.zip

Please look at this sample and let us know whether it meets your requirement. Please let us know if you need further assistance. 
 
Regards, 
Rajendran R 


NA Nathan August 1, 2018 05:34 AM UTC

Thank you for the response and information.
It looks like in your attached example the FormCollection variable isn't actually used.
Either way I've managed to get enough functionality using the different methods described to achieve what I need to now so all good.


KV Karthikeyan Viswanathan Syncfusion Team August 2, 2018 06:26 AM UTC

Hi Nathan,  
 
We are glad to know that your issue is resolved.   
 
Regards, 
Karthikeyan V. 


Loader.
Up arrow icon