1. Home
  2. Forum
  3. Angular - EJ 2
  4. Integrating Angular FileManager with C# web api hosted on AWS lambda

Integrating Angular FileManager with C# web api hosted on AWS lambda

Hello!

I have successfully integrated Angular FileManager component with .NET C# web API on my local machine. After deploying my web API, I am unable to request API from Angular app.

I have hosted my .NET web API on AWS Lambda and it can be accessed via API gateway. My lambda has access to the S3 folder. 

Two issues: 
1) It fails to send a request to server since I cannot find any FileOperations method execution in the logs.

Access to XMLHttpRequest at '/FileProvider/FileOperations' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST /FileProvider/FileOperations net::ERR_FAILED

2) Since the provided example and code requires access key Id and secret access key, I could not find a way to use temporary credentials to connect with S3. Do you suggest a way to use temporary credentials? Or I will have to create a key and access key to connect.

Any feedback will be helpful.

Thanks,
Samir

9 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team May 12, 2021 02:42 PM UTC

Hi Samir, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement. Please find the answer for your queries below. 
 
Query1: Issue with Allow origin 
 
We suspect that the reported issue occur due to CORS policy. We suggest you to follow the mentioned steps in the below link to resolve the issue.

https://jakeydocs.readthedocs.io/en/latest/security/cors.html#setting-up-cors 
 
Query 2: Temporary credentials for Amazon S3 bucket 
 
We have not used temporary credentials for Amazon. However on further analysis, we could see there is a way to use Temporary credentials in AWS. We suggest you to check the below link which explains the steps on how to use temporary credentials in Amazon S3 bucket. 
 
 
Please check the shared details and revert if you need any further assistance. 
 
Regards, 
Indhumathy L 


SP Samir Patel May 19, 2021 08:14 PM UTC

Thank you Indhumathy for feedback. 

After trial an error, I figured it out, it is due to the fact I was not passing security token for my API deployed to API gateway. My local API was not checking for security token.

However, I need help with beforeSend method to pass Authorization token. It seems the method only works in sync mode and fails to execute correctly with async mode. 

I am using AWS amplify library, to connect with AWS API gateway. To receive Bearer token, I need to call async method call from beforeSend method. 

If I copy the token directly in args.httpRequest.setRequestHeader, then it works. However, if I call the async method to call the token and tries to assign it fails. It seems beforeSend method does not wait to finish the call.

Any feedback or pointer in this case would be helpful.

Here is my code:
beforeSend(args: any) {
     let api: any = this.amplifyService.api();
     
     args.ajaxSettings.beforeSend = function (args) {
          let $args = args;
          api._restApi._api._options.endpoints[0].custom_header().then(
               data => {
                    console.log(JSON.stringify(data));
                    $args.httpRequest.setRequestHeader("Authorization", data.Authorization);
               });
          }
     }
}

Here is error message:
ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.
Error: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.

Thanks,
Samir

IL Indhumathy Loganathan Syncfusion Team May 20, 2021 03:26 PM UTC

Hi Samir, 
 
We checked your attached code and found that you are sending the token inside beforeSend method using async call. We would like to let you know that, the File Manager events does not wait for the completion of async API call to send request. So, you need to update your token attribute initially before the beforeSend event is triggered. The stored token value can be then passed through beforeSend event. 
 
To resolve your problem, you can use ngOnInit method or required methods(based on your application logic) to update the token values initially from async API call. Please refer to the following code block. 
 
public header: string = '';  
//Based on your application logic, you can update the token values  
public ngOnInit(): void { 
api._restApi._api._options.endpoints[0].custom_header().then( 
     data => { 
         this.header = data.Authorization; 
     }); 
} 
… 
beforeSend = (args) => {  
    var token = this.header; 
    args.ajaxSettings.beforeSend = ($args) => {  
      $args.httpRequest.setRequestHeader('Authorization', token);  
    };  
}  
 
For you reference, we have prepared a simple sample passing a static value as token. You can find the sample from below link. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Marked as answer
SP Samir Patel May 21, 2021 04:24 PM UTC

Thank you Indhumathy. Based on your feedback, I was able to send Auth token in request.

However, I cannot send Auth token for GetImage requests. 

After searching online, I came across this post.
https://www.syncfusion.com/forums/144270/how-to-implement-jwt-token-send-with-every-filemanager-request

Based on this, we don't have a way to pass Auth token for GetImage request. Does anything changed or updated from SyncFusion end? Does it allow now? This is critical on our end to require image access to only authenticated uses. Please let me know.

I understand Syncfusion stand on why auth token has not been implemented originally, however if you guys can look into a use case of secure file management then it would be great help. 

If it's not implemented and not available at moment, do you have any suggestion or workaround to handle get image requests for authenticated users only? 

If no workaround, is it possible to override or handle file click event? I can disable detail view and ignore showing/rendering images in the file manager to keep it secure. However, if I can override or handle image view popup when I click on the image name, then it would be great. If I can override the click event with custom data, then I can retrieve image securely and show it in the popup.

Thanks,
Samir



SS Sharon Sanchez Selvaraj Syncfusion Team May 24, 2021 12:55 PM UTC

Hi Samir, 

We checked with your requirements. 
Since we have used query string parameter to load images (GetImage) in File Manager and not a AJAX request, you can use custom attributes to validate the image request. We have discussed about the details (How to add custom data in GetImage support) in the below forum. Please refer to this forum and add the required details using custom data in your application level to achieve your requirement. 
  
  
Also, we have considered this as a feature, to provide auth token for GetImage functionality. This will be included in any one of the upcoming releases. 
  
Refer to the feedback link given below: 
  
  
You can hide the images in large icons view by setting showThumbnail as false, so that the images can be viewed by user only on double click of that particular image file.  
  
  
Please get back to us if you need further assistance.  
  
Regards, 
  
Sharon Sanchez S. 


SP Samir Patel May 26, 2021 09:16 PM UTC

Thank you Sharon. I will wait for updated component with authorization for getimage function. 

However, I am running into a strange issue. 

Running code locally, C# web api and Angular (frontend), a file is successfully uploaded to S3 folder (either text or png files). If I deployed the code, the logic runs successfully and the file is created on the respective S3 directory. 

However, on the production, an image file is file is created with extra size, and a text file is created with the same size.

For ex. tomato.png original file size - 51,069 bytes. 

As per log, the incoming file size 90371 bytes. 




2021-05-26T15:25:47.081-04:00

File upload start for : tomato.png




2021-05-26T15:25:47.081-04:00

name tomato.png




2021-05-26T15:25:47.081-04:00

fullName /tmp/tomato.png




2021-05-26T15:25:47.081-04:00

incoming file size90371




2021-05-26T15:25:47.082-04:00

new file size after writing to temp file 90371




2021-05-26T15:25:47.181-04:00

file upload complete for tomato.png : 90371 bytes



In the second example, a log for TestFile.rtf (text file) has the exact same size 378 bytes.




2021-05-26T16:59:28.575-04:00

File upload start for : TestFile.rtf




2021-05-26T16:59:28.575-04:00

name TestFile.rtf




2021-05-26T16:59:28.575-04:00

fullName /tmp/TestFile.rtf




2021-05-26T16:59:28.575-04:00

incoming file size378




2021-05-26T16:59:28.575-04:00

new file size after writing to temp file 378




2021-05-26T16:59:28.759-04:00

file upload complete for TestFile.rtf : 378 bytes



Based on my testing, it seems image file upload request sends extra bytes, and I am not sure why the production (AWS Lambda) is receiving text file correctly.  Next, I will try regular upload (without file manager).

Meanwhile, if you have noticed this issue before and have any feedback, please let me know. This is the only issue blocking me with File Manager before going fully live.

Thanks,
Samir


IL Indhumathy Loganathan Syncfusion Team May 27, 2021 02:03 PM UTC

Hi Samir, 
 
We checked the provided details at our end. We have not addressed any similar issues before. However, we have validated your reported query in File Manager component. We checked the image and text file uploading in both production and normal mode but unable to replicate the reported issue. Please find the details below. 
 
Mode 
Image File 
Text File 
Normal Mode 
Original size - 43.7 KB (43,700 bytes) 
 
Uploaded size - 43.8 KB (43,800 bytes) 
Original size - 22.6 KB (22,600 bytes) 
 
Uploaded size - 22.7 KB (22,700 bytes) 
 
Production Mode 
Original size - 43.7 KB (43,700 bytes) 
 
Uploaded size - 43.8 KB (43,800 bytes) 
Original size - 22.6 KB (22,600 bytes) 
 
Uploaded size - 22.7 KB (22,700 bytes) 
 
We doesn’t face huge bytes difference in AWS File Manager as mentioned. You can find the sample from below link. 
 
 
 
Kindly check the above sample. Meanwhile, ensure whether the issue occurs with a normal file upload(without File Manager).  
 
If the issue is specific to our File Manager component, please revert with a video on the issue or reproduce the issue in the above shared sample to assist you promptly. 
 
Regards, 
Indhumathy L 


SP Samir Patel May 28, 2021 02:24 PM UTC

Thank you Indhumathy.

After integrating the clean project you provided and doing research, I confirmed that the component and code you provided are working correctly. 

The issue I found is related with settings needed to update in AWS API gateway. I am just listing the details here, so it might be helpful if someone ran into similar issue.

Go to

"API" -> {YourAPI} -> "Settings"

There you will find "Binary Media Types" section.

Add following media type:

multipart/form-data

Save your changes.

Then Go to "Resources" -> "proxy method"(eg. "ANY") -> "Method Request" -> "HTTP Request Headers" and add following headers "Content-Type", "Accept".

Finally deploy your api.


REF: https://stackoverflow.com/questions/31645205/how-to-upload-file-to-lambda-function-or-api-gateway


One final question:

1) Is there a way to override show image dialog box on double click? Basically, instead of showing built in image dialog box when we double click on the image, can we show a custom dialog? If not, can I disable the double click event which shows a image dialog box? 


Thanks,

Samir




IL Indhumathy Loganathan Syncfusion Team May 31, 2021 11:04 AM UTC

Hi Samir, 
 
Most Welcome. 
 
We are glad to hear that the previous suggestions helped you. Please find the answer for your last query. 
 
Query: Disable the double click event which shows an image dialog box 
 
By cancelling the event in beforePopupOpen, you can prevent the opening of our default image preview popup. Please refer to the below code snippet.  
 
  beforePopupOpen(args) { 
    if (args.popupName == 'Image Preview') { 
      //Cancel the default image preview 
      args.cancel = true; 
    } 
  } 
 
 
After cancelling the popup, you can create and show your own customized dialog as per your requirement. Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Loader.
Up arrow icon