Drag 'n Drop File onto Grid

[Seth]

Do you have any samples where a user can drag 'n drop a file from File Explorer directly onto a Blazor grid?  I already have my application working where the user needs to click a button to open a modal with an SfUploader on it, but I'd like them to just be able to drop a file directly onto the grid and use the SfUploader hidden "behind-the-scenes".  Is this possible?

[Monisha Saravanan]

Hi Seth,

Greetings from Syncfusion support.

We suspect that your expecting to drop the file from the file explorer and load its data directly on Grid. If so we would like to inform you that it is not feasible to achieve your requirement at our end.

If we misunderstood your query kindly share us some more details about your exact requirement.

Please let us know if you have any concerns.

Regards,

Monisha

[Seth]

Hello Monisha,

No, I'm not looking to load the data into the grid - I just want to use it as a drop target and perform the actual upload using a hidden SfUploader.

[Monisha Saravanan]

Hi Seth,

We suspect that you are expecting to drop a file without using SfUploader. If so we would like to inform you that without using external SfUploader it is impossible to drop a file inside DataGrid.

Please let us know if you have any concerns.

Regards,

Monisha

[Seth]

I do want to use an SfUploader, I just want it to be hidden from the user.  Is that possible? 

[Monisha Saravanan]

Hi Seth,

We suspect that you are expecting to upload a file when sfuploader is hidden if so we suggest you to call the upload process manually by calling UploadAsync method. While implementing this solution we suggest you to pass the file information as argument.

Or else you can achieve your requirement by using JSInterop in blazor.

<div class="component-container" style="display: none">

    <SfUploader ID="uploadInput">…..

    </SfUploader>

</div>

<button @onclick="OnClick">Manual upload</button>

@code {

    public async void OnClick()

    {

        await JsRuntime.InvokeAsync<string>("CStoJSCall");

    }

}

>>>> 

    <script>

       function CStoJSCall() {

            document.getElementById("uploadInput").click();

        }

    </script>

If you still face difficulties with above implementation then kindly share us a simple issue reproduceable sample so that we will check and share you the possibility in achieving your requirement.