Integrated latest changes at 03-18-2025 4:30:43 AM

Author: SyncfusionBuild

ej2-vue/file-manager/how-to/pass-custom-value-to-server.md

@@ -10,13 +10,19 @@ domainurl: ##DomainURL##
 
 # Pass custom value to server in Vue File Manager component
 
-The Syncfusion Vue File Manager component allows you to pass custom values from the client to the server for various operations. This guide demonstrates how to implement this functionality for **Upload**, **Download**, and **GetImage** operations using the [`beforeSend`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforesend), [`beforeDownload`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforedownload), and [`beforeImageLoad`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforeimageload) events respectively.
+The Syncfusion Vue File Manager component allows seamless back-end server interaction by passing custom values. This enhances the functionality and security of file operations, particularly helpful for tasks like authentication, logging, or user role-based processing. In multi-user systems, it ensures file access permissions and actions are user-specific and secure. You can manage user-specific operations such as **Read**, **Delete**, **Rename**, **Create**, **Move**, **Copy**, **Details**, **Search**, **Upload**, **Download**, and **GetImage** using custom headers or query parameters. This guide demonstrates implementing these features using the [`beforeSend`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforesend), [`beforeDownload`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforedownload) and [`beforeImageLoad`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforeimageload) events. Let's explore how to achieve this in [`Physical file system provider`](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider).
 
-## Upload Operation
+## 1. Setting up the File Manager and provider
 
-To pass custom values during the upload operation, utilize the [`beforeSend`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforesend) event of the File Manager component.
+To create a basic File Manager component, start by following the easy steps in the [`Getting Started`](https://ej2.syncfusion.com/vue/documentation/file-manager/getting-started) guide. This will allow you to manage files and folders on your system, whether they are stored physically or in the cloud.
 
-### Client-side Implementation
+For connecting the File Manager to a physical file system, check out the [`Physical file provider`](https://ej2.syncfusion.com/vue/documentation/file-manager/file-system-provider#physical-file-system-provider) section. This part of the documentation will help you configure it correctly.
+
+## 2. Handling File Operations 
+
+After setting the File Manager component with the physical file system provider, you can handle file operations by passing custom values to the server. To pass custom values during the **Read**, **Delete**, **Rename**, **Create**, **Move**, **Copy**, **Details**, **Search** and **Upload** operations, utilize the [`beforeSend`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforesend) event of the File Manager component. This event allows you to modify the request before it is sent to the server. You can add custom headers to the request to pass additional information to the server.
+
+The `onBeforeSend` function is designed to enhance security by adding an authorization header to every outgoing AJAX request. Before a request is sent, this function is called, and it attaches the **Authorization** header with the value **User1** to the request. This ensures that the server can verify the request's authenticity and handle it accordingly.
 
 ```ts
 
@@ -59,7 +65,7 @@ export default {
 
 ```
 
-### Server-side Implementation (C#)
+In server-side, `FileOperations` and `Upload` methods access the **Authorization** header from the incoming HTTP request and perform the necessary operations.
 
 ```typescript
 
@@ -70,8 +76,6 @@ public class FileManagerController : Controller
     public object FileOperations([FromBody] FileManagerDirectoryContent args)
     {
         var header = HttpContext.Request.Headers["Authorization"];
-        this.root = (header == "User1") ? "wwwroot\\FileBrowser" : "wwwroot\\Files";
-        this.operation.RootFolder(this.basePath + "\\" + this.root);
         ...
     }
 
@@ -87,11 +91,10 @@ public class FileManagerController : Controller
 
 
 ```
-## Download Operation
-For the download operation, use the [`beforeDownload`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforedownload) event to send custom values to the server.
 
-### Client-side Implementation
+## 3. Handling Download Operation
 
+For the **download** operation, use the [`beforeDownload`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforedownload) event, setting [`useFormPost`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/beforeDownloadEventArgs/#useformpost) as false to use a fetch request to send the custom header in **beforeSend** event. Here an **Authorization** header is appended to fetch request headers with the value **User1**.
 
 ```ts
 
@@ -120,55 +123,12 @@ export default {
     },
     methods: {
         onBeforeDownload: function (args) {
-            args.cancel = true;
-            if(args.data){
-                var obj= {
-                action: 'download',
-                path: args.data.path,
-                names:args.data.names,
-                data: args.data.data,
+            args.useFormPost = false;
+            if (args.ajaxSettings) {
+                (args.ajaxSettings as any).beforeSend = function (args: any) {
+                    args.fetchRequest.headers.append('Authorization', 'User1');
                 };
             }
-            var xhr = new XMLHttpRequest();
-            xhr.open(
-                'POST',
-                'http://localhost:{port}/api/FileManager/Download',
-                true);
-            xhr.responseType = 'blob';
-            xhr.onload = function () {
-                if (this.status === 200) {
-                    var name = '';
-                    // Getting file name from content-disposition header
-                    let header = xhr.getResponseHeader('Content-Disposition');
-                    if (header && header.indexOf('attachment') !== -1) {
-                        var regex = /name[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-                        var matches = regex.exec(header);
-                        if (matches != null && matches[1])
-                            name = matches[1].replace(/['"]/g, '');
-                    }
-                    //saving the file locally using anchor tag
-                    var blob = new Blob([this.response], {
-                        type: xhr.getResponseHeader('Content-Type'),
-                    });
-                    var anchorUrl = window.URL.createObjectURL(blob);
-                    if (name) {
-                        var anchor = document.createElement('a');
-                        anchor.href = anchorUrl;
-                        anchor.download = name;
-                        anchor.click();
-                    } else {
-                        window.location = anchorUrl;
-                    }
-                    setTimeout(function () {
-                        URL.revokeObjectURL(anchorUrl);
-                    }, 100);
-                }
-            };
-            var fdata = new FormData();
-            fdata.append('downloadInput', JSON.stringify(obj));
-            //Custom Header Added to XHR
-            xhr.setRequestHeader('Authorization', 'User1');
-            xhr.send(fdata);
         },
     }
      provide: {
@@ -178,24 +138,21 @@ export default {
 
 ```
 
-### Server-side Implementation (C#)
+In server-side, `Download` method access the **Authorization** header from the incoming HTTP request and perform the necessary operations.
 
 ```typescript
 [Route("Download")]
-public IActionResult Download(string downloadInput)
+public object Download([FromBody] FileManagerDirectoryContent args)
 {
-    var header = Request.Headers["Authorization"].ToString();
-    Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
+    var header = HttpContext.Request.Headers["Authorization"];
     ...
 }
 
 ```
 
-## GetImage Operation
-
-For the GetImage operation, use the [`beforeImageLoad`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforeimageload) event to pass custom values as query parameters.
+## 4. For GetImage Operation
 
-### Client-side Implementation
+For the **GetImage** operation, use the [`beforeImageLoad`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/#beforeimageload) event to pass custom value. Since the **GetImage** operation doesn't support custom headers in HTTP requests, pass the custom values along with [`imageUrl`](https://ej2.syncfusion.com/vue/documentation/api/file-manager/beforeImageLoadEventArgs/#imageurl) using query parameters instead.
 
 ```ts
 
@@ -234,7 +191,7 @@ export default {
 
 ```
 
-### Server-side Implementation (C#)
+In server-side, you can able to get the custom query parameter value using **Authorization** in `GetImage` method. To get the  custom query parameter value, extend the `FileManagerDirectoryContent` class and add the custom property **Authorization**.
 
 ```typescript
 
@@ -261,22 +218,6 @@ public class FileManagerAccessController : Controller
 
 ```
 
-## Implementing custom value transfer in Syncfusion File Manager with server-side integration.
-
-The below file system provider allows the users to access and manage the file system which includes the server side code for custom values passing from client. To get started, clone the [provider](https://github.com/SyncfusionExamples/How-to-pass-custom-values-from-client-to-server-in-filemanager) using the following command.
-
-```typescript
-
-git clone https://github.com/SyncfusionExamples/How-to-pass-custom-values-from-client-to-server-in-filemanager  How-to-pass-custom-values-from-client-to-server-in-filemanager
-
-```
-
-After cloning, just open the project in Visual Studio and restore the NuGet packages. The root directory of the provided file system in the File Manager controller is **Files** for **User1**. Now, just build and run the project.
+> **Note:** View the complete [Github sample](https://github.com/SyncfusionExamples/How-to-pass-custom-values-from-client-to-server-in-filemanager) which includes all the above event along with service code for passing custom values to server.
 
-Run the sample which includes all the above event for passing custom values to server: [How-to-pass-custom-values-from-client-to-server-in-File-Manager](https://stackblitz.com/edit/custom-values-from-client-to-server-in-vue-filemanager?file=src%2FApp.vue)
-
-```ts
-url: "http://localhost:{port}/api/FileManager/FileOperations", // Replace {port} with host wherever used.
-```
 
-The project will be hosted and map the local host in the **ajaxSettings** property of the File Manager component.

ej2-vue/file-manager/upload.md

@@ -124,10 +124,10 @@ If you want to allow only image files like .jpg and .png, you would set the prop
 
 The File Manager component provides support for external drag-and-drop functionality for uploading files by dragging it from local file system to File Manager.
 
-Setting [allowDragAndDrop](https://ej2.syncfusion.com/vue/documentation/api/file-manager#allowdraganddrop) property to false will not prevent the file upload operation through external drag and drop. It will only prevent drag and drop action within the File Manager component
-
 To completely prevent the external drag-and-drop upload functionality (i.e., disallowing users from dragging and dropping files from outside into the File Manager), you can set the [dropArea](https://ej2.syncfusion.com/vue/documentation/api/uploader#droparea) property to null. This can be done by accessing the File Manager instance via its class methods.
 
+>**Note:** Setting [allowDragAndDrop](https://ej2.syncfusion.com/vue/documentation/api/file-manager#allowdraganddrop) property to false will not prevent the file upload operation through external drag and drop. It will only prevent drag and drop action within the File Manager component.
+
 The following example demonstrates how to prevent the external drag and drop upload actions for all types of files in the File Manager component.
 
 {% tabs %}