Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 27 Jan 2022 11:18 by improwise
Release 3.0.0
Sten
Created on: 06 Apr 2020 09:13
Category: UI for Blazor
Type: Feature Request
74
FileSelect component
I would like to submit a wish for the FileUpload component in Blazor; to be able to simply get the file as a byte array without needing to provide an API. I would simply like to be able to decide inside the component what I would like to do with the file as a byte array, just simple and convenient.

 

Thanks and best regards,

Sten
8 comments
Christian
Posted on: 19 Oct 2020 21:11

Hi,

there is a pretty good solution for this written by the 'blazor master' himself - Steve Sanderson.

Read his post for a detailed despriction:

https://blog.stevensanderson.com/2019/09/13/blazor-inputfile/

Apart from that, there will be in built in component for that in .net 5.

https://docs.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-5.0

 

ADMIN
Marin Bratanov
Posted on: 23 Jul 2020 13:37

Thank you for sharing the solution with the community, Tom. It's good to hear you solved this!

 

Regards,
Marin Bratanov
Progress Telerik

Tom
Posted on: 23 Jul 2020 11:44

Hi Marin,

Update on my UI refresh issue with the DemoFileSelector inside a Telerik Window.

 

It was not due to StateHasChanged, I already was handling to bubble up StateHasChanged for all the components in the tree.

However, my issue was caused because of the EditForm and EditContext I was using. I was assigning a new object instance to the model of the EditContext which caused the UI not to refresh consistently anymore (validations were off as well by the way).

Everything started working when I changed to assigning the property values of the model instead of assigning a new object.

 

Thanks for your response though.

 

        protected override void OnInitialized()
        {
            SelectedFile = new FileInputDetail();
            EditCtx = new EditContext(SelectedFile);
        }

// NOT WORKING
        protected async Task OnSelectHandler(FileInputDetail fileDetail)
        {

            SelectedFile = new FileInputDetail(fileDetail.Name,fileDetail.Data, fileDetail.FileType);

            UpdateValidationModel();
            StateHasChanged();
            await base.NotifyDataHasChanged();
        }

// WORKING
        protected async Task OnSelectHandler(FileInputDetail fileDetail)
        {
            SelectedFile.Name = fileDetail.Name;
            SelectedFile.Data = fileDetail.Data;
            SelectedFile.FileType = fileDetail.FileType;

            UpdateValidationModel();
            StateHasChanged();
            await base.NotifyDataHasChanged();
        }
ADMIN
Marin Bratanov
Posted on: 22 Jul 2020 07:15

Hi Tom,

Could you check the following KB for an example that shows how you can raise an event from the window in the context of the rest of the content to invoke StateHasChanged: https://docs.telerik.com/blazor-ui/knowledge-base/window-does-not-update-parent? The window does not render in the same place as its declaration, so its shows up above all else, and that means that events and updates inside don't always re-render the components around it.

 

Regards,
Marin Bratanov
Progress Telerik

Tom
Posted on: 22 Jul 2020 06:55

Hi,

Using DemoFileSelector within a Telerik Window does not completely work. In the sense that the the filename once you have selected a file does not get updated to the UI. Tried myself by adding StateHasChanged, but still UI does not get updated.

Any idea how to get this to work?

 

Thanks,

Tom

 

ADMIN
Marin Bratanov
Posted on: 20 May 2020 04:31

Hi,

An Upload and  FileSelect component are fundamentally different in Blazor. At this point, we have an Upload component whose demos are here: https://demos.telerik.com/blazor-ui/upload/overview.

You can find an offline version in your installation:

In those demos, you can find the example of a FileSelect we made for the document processing demos.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
How PK
Posted on: 20 May 2020 04:21
Where can find the demos, DemoFileSelector, for the Blazor Upload?
ADMIN
Marin Bratanov
Posted on: 06 Apr 2020 09:17

In the meantime, you can find a sample implementation in our demos - the ~/Shared/DemoFileSelector.razor component which also uses the JS Interop code from ~/wwwroot/js/download-upload-files.js and the C# from ~/DocumentProcessing/Common/DemoFileExporter.cs and ~/DocumentProcessing/Common/UploadedFileDetails.cs.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Create an account Log In
View
Type
Status
Category