Docs_MyListView_StyleA.razor

1. About MyListView_StyleA

MyListView_StyleA is an open source UI in project file '/MyListView_StyleA.razor'

It's a default template for demostrating how to render the file list UI and show progress and handle remove button.

There's another /MyListView_StyleB.razor which show different style.

Developer can make custom listview easily by referencing /MyListView_StyleA.razor.

2. Attach MyUploaderState

In the demo code, it shows the data for MyUploaderState like this: (/Demo/Demo_SimpleButton.razor).

<MyListView_StyleA State="upstate" />

3. Understand how it renders UI

In /MyListView_StyleA.razor ,it shows 2 part:

1 - The State.ErrFiles

When the selected files is not accepted for any reason, it will be added into ErrFiles. The demo ListView shows the error details for last one , and allow user clear it.

Visit Demo Demo_MaxSizeKB and try it.

2 - The State.AllFiles

When user select files or drag drop files, and not rejected by AcceptMaxFile/AcceptMimeType/AcceptExtensions/Multiple="false" etc, The files will be added into State.AllFiles .

And then MyUploaderState.ProcessFilesAsync() will upload them automatically. In ProcessFilesAsync , the f.UserTotalReadSize will be set so the ListView can calculate the upload progress. The f.UserReadStartTime also will be set so developer can calcuate the upload speed. (Check /demo/customlistview)

4. Remove a file from the list

By setting UserCancelled in DoCancelFile() : (/MyListView_StyleA.razor)

void DoCancelFile()

{

f.UserCancelled = true;

ItemCancelled.InvokeAsync(f);

State.InvokeStateHasChanged();

}

After UserCancelled is set to true, the MyUploaderState.ProcessFilesAsync() will bypass that file and try next files.