Hi!
This control does have a subscribable UploadCompleted event (FileUpload | DotVVM Documentation). But how can I do some stuff(run code) on server-side (a PostBack command) when the file starts to be uploaded? Or at least on the client-side.
There isn’t an event for a started upload, as there isn’t much you can do with it server-side. On client, you can monitor the file collection and maybe its properties (IsBusy, Progress) and react on changes. You can do this either by subscribing the specific knockout observable, or subscribing the entire DotVVM state with dotvvm.events.newState and checking if your property of interest has changed:
// option 1: knockout observable subscribe
dotvvm.viewModels.root.viewModel.Files.subscribe(() => {
// change in files
})
// option 2: new
let knownFiles = new Set()
dotvvm.events.newState.subscribe(state => {
for (const f of state.Files)
if (f.IsBusy) // is uploading
if (!knownFiles.has(f.FileId)) {
knownFiles.add(f.FileId)
// whatever you wanted to do
}
})
Thank you! I went with option 1 and resolved my case.
Some observations about option 1:
If using variables to store the read only state, the IsBusy property of the UploadData control needs to be read from a state consulted at the moment of executing the handler. So, the state is read inside the anonymous function given to subscribe().
Also, the chain leading to the call to subscribe() has to include the UploadData control and any VMs and sub VMs you may have. Something like this: dotvvm.viewModels.root.viewModel.MyParentViewModel().MyChildViewModel().PdfFileControl().Files.subscribe(...).
Observation about option 2 (which I did not test):
In case that the .Files here has the same meaning of that from option 1, I think f.IsBusy would not work. While trying it for option 1, on the client side, any member inside Files property of UploadData control did not have an .IsBusy property. I might be wrong.
Sorry, I mixed that up a bit, you are right. The IsBusy and Progress properties are on the file upload collection. Thanks for posting the solution!