We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

showBrowseButton not working

Thread ID:

Created:

Updated:

Platform:

Replies:

146306 Jul 30,2019 05:26 PM UTC Aug 5,2019 06:44 AM UTC ASP.NET MVC 7
loading
Tags: Uploadbox
Pio Luca Valvona
Asked On July 30, 2019 05:26 PM UTC

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


Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


Pio Luca Valvona
Replied On 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.

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


Pio Luca Valvona
Replied On 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

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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 


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

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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon