Blazorise
Blazorise copied to clipboard
Megabit
FilePicker
it looks the same as FileEdit to me
Is there anything special I need to enable?
it looks the same as FileEdit to me
Is there anything special I need to enable?
Nope Just use FilePicker. Strange.
Edit; Oh probably that js I added last minute broke it, maybe it's breaking behind the scnes haha I'll fix it later.
If you upload multiple files and then remove one of them, other files start to re-upload again(progress shows). You can test with larger files.
If you upload multiple files and then remove one of them, other files start to re-upload again(progress shows). You can test with larger files.
I know. I copied that example from a user example, he's uploading the first file on file change. So that behaviour seems normal, right? Makes sense to trigger files changed again once a file is removed.
Most cases my guess is that File Picker upload is going to be through the upload button which is not implemented yet.
Edit : to add on to that, there is a new file status to keep track whether file has been uploaded already or not.
When I upload a larger file the progress file shows it being uploaded two times.
So many changes to review 😅
I have tested runtime and it seems to be working fine. I would add a few more things
- Cancel button. When the upload starts there is no way to stop it. Can be a problem when large files are uploaded.
- Confirm dialog when we click on the remove button.
- Dropdown seems little off from the surrounding UI.
Right this one was a lot of work, but I'm sure we got some very good changes in. :) Will work on the suggestions.
Cancel button. When the upload starts there is no way to stop it. Can be a problem when large files are uploaded.
Done, but still got to do more tests. Should the cancel be treated as an error as it currently is? Maybe a new FileInvalidReason for cancelled files?
Confirm dialog when we click on the remove button.
Done. Should the file name appear in the modal? What do you think of modal showing up for clear operation, also? Also, maybe we need an options API to customize the Modal?
Dropdown seems little off from the surrounding UI.
Is this better? Border now goes on the outside?
Also made the files menu take up the whole width when open?
Remember to self: Propagate cancelUpload to ButtonContent. Remember to self: Follow conventions, rename Content to Template.
Done, but still got to do more tests. Should the cancel be treated as an error as it currently is? Maybe a new FileInvalidReason for cancelled files?
Not sure what you mean by threatening it as an error. But it would be better to sho cancel and hide other buttons.
What do you think of modal showing up for clear operation, also?
Yes, do it. Don't bother about changing the modal. Leave something for later.
Is this better? Border now goes on the outside?
It looks better but not browse button seems broken. Also it would be good to have it with different color, maybe Primary, with an option to change it.
Not sure what you mean by threatening it as an error. But it would be better to sho cancel and hide other buttons.
While the file is being written/streamed, it periodically checks if the cancellationToken has been cancelled, and throws, marking the file as in a state of error. So when you cancel it, on the UI, we show the file statuses, and it'll be marked as if an error has occured.
It looks better but not browse button seems broken. Also it would be good to have it with different color, maybe Primary, with an option to change it.
Ah? What's broken about the button?
While the file is being written/streamed, it periodically checks if the cancellationToken has been cancelled, and throws, marking the file as in a state of error. So when you cancel it, on the UI, we show the file statuses, and it'll be marked as if an error has occurred.
Yeah, threat it as an error if it is canceled.
Ah? What's broken about the button?
There is some padding on the button now.
It looks better but not browse button seems broken. Also it would be good to have it with different color, maybe Primary, with an option to change it.
Primary? Where? The Browse button? Also any ideas how to easily fix the space between the the input and the new border? I have played with the css a bit, but it is not that easy without doing alot of custom css, at least from my attempts.
@David-Moreira before I go and test this (later this week) I have few questions
Does this have
- an event for removing file?
- lets say you upload a file (now its on the server/storage) and then you click Clear (or I´m guessing garbage can icon) I want to remove it from the server (not just the input). Similar to what is done here
- Is it possible to pause/resume?
- AllowMultiple upload bool (1 or many in one)?
- Restrict file types (e.g. I just want mp4)?
- Set max file size? I want big but I don´t want 10 or 50GB
- Set chunk size?
- Has a retry count (if bad internet)
This is how my current Syncfusion upload looks like (lot going on)
<SfUploader @ref="uploader" ID="chunkFile" AllowedExtensions=".mp4" MaxFileSize=3000000000 AllowMultiple=false>
<UploaderEvents FileSelected="OnSyncfusionFileUploadSelectAsync" BeforeRemove="@BeforeRemovehandler" OnCancel="@OnCancelHandler" Success="OnSuccess" OnFailure="OnError"></UploaderEvents>
<UploaderAsyncSettings SaveUrl="@saveUrl" RemoveUrl="@removeUrl" ChunkSize="2500000" RetryCount=5 RetryAfterDelay=3000></UploaderAsyncSettings>
</SfUploader>
- an event for removing file? lets say you upload a file (now its on the server/storage) and then you click Clear (or I´m guessing garbage can icon) I want to remove it from the server (not just the input). Similar to what is done here
So on FilePicker the files are listed and a status is displayed. There's a remove button by each file. Currently we provide the callback to remove the FileEntry from the list. My guess is that any removal from the server is up to the dev.
- Is it possible to pause/resume?
This one is not possible yet, we've tought about it, but we weren't sure if this would be too complex or not. We decided to not do it just yet, in favour of having more time to allocate to other work
- AllowMultiple upload bool (1 or many in one)?
What is this? Yes on FilePicker you can select many files and upload them all. I can't recall if there's a button to upload one at a time, but that would probably be great also.
- Restrict file types (e.g. I just want mp4)?
Existing feature on FileEdit.
- Set max file size? I want big but I don´t want 10 or 50GB
Existing feature on FileEdit.
- Set chunk size?
Existing feature on FileEdit.
- Has a retry count (if bad internet)
Not really, I guess it wouldn't hurt to implement.
@sturlath would you happen to have an api available to test the streaming of 2gb + files?
I'm still trying to figure out why trying to make use of StreamContent to a web api is not working even with regular native InputFile. There must be some configuration or limit I'm not finding.
@sturlath would you happen to have an api available to test the streaming of 2gb + files? I'm still trying to figure out why trying to make use of
StreamContentto a web api is not working even with regular nativeInputFile. There must be some configuration or limit I'm not finding.
Maybe it can be set like here
https://github.com/Megabit/Blazorise/blob/4780bfe668ca169596541d41a11dc6c84e9e628a/Demos/Blazorise.Demo.Bootstrap.Server/Startup.cs#L30
or
https://github.com/Megabit/Blazorise/blob/4780bfe668ca169596541d41a11dc6c84e9e628a/Demos/Blazorise.Demo.Bootstrap.Server/Startup.cs#L56
Right, well gotta keep trying. If you guys have any other ideas or suggestions let me know.
I'm pretty sure it'll work, but I'd like to actually make it work first haha!
Hi @David-Moreira sorry for late reply. Do you need an API that can just upload a file? I have that kind of API that uploads to my service such a large file. Would you like access to it? I would need to send you it in an email or something.
Yes an API that can have a file streamed to. If the streaming capability is already abstracted... the better, I just can't seem to make it work locally, at least I haven't yet.
Ideally we would just need to pass in the stream in... like in the blazor docs examples
await blobContainerClient.UploadBlobAsync(
trustedFilename, browserFile.OpenReadStream());
https://docs.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-6.0&pivots=webassembly
PS: Ideally your API should already work with the native InputFile for Blazor with > 2GB in WASM.
Ok what I have is this using IRemoteStreamContent there was some issue using vanilla stuff with abp.io
But If you got code and just want an API just send me it and I´ll publish onto our dev environment for you to use and send you the URL, no problem!
Ok what I have is this using IRemoteStreamContent there was some issue using vanilla stuff with abp.io
But If you got code and just want an API just send me it and I´ll publish onto our dev environment for you to use and send you the URL, no problem!
Hello,
If you can just send over email (it's on my profile) the endpoint I need to invoke and how to, I'd appreciate it. I'd basically just be testing the Native Blazor FileInput and FilerPicker making sure they stream the > 2GB content successfully on WASM.
Ok what I have is this using IRemoteStreamContent there was some issue using vanilla stuff with abp.io
Hello,
If you can just send over email (it's on my profile) the endpoint I need to invoke and how to, I'd appreciate it. I'd basically just be testing the Native Blazor FileInput and FilerPicker making sure they stream the > 2GB content successfully on WASM.
Either that, or if you could take the time to test it yourself, but I understand that you might be quite busy also... :)
So trying it out with @sturlath 's api.... I must be missing something... with WASM + streaming...
I haven't even started trying to use Blazorise's FilePicker to try to stream the huge files, just straight up clearing it first with Blazor's InputFile... regular 1MB file uploads just fine, I try to upload a 100MB file, browser just straight up hangs and memory keeps growing...
Here's the code...
(Same file uploads fine through @sturlath 's swagger....) Any ideas?
Well I just found this post,
https://github.com/dotnet/aspnetcore/issues/43388 // https://github.com/dotnet/runtime/issues/36634
this explains why I wasn't being successful streaming with a local api eitherway.
So it is seeming to me that even tough they fixed the 2gb constraint you'll still have some kind of limitations related to memory management when handling bigger files on WASM I guess?
@sturlath have you actually managed to work around wasm and "big files" in any of your implementations with other File Input components?