CSS to Fix Upload Icon
I am using MudBlazor in addition to Syncfusion. For some reason a small square is appearing above the file upload as shown below. Is there some custom css I can use to bring the original format back?
Ideally, the css that you use for your upload on this forum would be perfect as in the below.
SIGN IN To post a reply.
1 Reply
Hi Slynch,
Greetings from Syncfusion support,
We have validated your query “CSS to Fix Upload Icon”
We suspect that the issue you have faced with small square with the upload wrapper has been occurred due to the additional icons you have customized at your end. so please ensure this from your end.
To customize the upload wrapper, we have created a div element with the requirement of your styles for upload wrapper and hidden the visibility of the upload box. Then, we bind a click event to the browse value to open the file browser dialog using jsInterop. Please check the code below,
Code snippet:
|
<div id="upload">
Drag your file here or <SfButton @onclick="@click" id="but">Browse</SfButton> (maximum file size 30mb)
</div>
<SfUploader DropArea="#upload"></SfUploader>
@code {
private async void click()
{
await jsRuntime.InvokeAsync<object>("accessDOMElement");
}
}
<script>
function accessDOMElement() {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
}
</script> |
Please check the sample and code snippet and let us know if it satisfies your requirement.
Regards,
Vinitha
SIGN IN To post a reply.
