Page 1 of 2 12 LastLast
Results 1 to 10 of 20

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

  1. #1
    Sencha Premium User
    Join Date
    May 2015
    Posts
    166

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

    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..]

  2. #2
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,120
    Answers
    14

    Default

    are you using modern or classic and which version?
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    https://www.sencha.com/forum/showthr...o-report-a-bug

  3. #3
    Sencha Premium User
    Join Date
    May 2015
    Posts
    166

    Default

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

  4. #4
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,120
    Answers
    14

    Default

    Try this fiddle:

    Last edited by jratcliff; 5 Oct 2017 at 7:24 AM. Reason: used the fiddle tags to show the code inline here
    Jack Ratcliff
    Sencha Inc, Green bleeding Senchan

    How to report a bug:
    https://www.sencha.com/forum/showthr...o-report-a-bug

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    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.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #6
    Sencha Premium User
    Join Date
    May 2015
    Posts
    166

    Default

    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)

  7. #7
    Sencha Premium User
    Join Date
    May 2015
    Posts
    166

    Default

    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

  8. #8
    Sencha User
    Join Date
    Oct 2017
    Posts
    26
    Answers
    1

    Default

    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

  9. #9
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    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.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  10. #10
    Sencha Premium User
    Join Date
    Nov 2017
    Posts
    3

    Default

    Did you open a bug report?

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: 9 Oct 2017, 8:55 AM
  2. Replies: 1
    Last Post: 9 Mar 2012, 11:02 AM
  3. Replies: 1
    Last Post: 17 Oct 2011, 11:04 PM
  4. Ext.form.field.File, specify acceptable file extensions
    By ucabazz in forum Ext: Discussion
    Replies: 0
    Last Post: 3 May 2011, 5:14 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •