1. Home
  2. Forum
  3. Angular - EJ 2
  4. Uploader’s Back-End Controller

Uploader’s Back-End Controller

Hello,


I want to use your EJ 2 Uploader for my Angular app but I couldn’t find an example of what my C# REST controller should have or look like.


Could you please point me to where I’d find an example of it?


I’m thinking of something like the controller that is listening to your example in the URL: https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save


Thank you for your help.


9 Replies
KR Karthik Ravichandran Syncfusion Team May 9, 2018 11:03 AM UTC

Hi Alberto, 

Thanks for contacting Syncfusion support. 

We have checked your query.  We would like to inform you that we have showcased uploader server-side codes in our MVC samples now. You can create own service application based on it.  Please refer the below link. 


We will include the corresponding reference in Angular user guide documentation also in the upcoming release Volume 2, 2018. Please let us know if you need further assistance on this. 
  
Regards, 
Karthik R

AV Alberto Vázquez May 9, 2018 04:55 PM UTC

I manage to replicate it without issues.

Thank you for your help Karthik R.

KR Karthik Ravichandran Syncfusion Team May 10, 2018 05:04 AM UTC

Hi Alberto, 
 
Most welcome, please revert us if you face any problem, we will happy to assists you. 
 
Regards, 
Karthik R 


RB Ronald Brown June 20, 2018 10:48 PM UTC

I know this has only been a little over a month ago but is there any update on the Angular backend implementation? I'm currently using Angular 6 with .NET Core 2.1 and looking for some assistance. :)

KR Karthik Ravichandran Syncfusion Team June 25, 2018 12:18 PM UTC

Hi Ronald, 
 
Thanks for your update. 
 
Based on your query, we have prepared the uploader sample using angular with dot.net core and attached in the below link. 
 
 
Kindly have a look at the sample and confirm whether your requirement meet in this sample. Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


RB Ronald Brown June 25, 2018 10:25 PM UTC

Thank you for the update and example Karthik. I was able to get your sample working on my local instance, however when I try to move your implementation to my own project which has token based bearer authentication it is not working.  To get this to work with my project I needed to change [AcceptVerbs("Post")] to [HttpPost("[action]")] which will produce successful results from Postman, but unless I change my method attribute to AllowAnonymous (which I do not want to do) I will get a 401 exception when trying to run the example in the web browser.  Is there something I'm missing from an authentication standpoint I need to address for the asyncsettings property on this tool?

Thanks again for the prompt assistance!

EDIT:

After reviewing further in my team's project I realize that all outgoing requests via the Angular HttpClient are being set with an Authorization header with our Bearer token. So I guess my question now is, how can I set an Authorization header on the Save logic for the Uploader tool, as it seems that the interceptor we are using is not hitting it for some reason.

KR Karthik Ravichandran Syncfusion Team June 26, 2018 08:48 AM UTC

Hi Ronald, 
 
Thanks for your update. 
 
We have checked your query and you can achieve your requirement (“Adding custom headers on save and remove action”) by using uploading and removing events of uploader component.  
 
Please refer the below code block. 
 
<ejs-uploader id="UploadFiles" [asyncSettings]="path" (uploading) = "addHeaders($event)" (removing) = "addHeaders($event)"> 
</ejs-uploader> 
 
 
public addHeaders(args: any) { 
    args.currentRequest.setRequestHeader('custom-header', 'Syncfusion'); 
} 
 
 
For your convenience, we have prepared the sample in the below link. 
 
To know more details about adding headers, please refer the below documentation link. 
 
Note: The feature “Adding custom headers in AJAX request” is available from 16.1.38 release version. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


ED Edgar Drozdov March 2, 2019 11:00 PM UTC

What is 

Response.Clear();
Response.StatusCode = 204;
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = JsonUtils.Serialize(uploadResult);

I have e.g. net core ApiController 
the way of returning response is Ok(result);
where result contains processed renamed file with additional info.
How I can get this info if in args.response on client side I have only data before uploading and "File Uploaded Successfully"

PO Prince Oliver Syncfusion Team March 4, 2019 11:25 AM UTC

Hi Edgar, 

Thank you for you contacting Syncfusion support. 

Query 1: What is Reponse.clear(), Response.statusCode and phraseDescription? 

After the server-side actions gets completed, we need to send the response to client side with proper status code and details. By using Response.clear() we have cleared the details from http and have updated the details in the response.  

In our samples, we will not allow to save the files in our server due to security reasons. So, to display the selected files in success state we have return the status code as 204.  

Phrase descriptions are used to send the custom messages from server side to client side. But it will work up to dot net core 2.0 only. Dot net core 2.1 and above versions doesn’t have a reasonPhrase support, we need to send the custom data using headers only. Please refer the below code block. 

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

For further details, kindly refer the below link. 

Query 2: the way of returning response is Ok(result) where result contains processed renamed file with additional info 

You can get the additional data from the server by using the argument “e” in success/failure events. Please refer the below screenshot. 

 

Please let us know if you need any further assistance on this. 

Regards, 
Prince 


Loader.
Up arrow icon