How to turn off (hide) the file size, upload status, upload progress & percentage and delete/refresh button from the Upload Box control ?
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.
- 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();}
- 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 | |