Skip to content

DOCINFRA-2341_merged_using_automation #575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 18, 2025
Merged

DOCINFRA-2341_merged_using_automation #575

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 24 additions & 83 deletions ej2-vue/file-manager/how-to/pass-custom-value-to-server.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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);
...
}

Expand All @@ -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

Expand Down Expand Up @@ -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: {
Expand All @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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.
4 changes: 2 additions & 2 deletions ej2-vue/file-manager/upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down