fileArray and dataURLArray are not in the same order and it's not possible to match them up about knockout-file-bindings

[michaeldeongreen]

In knockout-file-bindings.js, in fillDataToProperty, I made the following change to be able to match the fileArrary with the base64String Array:

                    function fillDataToProperty(result, prop) {
                        if (index == 0 && fileData[prop] && ko.isObservable(fileData[prop])) {
                            fileData[prop](result);
                        }
                        if (fileData[prop + 'Array'] && ko.isObservable(fileData[prop + 'Array'])) {
                            if (!file.id) {
                                file.id = result;
                            }
                            fileData[prop + 'Array'].push(result);
                        }
                    }

[DrJam]

Reasonable, I ended up writing my own alternative ko binding extension for file upload and drag&drop

[equisgroup]

@safrazik , could you implement the changes into the library, and check the pull request that resolves another issue?

[Dizzitune]

@DrJam , I still use this component and this still an issue for us. Is your alternative version available? Does it differ far from the original? Or do you know what to change in the knockout-file-binding.js to get this solved? I can see that the fix by michaeldeongreen above is implemented but it does not seem to be a complete solution.

[safrazik]

@Dizzitune I’m the author of the component. It's interesting to know that the component is still used today. I already looked into this issue few years back and gave up in fear of breaking anything else that is working already, and of course, lack of time. I think I could give another shot now as I have more experience in this particular area, especially after my Vue File Agent component. I’m working on FileAgent v2 With support for React, Vue and vanilla JS.
https://github.com/safrazik/vue-file-agent

I assume using Promise.all would be ideal to fix this issue. Are you using any Promise poly fill already?

[Dizzitune]

@safrazik - I tried debugging the code myself but it was a bit difficult to find the cause of the issue. If you have time to fix it or if you could point me in the right direction it would be very appreciated :) Promise.all would not be a problem.

[safrazik]

@Dizzitune Version 1.2.0 fixes this issue. Please test and confirm with your test cases.

[Dizzitune]

@safrazik Yes! Works like a charm, thank you very much :)
It would be nice to do Vue, Blazor or something newer than 2014 sometime but some of us just have to stick to the dirty work ;) KO Rules!

[gregveres]

@Dizzitune I am in the process of moving from KO to Vue. I like Vue a lot better. Vue 3's reactivity is very similar to KO. KO was way ahead of its time on the reactivity aspect but way behind the times wrt components and virtual dom.
Once Vue 3 is out and vuetify ports over to Vue 3, then I would wholeheartedly suggest that you move over to Vue 3 and Vuetify.

I am finding that with KO I ended up copy and pasting stuff all over the place because of the lack of good component support. But with Vue, I am writing reusable components that I use many times. In the end it is much faster with Vue. I am converting as I go so that I no longer build KO UIs and my app is a mixture of the two.

[Dizzitune]

Yes indeed. I've worked with Vue some time and its great and of course a lot more powerful than KO. I think KO was just outstanding when it arrived and therefore we have a lot of old applications that are based on KO and in need of maintenance. Soo thats why this was relly helpful.

With KO I’ve added some features to the KO Component base and developed support for distributed system. So we have distributed KO Components that can be used like GUI-composition in other applications. At this point (a lot of coding) its quite easy to use.
To be honest I’m quite tired of Javascript today and hoping for some development including Webassembly and Blazor. We will see :)

[gregveres]

Yea, I hate javascript. I only use typescript. The difference might seem small but it is really huge. I don't know how people can ship a bug free product in javascript, but with typescripts type system, and the refactoring tools that a type system provides, I feel much more confident with the quality of my front end.

[Dizzitune]

Typescript is what we are using too but its still a lot of issues. Webassembly allow us to use c# native on client and server and that would be soo nice :)