Ext.form.field.File - how to accept multiple files and how to access file itself

[gwyn_carwardine]

I want to allow the user in my app to select one or more files.

When the user has selected the files I want to upload them to a WCF service using XMLHttpRequest

I do not however want to faff around submitting forms.

When the user selects a file it seems "value" is set to the filename (and fake path) and NOT the file itself.

Is there anyway to get access to the underlying file?

I appreciate that JS does not give you random access to the user's filesystem for obvious reasons but in this case the user has selected the file..

If I capture drag/drop of files then I get access to the files themselves

[As a second requirement there does not seem to be a way to allow the users to select multiple files..]

[jratcliff]

are you using modern or classic and which version?

[gwyn_carwardine]

Sorry, should have been clear. Classic 6.5.2 - prototyping fiddles at the moment to prove concepts

[jratcliff]

Try this fiddle:

[mitchellsimoens]

Also note, to get access to the actual file (like contents of the file), this can only be done in a browser that supports the FileReady API. For browser compat, MDN states IE10+ basically.

[gwyn_carwardine]

Brilliant. Thanks.. these are what I was looking for:

this.fileInputEl.dom.setAttribute('multiple', this.multiple);
this.fileInputEl.dom.files

There are so many properties / methods etc that I couldn't find "fileInputEl"

Thanks muchly :o)

[gwyn_carwardine]

And thanks Mitchell - I guess Classic doesn't expose files natively because it's not available in all browsers that Classic supports - I notice that Modern does. However Modern is currently unusable (for me) due to bugs (inconsistent user experience) in grid multi-row selection functionality.. Even the KitchenSink in 6.5.1 doesn't work and Kitchen Sink has not yet been updated to see if the problem still exists in 6.5.2

[Grigoriy Mikhalkin]

As of ExtJS 6.5.3, FileField from modern toolkit is still not working. For my project, i did this fix, to apply multiple attribute, not the cleanest thing, but at least working:



Hope, FileField will be fixed in 6.6

[mitchellsimoens]

You are working around the bug but not actually fixing it. For example, your "accept" config isn't doing anything is it? The same is true with the "capture" config so you have 3 configs that are not working (accept, capture and multiple). The issue is there is a typo, Ext.field.File specifies proxyConfigs where it should be proxyConfig and this would all be working just fine. So here is an override that will reprocess these configs using the typo object:



Using this override, the setters for all 3 configs will not properly work also so binding can be used too.

[[email protected]]

Did you open a bug report?