Trash Icon in File Upload Modal not working

Hi Syncfusion Team,

I'd just like to report something weird in the file upload modal for the File Manager component.

The upload modal that appears on our end when we successfully upload a file looks like the one below:


There are two things that are weird here.

  1. When the trash icon is clicked, it automatically exits the upload modal. From a user's standpoint, a button or a link with a trash icon displayed as the face of the button denotes that a file is going to be deleted. But this doesn't happen here in this case.
  2. On a sample that you have provided for one of my queries, I noticed that the upload modal there doesn't contain the button that has the trash icon on it. This is weird because both the sample and our solution uses the 19.2.0.62 version of the library. Perhaps, we have configured our file manager differently from the one in the sample? For reference, below is the excerpt of the File Manager component that we are using in our solution.


<SfFileManager @ref="fm"
               TValue="FileManagerDirectoryContent"
               AllowDragAndDrop="true"
               ShowThumbnail="false"
               View="ViewType.Details"
               Path="@currentPath">
   <FileManagerEvents TValue="FileManagerDirectoryContent"
                      UploadListCreated="BeforeUpload"
                      ToolbarCreated="OnToolbarCreated"
                      ToolbarItemClicked="OnToolbarItemClicked"
                      OnSend="OnSend"
                      OnSuccess="OnSuccess"
                      OnFileOpen="OnFileOpen"></FileManagerEvents>
   <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"
                            DownloadUrl="/api/FileManager/Download"
                            UploadUrl="/api/FileManager/Upload">
   </FileManagerAjaxSettings>
   <FileManagerToolbarSettings Items="@FileManagerToolbarItems"></FileManagerToolbarSettings>
   <FileManagerNavigationPaneSettings Visible="false"></FileManagerNavigationPaneSettings>
</SfFileManager>

I think what we wanted to achieve here is to remove the trash button from our file upload modal similar to the one in your sample? How can we achieve that?

Thanks!


3 Replies 1 reply marked as answer

IL Indhumathy Loganathan Syncfusion Team September 23, 2021 08:24 AM UTC

Hi Denzel, 
 
Greetings from Syncfusion support. 
 
We have validated your reported query in File Manager component. We prepared a Blazor sample with shared code snippets but unable to replicate the issue(delete icon is visible in upload dialog) at our end. Please find the sample from below link. 
 
 
We have used the Uploader component internally for File Manager upload operation which includes the delete icon element in upload dialog popup. However, we have hide the delete icon by using the below style by default. 
 
.e-fe-popup .e-upload .e-icons.e-file-delete-btn {  
   display: none; 
} 
 
We suggest you to check whether the above style has been overridden in your sample or whether you have performed any customization in the UploadListCreated event to show the delete icon. Kindly check this at your end and revert with an issue replicated sample along with exact Syncfusion package version. This would help us to assist you promptly. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Marked as answer

RS Roy Sunga September 25, 2021 04:33 PM UTC

Hi Indumathy,


The CSS workaround that you have provided has worked to remove the trash icon from the upload modal of the file manager component. Thank you for that!

I am indeed using the UploadListCreated event to do a certain action. I haven't tested if removing that action will also remove the trash icon from the modal but since the CSS workaround worked, looks like that won't be necessary anymore.

Many thanks for your response!

Best regards,

Denzel



KR Keerthana Rajendran Syncfusion Team September 27, 2021 05:19 AM UTC

Hi Denzel, 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon