1. Home
  2. Forum
  3. ASP.NET MVC
  4. showBrowseButton not working

showBrowseButton not working

Hello, the following code, which should hide the Browse button does not work:

<div id="UplImportAnagrafica"></div>

function create(args) {
                $("#UplImportAnagrafica").ejUploadbox({
                    saveUrl: '@Url.Action("ImportAnagrafica", "Admin")',
                    autoUpload: false,
                    showFileDetails: false,
                    showBrowseButton: false,
                    extensionsAllow: ".uwr",
                    multipleFilesSelection: false,
                    buttonText: { upload: "@PLV.Web.Resources.Common.Carica", cancel: "@PLV.Web.Resources.Common.Cancella" },
                    dialogAction: { closeOnComplete: true }
                });
            }

This is result:

Syncfusion Version=17.2450.0.36

Tested on MS Edge, IE and Chrome


7 Replies
AB Ashokkumar Balasubramanian Syncfusion Team July 31, 2019 09:36 AM UTC

Hi Pio Luca,  
 
Good day to you. 
 
We suspect that you have misunderstood the functionalities of the property “showBrowseButton”.  “showBrowserButton” can be set to false in case where allowDragAndDrop is set to true.  Uploadbox use either browser button or drag and drop to select and upload files. So, while setting “showBrowseButton” along with “allowDragAndDrop” will hide the browse button and files can be uploaded from drop area directly. This is the logic of the control and upload cannot be done without both browse button and drag and drop. Please refer to the following code. 
 
$("#UploadDefault").ejUploadbox({ 
                saveUrl: "https://js.syncfusion.com/ejServices/api/uploadbox/Save", 
                removeUrl: "https://js.syncfusion.com/ejServices/api/uploadbox/Save",                                
                   autoUpload:true, 
                    showFileDetails: false, 
                    showBrowseButton: false, 
                    extensionsAllow: ".zip", 
                    multipleFilesSelection: false, 
                    buttonText: { upload: "Carica", cancel: "Cancella" }, 
                    dialogAction: { closeOnComplete: true }, 
                    allowDragAndDrop: true, 
                   success: function(args) 
                   { 
                      console.log(args.files.name + " uploaded successfully") 
                   } 
            }); 
 
 
 Also, few properties in Uploadbox are dependent on each other based on the control workflow logic. For example, you have set showFileDetails false which will hide the file upload progress dialog which has the Upload button for upload action. So in this case, you need to set autoUpload as true so that files will be uploaded automatically after selection.  Please refer to the below given UG for more details on Uploadbox  
 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


PL Pio Luca Valvona replied to Ashokkumar Balasubramanian July 31, 2019 11:43 AM UTC

Hi Pio Luca,  
 
Good day to you. 
 
We suspect that you have misunderstood the functionalities of the property “showBrowseButton”.  “showBrowserButton” can be set to false in case where allowDragAndDrop is set to true.  Uploadbox use either browser button or drag and drop to select and upload files. So, while setting “showBrowseButton” along with “allowDragAndDrop” will hide the browse button and files can be uploaded from drop area directly. This is the logic of the control and upload cannot be done without both browse button and drag and drop. Please refer to the following code. 
 
$("#UploadDefault").ejUploadbox({ 
                saveUrl: "https://js.syncfusion.com/ejServices/api/uploadbox/Save", 
                removeUrl: "https://js.syncfusion.com/ejServices/api/uploadbox/Save",                                
                   autoUpload:true, 
                    showFileDetails: false, 
                    showBrowseButton: false, 
                    extensionsAllow: ".zip", 
                    multipleFilesSelection: false, 
                    buttonText: { upload: "Carica", cancel: "Cancella" }, 
                    dialogAction: { closeOnComplete: true }, 
                    allowDragAndDrop: true, 
                   success: function(args) 
                   { 
                      console.log(args.files.name + " uploaded successfully") 
                   } 
            }); 
 
 
 Also, few properties in Uploadbox are dependent on each other based on the control workflow logic. For example, you have set showFileDetails false which will hide the file upload progress dialog which has the Upload button for upload action. So in this case, you need to set autoUpload as true so that files will be uploaded automatically after selection.  Please refer to the below given UG for more details on Uploadbox  
 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


Thank you for your support. 
I definitely hadn't understood the proper functioning of the property.
My need is to choose the file to upload, directly from a button in the grid toolbox, so I wanted to hide the Browse button.

AB Ashokkumar Balasubramanian Syncfusion Team August 1, 2019 01:18 PM UTC

Hi Pio Luca, 
  
You can render any type of button inside grid toolbox based on your requirement. Hiding browse button will affect file upload action, so we suggest you set height and width of Uploadbox as “0px” on the page and trigger file upload from that button on Grid. Please refer to the below KB links to know how to trigger file upload without browse button.  
  
 
 
 Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


PL Pio Luca Valvona replied to Ashokkumar Balasubramanian August 1, 2019 05:09 PM UTC

Hi Pio Luca, 
  
You can render any type of button inside grid toolbox based on your requirement. Hiding browse button will affect file upload action, so we suggest you set height and width of Uploadbox as “0px” on the page and trigger file upload from that button on Grid. Please refer to the below KB links to know how to trigger file upload without browse button.  
  
 
 
 Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


Thanks for the support, but the change you indicated to me does not work as expected, as you can see from the image, the control is not hidden completely.
In addition, even by setting the translations for the buttons, these are displayed in English.





Attachment: Images_7d057941.zip

VK Vinoth Kumar Sundara Moorthy Syncfusion Team August 2, 2019 04:39 PM UTC

Hi Pio Luca Valvona, 
 
Good day to you. 
 
We have checked your images, we suggest you add cssClass for UploadBox and then add style for that button. In below sample we have added cssClassbrowseBtn and added style. 
 
.e-uploadbox.e-widget.browseBtn .e-selectpart.e-select {      
    border: none;   
} 
 
For localization in button you need to define locale property for UploadBox and need to load script file for localization. Please check the sample in below link, 
 
 
Regards, 
Vinoth Kumar S 


PL Pio Luca Valvona August 3, 2019 02:58 PM UTC

Thanks for the support, the change you've shown me works as expected.

AB Ashokkumar Balasubramanian Syncfusion Team August 5, 2019 06:44 AM UTC

 
Hi Pio Luca Valvona, 
 
We are glad to hear that the provided solution worked for you. Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Up arrow icon