1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      3  

    Default Ext.plugin.extjs.FIleDrop

    Ext.plugin.extjs.FIleDrop


    This is a plugin that will turn any element into an element that can accept files dropped from the desktop.

    GitHub: https://github.com/mitchellsimoens/E...extjs.FileDrop

    In this repo, there is an example usage. Pretty simple. If you don't specify the 'el' config on the plugin, it will default to the owning component's el.

    To get file source, add listener to the owning component for the "read" event. This has two parameters, the owning component and an event. The source is under event.target.result . It may not be that easy for all files but for images this works.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  2. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    773
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    hehe, nice.

    But how do I send the file with a form?

    So, I have:
    Code:
    <form>
    <input type="text" name="some_option">
    <input type="file">
    </form>
    The user can either select a file with the default functionality or drop it somewhere in the app.

    The examples i've found so far just talk about files, not about forms.

    Thanks.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Problem lies that I think there is strong security on the file input field. You can access the source of the file so you may have to use hidden fields and display it with checkboxes maybe. I will see if I can set the file input field's value but I doubt it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    773
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Yeah, you can't set the value.

    Actually forget the file input field for a second. If a user drops a file, I just hide it.

    But, how can I drop a file and send it together with other form variables? Ideas?
    An Ajax request would be totally fine.

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Was gonna work with CheckboxGroup but you cannot add Checkboxes in PR3. Got an error and don't have the time to dig into why.

    Are you going to allow any file uploaded or just images?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    773
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    What would the checkbox be for?

    Just csv-files.

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by Steffen Hiller View Post
    What would the checkbox be for?
    Just trying to figure nice UI way of handling uploads. I know you were saying you want an upload button but was hoping for a nice demo.

    Quote Originally Posted by Steffen Hiller View Post
    Just csv-files.
    So pretty much text files. That should be pretty easy!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    773
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Oh ok, well, just code is fine for me.

    If you just could point me to the way I can submit an Ext JS 4 form with the dropped file, that'd be awesome.
    Haven't done much with the File API yet.

    Don't worry about a cool demo for now. :-P

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can get the source of a text file by:

    Code:
    var getText = function(e) {
        var encoded = e.target.result,
            result  = encoded.split(","),
            text    = atob(result[1]);
    
        return text;
    }
    
    new Ext.Panel({
        ...
        listeners : {
            read     : function(cmp, e, file) {
                var text = getText(e);
                console.log(text);
                //do whatever here
            }
        },
        ...
    });
    Tested on a TXT and JS file. The FileReader encodes the file automatically so you have to decode the string it returns.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    773
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Sounds good!

    Actually the File API is pretty awesome for my case, since the client wants a preview of the first few rows before he uploads it.

    So thanks a ton!!

Similar Threads

  1. Highcharts adapter and plugin for ExtJS
    By buz in forum Ext 3.x: User Extensions and Plugins
    Replies: 427
    Last Post: 18 Jul 2013, 9:03 AM
  2. Eclipse's Extjs plugin anybody knows one?
    By andredecotia in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Dec 2010, 5:40 AM
  3. How to create plugin for ExtJS
    By martinfeng in forum Ext 3.x: User Extensions and Plugins
    Replies: 4
    Last Post: 7 Nov 2010, 9:16 AM
  4. rwt (a ruby on rails plugin for extjs)
    By twr in forum Community Discussion
    Replies: 1
    Last Post: 12 Feb 2009, 2:28 AM

Thread Participants: 7