1. Home
  2. Forum
  3. Angular - EJ 2
  4. Upload operation customization with custom request data

Upload operation customization with custom request data


Hi Team,


We need to perform custom upload operation where in we want to send 2 extra parameters in the Upload AJAX request as shown below.


First we want to select the file from custom explorer dialog which opens up when Browse button is clicked and then select the values for destination path and access group from dropdown.

After selecting all parameters we want to validate it and send the Upload AJAX request on click of OK button from our custom dialog.


6 Replies
IL Indhumathy Loganathan Syncfusion Team June 24, 2021 10:25 AM UTC

Hi Rohit, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement in File Manager component. Yes, you can send additional custom values from client to server for upload action using File Manager beforeSend event. We have addressed similar query in the below forum. 
 
 
For Upload operation, you can send custom data in beforeSend event with the below way.  
 
  beforeSend: function(args) {  
        // Get the value you want to pass.  
          var value = "Destination";  
         if (args.action == "Upload") {   
            // Allow custom data for upload operations    
            data1.push({ 'column': value });   
            args.ajaxSettings.data = JSON.stringify(data1);   
        }   
}  
 
Kindly check the above details. Also, based on the shared details we are not clear whether your requirement is specific to EJ2 File Manager component or EJ2 Uploader component and please confirm on this. If you are using File Manager component, share us the service provider used in your sample. If possible share the customization code performed in your sample. These details would help us to assist you promptly. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


RS Rohit Swarup replied to Indhumathy Loganathan June 25, 2021 06:14 AM UTC

Hi Indumathy,


This is related to File manager control and  the file upload operation within. We have added a custom input dialog for upload  operation  rather than using the default one.

On the upload button click we have opened a custom dialog where we can explore files and enter custom related data for request input.



We are selecting files using : in UploadFileDialogComponent.html

 

and collecting the files after closing the custom dialog. After this we want to hit the Upload Ajax request directly with collected data as shown in previously shared snapshot of upload .Hope we have any provision for this


Thanks,

Rohit Swarup


SP Sowmiya Padmanaban Syncfusion Team June 28, 2021 12:41 PM UTC

Hi Rohit,  
  
In your shared code snippet, we found out that you have used file Input to upload the files in FileManager component. In EJ2, we have Uploader component for uploading. We suggest you use the Uploader component to upload the files with additional data.   
 
We have prepared a simple sample using our uploader component to send the additional data to the controller based on your attached screenshot.  
   
Please, refer the below code snippet. 
  
  <ejs-uploader #defaultupload id='defaultfileupload' allowedExtensions="image/*" [multiple] = false[autoUpload] = false[asyncSettings] = 'path' 
            (selected) = 'onFileSelect($event)'(uploading) = "OnUpload($event)" ></ejs-uploader > 
  
public OnUpload(args) { 
            var username = 'Syncfusion'; 
            args.currentRequest.setRequestHeader('Authorization', 'Bearer ' + username); 
            args.currentRequest.setRequestHeader('Destination', this.textbox1Val); 
            args.currentRequest.setRequestHeader( 
              'Access-control-group', 
              this.textbox2Val 
            ); 
          } 
  
Screenshot: 
 
 Please, refer the sample link .  
   
   
You need to use the same approach to integrate it in FileManager component. If we are facing any difficulties, we will happy to assist you.  
   
Please, let us know, if you need any further assistance.  
 
Regards,  
Sowmiya.P 


RS Rohit Swarup replied to Sowmiya Padmanaban June 29, 2021 07:50 AM UTC

Hi,


In the sample you provided, the OK button handler is not working.

Once I select a file I can see it inside the input field and when I click Ok button nothing happens further.(No API being called)


Also When I tried this code with my original application,  after file selection the upload files dialog is coming up automatically when autoUpload=false  and when autoUpload=true, the file upload API being called immediately after selecting the file in selection dialog.

I don't want to see this Upload Files dialog and automatically hit the Upload action on click of  "Ok" button.


Thanks,

Rohit Swarup


RS Rohit Swarup July 1, 2021 05:34 AM UTC

Hi,


could you please update on this.


Thanks


IL Indhumathy Loganathan Syncfusion Team July 1, 2021 01:51 PM UTC

Hi Rohit Swarup, 
 
We have validated your reported query. In the previous shared sample we have only demonstrated the client side customizations with online service link. You can remove our upload button from toolbar items and you can add the custom button to perform upload operation. We have prepared a sample where we added a custom upload button in File Manager toolbar items. While clicking that button we open the dialog with uploader component, where you can browse the file you want to upload and you can upload those files using making below customization in the controller. 
 
[FileManagerController.cs] 
// uploads the file(s) into a specified path 
[Route("Upload")] 
public IActionResult Upload(IList<IFormFile> uploadFiles, string action, IFormCollection form) 
{ 
    var data = Request.Form["path"]; 
    var path = data.ToString().Replace("/", "\\"); 
    try 
    { 
        foreach (var file in uploadFiles) { 
            var filename = ContentDispositionHeaderValue 
                            .Parse(file.ContentDisposition) 
                            .FileName 
                            .Trim('"'); 
            filename = this.basePath + "\\" + this.root + path + "\\" + $@"\{filename}"; 
            if (!System.IO.File.Exists(filename)) 
            { 
                using (FileStream fs = System.IO.File.Create(filename)) 
                { 
                    file.CopyTo(fs); 
                    fs.Flush(); 
    … 
    ... 
    return Content(""); 
} 
 
By using toolbarSettings property, we added custom button to perform upload operation and removed the default ‘Upload’ button from toolbar. While clicking the custom button we opened the dialog popup using show method, then performed upload action by making upload method call. Check the below code snippet. 
 
this.toolbarSettings = { 
  items: [ 
    'NewFolder', 
    'CustomUpload', 
    'Delete', 
    'Download', 
    'Rename', 
    'SortBy', 
    'Refresh', 
    'Selection', 
    'View', 
    'Details' 
  ] 
}; 
... 
toolbarClick(args) { 
  if (args.item.text === 'CustomUpload') { 
    this.ejDialog.show(); 
  } 
} 
public okayClick() { 
  document 
    .getElementsByClassName('e-upload-actions')[0] 
    .querySelector('button.e-file-upload-btn') 
    .click(); 
  this.uploadObj.upload(); 
  return false; 
} 
 
Please find the sample from below link. 
 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Loader.
Up arrow icon