Prevent drag/drop for upload / change default message if folder is empty

[Mark Peterson]

I'd like to disable the drop/drop upload component of FileManager.  I found articles for the MVC version but not Blazor.  Our app will be download-only...no uploading.  I've customized all the appropriate menus, but I'm not sure how to prevent the drag/drop upload.  

Also - is there way of changing the text if a folder is empty?  I don't mind the 'This folder is empty' message - but I'd like to remove the text that says 'Drag files here to upload'.

[Muthukrishnan Kandasamy]

 

Hi Mark, 

 

Thanks for contacting Syncfusion support. 

 

Query 1: I'd like to disable the drop/drop upload component of FileManager. 

 

We can disable the drag and drop upload functionality in Syncfusion Blazor File Manager component. For this requirement, we need to use the JS interop to get the dropArea element of File Manager. Please refer to the below link to know more about interop in Blazor. 

  

https://www.syncfusion.com/faq/blazor/javascript-interop/is-there-a-way-to-access-dom-in-blazor  

 

Please refer to the below code block. 

 

[Index.razor] 

 

<SfFileManager ID="file"> 

    <FileManagerEvents Created="@OnCreated"></FileManagerEvents> 

    <FileManagerAjaxSettings Url="/api/SampleData/FileOperations" 

                             GetImageUrl="/api/SampleData/GetImage" 

                             UploadUrl="/api/SampleData/Upload" 

                             DownloadUrl="/api/SampleData/Download"> 

    </FileManagerAjaxSettings> 

</SfFileManager> 

 

@code{ 

    [Inject] 

    public IJSRuntime JSRuntime { get; set; } 

 

    public async void OnCreated() 

    { 

        await JSRuntime.InvokeAsync<string>("FileManager"); 

    } 

 

} 

 

[_Host.cshmtl] 

 

<script> 

        function FileManager() { 

            var fileObj = document.getElementById("file").ej2_instances[0]; 

            fileObj.uploadObj.dropArea = null;  

        } 

    </script> 

 

 

Query 2: I'd like to remove the text that says 'Drag files here to upload'. 

 

For achieving this requirement in File Manager component, we can simply set the display none for the drop area text content. Please refer to the below code block. 

 

<style> 

    #file .e-empty-inner-content { 

        display: none; 

    } 

</style> 

 

 

We have prepared sample for your convenience, which can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/158259/ze/Prevent_drag_and_drop157885802 

 

Getting started	https://blazor.syncfusion.com/documentation/file-manager/getting-started/
API reference	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.FileManager_namespace.html
Demo	https://ej2.syncfusion.com/demos/#/material/file-manager/overview.html

 

Please let us know, if you need any further assistance. 

 

Regards, 

Muthukrishnan K 

[BrianPD]

For me the property AllowDragAndDrop is not effective at all.  So I tried to implement the above, and I am getting  

"ej2_instances is undefined"

My package references look like:

    <PackageReference Include="Syncfusion.Blazor.Navigations" Version="19.4.0.56" />

    <PackageReference Include="Syncfusion.Blazor.RichTextEditor" Version="19.4.0.56" />

    <PackageReference Include="Syncfusion.Blazor.FileManager" Version="19.4.0.56" />

Any advice?  Did something change in my version (as you can see I'm using separate nugets)?

[BrianPD]

solved it here:  https://www.syncfusion.com/forums/174006/how-to-disable-uploads-in-sffilemanager