Articles in this section
Category / Section

How to turn off (hide) the file size, upload status, upload progress & percentage and delete/refresh button from the Upload Box control ?

1 min read

Description

Need to turn off (hide) the file size, upload status, upload progress & percentage and delete/refresh button from the Upload Box control.

Solution

You are maintaining a separate CSS class for each part in upload file size details. So you need to override the CSS with display property. To avoid unwanted CSS overridden on multiple Upload Box controls in the same page, you should override the CSS based on the specific Upload Box control ID.

The following table shows the details of file info parts and its corresponding classes

File Info Part

CssClass

File status

file-status

 

File Size

file-size

 

File Percentage

file-percentage

 

Delete/Refresh icon

file-action

 

File Progress bar

File-progress-bar

Example

In the following example, the Delete/Refresh Icon in Uploaded file details is hidden.

  1. Render the Upload box control in View page with using the following code example.

View

@{Html.Syncfusion().UploadBox("upload")   
    .AsyncUpload(
        a =>
            a.SaveAction("Save", "Home")
                .RemoveAction("Remove", "Home")   
         ).Render();}
  1. The following table explains you the details of CSS and its output

Query

Corresponding CSS

Result

How to turn off the Delete/Refresh icon?

#upload .file-action

{

    display:none;

}

#upload => Upload box ID

How to turn off the File percentage?

#upload .file-percentage

{

             display:none;

}

#upload => Upload box ID

How to turn off the File size?

#upload .file-size

{

             display:none;

}

#upload => Upload box ID

How to turn off the File status?

#upload .file-status

{

             display:none;

}

#upload => Upload box ID

How to turn off the File Progress bar?

#upload .file-progress-bar

{

             display:none;

}

#upload => Upload box ID

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied