Merge pull request #4363 from syncfusion-content/965445-getimag

Updated UG document for new feature in get image

Author: Indhumathy-Loganathan

ej2-asp-core-mvc/file-manager/how-to/pass-custom-value-to-server.md

@@ -181,7 +181,7 @@ public object Download([FromBody] FileManagerDirectoryContent args)
 
 ## 4. For GetImage Operation
 
-For the **GetImage** operation, use the **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** using query parameters instead.
+For the **GetImage** operation, use the **beforeImageLoad** event. Inside this event, set **useImageAsUrl** to false to instruct the FileManager not to load the image directly via its URL but instead to use a fetch request. Here, attach the **Authorization** header with the value **User1** within the beforeSend event of the ajaxSettings.
 
 {% if page.publishingplatform == "aspnet-core" %}
 ```ts
@@ -200,7 +200,14 @@ For the **GetImage** operation, use the **beforeImageLoad** event to pass custom
 <script>
     function beforeImageLoad(args) {
       // Add custom parameter in image URL
-      args.imageUrl = args.imageUrl + "&Authorization=" + "User1";
+      args.useImageAsUrl = false;
+      // Check if ajaxSettings are present in the arguments
+      if (args.ajaxSettings) {
+          (args.ajaxSettings).beforeSend = function (args) {
+          // Append Authorization header with value 'User1' to fetchRequest headers
+          args.fetchRequest.headers.append('Authorization', 'User1');
+          };
+      }
     }
 </script>
 
@@ -222,38 +229,31 @@ For the **GetImage** operation, use the **beforeImageLoad** event to pass custom
 
 <script>
     function beforeImageLoad(args) {
-      // Add custom parameter in image URL
-      args.imageUrl = args.imageUrl + "&Authorization=" + "User1";
+        // Add custom parameter in image URL
+        args.useImageAsUrl = false;
+        // Check if ajaxSettings are present in the arguments
+        if (args.ajaxSettings) {
+            (args.ajaxSettings).beforeSend = function (args) {
+            // Append Authorization header with value 'User1' to fetchRequest headers
+            args.fetchRequest.headers.append('Authorization', 'User1');
+            };
+        }
     }
 </script>
 ```
 {% endif %}
 
-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**.
-
+In server-side, `GetImage` method access the **Authorization** header from the incoming HTTP request and perform the necessary operations.
 ```typescript
 
-public class FileManagerAccessController : Controller
+// gets the image(s) from the given path
+[Route("GetImage")]
+public object GetImage([FromBody] FileManagerDirectoryContent args)
 {
-    ...
-    public class FileManagerDirectoryContent1 : FileManagerDirectoryContent
-    {
-        public string Authorization { get; set; }
-    }
-    ...
-
-    // gets the image(s) from the given path
-    [Route("GetImage")]
-    public IActionResult GetImage(FileManagerDirectoryContent1 args)
-    {
-        var header = args.Authorization;
-        return this.operation.GetImage(args.Path, args.Id, false, null, null);
-    }
-
-    ...
+    var header = args.Authorization;
+    return this.operation.GetImage(args.Path, args.Id, false, null, null);
 }
 
-
 ```
 
 > **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.