1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Query about JavaScript File Uploader control

Query about JavaScript File Uploader control

Hi Team,

Hope all good.

Query 1:
I want to select files using File Uploader control and selected files name and modified date of file details to be added in TreeGrid control.

Query 2:
Is it possible to add a folder(which has multiple file) instead of select a files in Uploader control?


Query 3:
How to customize(Color, Font, Font Size etc...) the Browser button in Uploader control?



9 Replies
DR Deepak Ramakrishnan Syncfusion Team October 19, 2021 03:30 PM UTC

Hi Durai, 
 
Query 1:
I want to select files using File Uploader control and selected files name and modified date of file details to be added in TreeGrid control. 
 
We are currently working on the above query and we will update the possible details in two business days (21st,October 2021) . We appreciate your patience until then. 


Query 2:
Is it possible to add a folder(which has multiple file) instead of select a files in Uploader control? 
 
Yes we can achieve this functionality using ‘directoryUpload’ property of uploader component . By setting it as true uploads all the files in the respective directory . Kindly refer the below sample for your reference. 
 
[index.ts] 
let dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement; 
    // Initialize the uploader component 
    let uploadObj: Uploader = new Uploader({ 
        asyncSettings: { 
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', 
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove' 
        }, 
        dropArea: dropElement, 
        directoryUpload: true 
    }); 
    uploadObj.appendTo('#fileupload'); 
 
 
 
 
 
Query 3:
How to customize(Color, Font, Font Size etc...) the Browser button in Uploader control? 
 
Yes we can customize the buttons as per your requirement by using ‘buttons’ properties and overriding the existing styles .Kindly refer the below code sample for your reference. 
 
 
 
<style> 
 .e-upload .e-file-select-wrap .e-btn{ 
    font-family: emoji; 
    font-size: 15px; 
    color: darkorchid; 
    background-color: bisque; 
} 
 
 
[index.ts] 
 let uploadObj: Uploader = new Uploader({ 
        asyncSettings: { 
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save', 
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove' 
        }, 
        dropArea: dropElement, 
        directoryUpload: true, 
        buttons: { 
            browse: 'Choose file', 
          } 
    }); 
    uploadObj.appendTo('#fileupload'); 
 
 
 
 
 
 
Thanks, 
Deepak R. 


DR Deepak Ramakrishnan Syncfusion Team October 21, 2021 02:33 PM UTC

Hi Durai,  
 
  
Thanks for your patience.    
 
  
Query 1:I want to select files using File Uploader control and selected files name and modified date of file details to be added in TreeGrid control.   
 
 
   
Based on your query, We suggest you use the addRecord method of the treegrid.  
 
 
  
Please refer to the below code snippet:  
 
  
 <button onclick="add()">Add record</button>  
          <div id="TreeGrid"></div>  
          <script>  
            function add() {  
              var treegrid =  
                document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];//treegrid instance  
              var data = {  
                taskID: '100',  
                taskName: 'test',  
              };  
  
              treegrid.addRecord(data, 0, 'Above');  
            }  
          </script>  
  
  
 
Please refer to the below API link:  
 
 
  
Please refer to the below sample,  
 
 
 
  
Kindly get back to us for further assistance.   
   
Regards,    
Deepak R. 


CF Carlton Flores October 22, 2021 11:46 AM UTC

can i do it using fetch API ?


DR Deepak Ramakrishnan Syncfusion Team October 25, 2021 03:58 PM UTC

Hi Durai, 
 
Thanks for your update. 
 
We have validated the details provided by you , But unfortunately we are not clear with your requirement . So kindly provide the requirement/use case details elaborately with the respective component . It will help us to further analyze and provide you the better solution. 
 
Thanks, 
Deepak R. 


CF Carlton Flores October 26, 2021 06:15 AM UTC

i think API could be an easy option techzpod mobdro


DR Deepak Ramakrishnan Syncfusion Team October 26, 2021 10:48 AM UTC

Hi Durai, 
 
 
Thanks for your update. 
 
 
As of now Syncfusion uploader component provides support for Post API support for save action .Kindly refer the below documentation for Save action in uploader component. 
 
 
 
 
If this does not meet your requirement , Kindly provide the elaborated use case/requirement as mentioned earlier . So that we can proceed further in our end. 
 
 
Thanks, 
Deepak R. 


DU Durai October 26, 2021 03:17 PM UTC

Hi Deepak ,

Thanks for your response.

Query 1 response is inappropriate. Why you are using button control to add the data in TreeGrid. I clearly mentioned to add the data using file uploader control.


My Scenario is.

- I want to show the File Uploader control like normal button.

- When I click the button, file manager will open and select wanted files.

- Add selected file details(such as Filename, Size) to the TreeGrid.

- Mean while I want also to download and delete the files from TreeGrid.


DR Deepak Ramakrishnan Syncfusion Team October 27, 2021 03:34 PM UTC

Hi Durai, 
 
 
Thanks for providing required details. 
 
 

We are currently creating the sample demonstration to as per requirement . We will update the possible details in two business days (29th,October 2021) 
We appreciate your patience until then. 
 
 
Thanks, 
Deepak R. 


DR Deepak Ramakrishnan Syncfusion Team November 1, 2021 05:12 AM UTC

Hi Durai, 
 
Thanks for your patience. 
 
We have created a sample based on your requirement . Kindly refer the attachment for your reference. We have did following things to achieve your requirement . 
 
1.We have set ‘showFileList’ as false , which will not render the filelist in in the component . And rendered the filelist in treegrid by using ‘success’ event which will get triggered once the file is successfully uploaded in server. 
 
let uploadObj: Uploader = new Uploader({ 
        asyncSettings: { 
            saveUrl: "http://localhost:58812/Home/Save", 
            removeUrl: 'http://localhost:58812/Home/Remove' 
        }, 
        removing: onFileRemove, 
        dropArea: dropElement, 
        showFileList: false, 
        success(args){ 
             
            console.log(uploadObj.getFilesData()); 
            treeGridObj.dataSource = uploadObj.getFilesData(); 
             
        }, 
    }); 
 
 
 
2.Next we have appended Save icon in the each row of the treegrid and while clicking on it we have invoked the server method for download action . 
 
 
[client] 
let onSave = (args: Event) => { 
       var fileName = args.target.parentElement.parentElement.parentElement.parentElement.getElementsByClassName('e-rowcell')[1].innerText 
       if(fileName) 
       { 
       let url = "http://localhost:58812/Home/Download?filename=" + fileName; 
       window.location.rel='nofollow' href = url; 
       fileName = null; 
       } 
        }; 
 
 
 
 
[server] [HomeController.cs] 
 
[HttpGet] 
        public FileResult Download(string filename) 
        { 
            var filePath = Path.Combine( 
                      Directory.GetCurrentDirectory(), 
                              "wwwroot"); 
            IFileProvider provider = new PhysicalFileProvider(filePath); 
            IFileInfo fileInfo = provider.GetFileInfo(filename); 
            var readStream = fileInfo.CreateReadStream(); 
            var mimeType = "application/pdf"; 
            return File(readStream, mimeType, filename); 
        } 
 
 
 
 
 
 
Thanks, 
Deepak R. 


Loader.
Up arrow icon