Authorization Header

[Yonz]

Hi Team,

is it possible to add Authorization Bearer Token to ajaxSettings? 

Regards,

Yonz

[Prasanth Madhaiyan]

Hi Yonz,

Greetings from Syncfusion support.

Yes, you can pass the Authorization header from the client to the server for the Angular FileManager component and perform the required functionality on your end.

However, we have already documented this in our documentation. To learn more, you can refer to the link below.

https://ej2.syncfusion.com/angular/documentation/file-manager/how-to/pass-custom-value-to-server

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Yonz]

Hi Prasanth, 

I've implemented the code from the provided link and confirmed that all functions operate as expected, with the exception of the delete button functionality after file upload. Please refer to the attached image for context.

[Prasanth Madhaiyan]

Hi Yonz,

Based on the shared details, we have reviewed your query and understand that you want to delete the uploaded file when clicking the delete icon in the upload dialog.

To achieve this, we recommend binding the Uploader component's removing event within the FileManager component's created event handler. When the delete icon is clicked, the removing event will be triggered.

Within this event, we suggest using the customFormData argument to send the necessary request data to remove the uploaded file from the server. This implementation enables file removal from both the FileManager component and the upload dialog.

Refer to the below code snippets.

[app.component.html]

...

<div class="sample-container">

  <ejs-filemanager

    id="overview"

    #filemanager

    [ajaxSettings]="ajaxSettings"

    (beforeSend)="onBeforeSend($event)"

    (beforeDownload)="onBeforeDownload($event)"

    (beforeImageLoad)="onBeforeImageLoad($event)"

    (created)="OnCreated()"

  >

  </ejs-filemanager>

</div>

[app.component.ts]

...

export class AppComponent {

  @ViewChild('filemanager') fileObject: FileManagerComponent;

  ..

  OnCreated() {

    var fmObj = this.fileObject;

    this.fileObject.uploadObj.removing = function (args) {

      if (args.event != null) {

        args.customFormData = [

          { path: fmObj.path },

          { size: args.filesData.size },

          { action: 'remove' },

          { data: null },

          { filename: args.filesData.name },

        ];

      }

      if (fmObj.uploadObj.fileList.length == 1) {

        fmObj.uploadDialogObj.hide();

      }

    };

  }

  ...

}

...

For your reference, we have attached the sample and service provider. 

Sample: https://stackblitz.com/edit/angular-xn9ymdvm-2cxrpgdx?file=src%2Fapp.component.html

Service provider: Attached as a zip file. 

Check out the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: ej2aspcorefileprovider_f656f010.zip

[Yonz]

Hi Prasanth,

Even after implementing the code you provided, the delete function in the upload dialog is still not sending the authorization header to my web service. Furthermore, I've noticed that the delete action is incorrectly triggering the upload function on the web service instead of the intended file operation.

Regards,
Yonz

[Prasanth Madhaiyan]

Hi Yonz,

Based on the shared details, it appears there was a misunderstanding regarding the delete functionality in the upload dialog on your end.

We would like to clarify that the delete action in the upload dialog does not trigger the FileOperation method’s delete action. Instead, it triggers the Upload method’s remove action in the service to remove the uploaded file in the FileManager component.

Please refer to the code links below for more details.

https://github.com/SyncfusionExamples/How-to-pass-custom-values-from-client-to-server-in-filemanager/blob/master/Controllers/FileManagerController.cs#L114

https://github.com/SyncfusionExamples/How-to-pass-custom-values-from-client-to-server-in-filemanager/blob/master/Models/PhysicalFileProvider.cs#L1345

Additionally, could you please share your exact requirement related to the delete functionality in the upload dialog? Based on that, we will review the scenario and provide you with a prompt solution. Kindly get back to us with the requested details.

Regards,

Prasanth Madhaiyan.

[Yonz]

Hi Prasanth,

Thank you for clarifying that triggering the "remove" action in the Upload dialog calls the Upload method.

My concern, however, is that the  remove action does not seem to be passing the Authorization header to the server. This is preventing successful deletion of the uploaded files. Please see the code below for your reference.

<ejs-filemanager [height]="dynamicHeight(70)" #fileManager id='file-manager' [ajaxSettings]='ajaxSettings'

        [toolbarSettings]="toolbarSettings"

        [contextMenuSettings]="contextMenuSettings"

        [navigationPaneSettings]='navigationPaneSettings'

        [uploadSettings]="uploadSetttings"

        [detailsViewSettings]="detailsViewSettings"

        [showItemCheckBoxes]="false"

        [enableRangeSelection]="true"

        [allowMultiSelection]="true"

        [view]="view"

        (beforeSend)="onBeforeSend($event)"

        (beforeDownload)="onBeforeDownload($event)"

        (beforeImageLoad)="onBeforeImageLoad($event)"

        (created)="onCreated()">

 </ejs-filemanager>

onBeforeSend(args: BeforeSendEventArgs): void {

    var token = this.auth.Token;

    if( args.ajaxSettings){

        (args.ajaxSettings as any).beforeSend = function (args: any) {

            args.httpRequest.setRequestHeader('Authorization', `Bearer ${token}`);

        };

    }

  }

[Prasanth Madhaiyan]

Hi Yonz,

Based on the shared details, we understand that your requirement is to set a custom header during the uploader component’s removing event. To achieve this, you can use the following code snippet:

[app.component.ts]

...

export class AppComponent {

  ...

  OnCreated() {

    var fmObj = this.fileObject;

    this.fileObject.uploadObj.removing = function (args) {

      if (args.event != null) {

        args.currentRequest.setRequestHeader('Authorization', 'User1');

        args.customFormData = [

          { path: fmObj.path },

          { size: args.filesData.size },

          { action: 'remove' },

          { data: null },

          { filename: args.filesData.name },

        ];

      }

      if (fmObj.uploadObj.fileList.length == 1) {

        fmObj.uploadDialogObj.hide();

      }

    };

  }

}

Server-side code: 

[FileManagerController.cs]

public class FileManagerController : Controller

{

    ...

    // uploads the file(s) into a specified path

    [Route("Upload")]

    public IActionResult Upload(string path, long size, IList<IFormFile> uploadFiles, string action)

    {

        var header = HttpContext.Request.Headers["Authorization"];

        ...

    }

    ...

}

For your reference, we have attached the sample and service provider. 

Sample: https://stackblitz.com/edit/angular-xn9ymdvm-jyqn9svd?file=src%2Fapp.component.html

Service provider: Attached as a zip file.

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: ej2aspcorefileprovider_b42e7605.zip

[Yonz]

Hi Prasanth,

Thank you so much for your help with the code you provided. I've implemented it, and it's working perfectly.

Best regards,

Yonz

[Prasanth Madhaiyan]

Hi Yonz,

Glad to know that the solution provided helped. Please get back to us for assistance in the future.

Regards,

Prasanth Madhaiyan.