Results 1 to 10 of 10

Thread: Drag and drop support from desktop to webapp

  1. #1
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default Drag and drop support from desktop to webapp

    Heared of the new drag and drop support that gmail has now? http://gmailblog.blogspot.com/2010/0...-messages.html . I dug a little deeper and discovered html5 is used for this http://decafbad.com/blog/2009/07/15/html5-drag-and-drop.

    I think this feature might come in handy for a lot of extjs applications, cause extjs application look very dekstop app-like. Will the Ext JS development team consider including this feature in the roadmap?

  2. #2
    Ext User franck34's Avatar
    Join Date
    Dec 2007
    Location
    France, Montpellier
    Posts
    148

    Default

    i succeed to do that using Titanium (appcelerator)
    Regards, Franck

    http://jabext.innovacode.com/ ExtJS Jabber Client
    http://innovacode.com/extjs/Ext.ux.IconAlive/ icon manager for desktop
    http://trac.innovacode.com/wiki/ExtJS work around extjs

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    Including more native HTML5 (and CSS3) support is certainly something we are actively working on.

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451

    Default

    It's easy to get it working, only takes a few lines:

    Look Here

    Drag an image into the blue box and watch the green one...

    in the handleFiles function, the variable that holds the file info is file. Console that to see what you can actually do.
    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

  5. #5
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    Unfortunately your link shows a white page in Chrome and IE8. I remember it looked cool.
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451

    Default

    I've changed servers from then but I will make it work again when I get back from DC.
    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

  7. #7
    Sencha User
    Join Date
    May 2009
    Posts
    6

    Default

    The link shows a white page on IE8 and Firefox.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    It's not going to work in a crap, non-standard, old fashioned browser like IE!

    I have drag/drop uploading working at work.

    I'll post a screencast on Monday. Can't post code because they own it.

    I'm sure we can come up with something for later versions of Ext4. There are lots of options to be figured out first.

    Immediate upload upon drop? Add to a list? Need fallback to regular <input type="file">? Upload in regular mime/multipart format, or as ordinary HTTP parameters? Encoding accepted? - We'd have to use base64 to send binary files like images.

    I've chosen to simply extend Ext.ux.FileField to accept drops of a single file, and on drop, change the <input type="file"> to be disabled, but manage the file in the class by changing the form's submit method. I encode into base64, and programatically create a mime/multipart message in the submit method so that the server side does not need to implement a different upload method.

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

    Default

    Very simplified version here: http://www.simoens.org/proofs/HTML5/...ex-simple.html
    Drag image into the blue square and watch the green square. This if just a proof that you can get it to work from the video.

    The one you are probably looking for it here: http://www.simoens.org/proofs/HTML5/FileDrag/index.html

    I will work to get this into an actually extension. May even be a plugin, we will see :-)
    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 Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,676

    Default

    Quote Originally Posted by Jamie Avins View Post
    Including more native HTML5 (and CSS3) support is certainly something we are actively working on.
    you will have problems as long as IE exists ...
    It's really a shame that there is no standard, or that some won't follow the standard.

    [OT]
    How many MS developer do you need to change a defect eletric bulb?
    None! MS declares darkness as new standard.
    [/OT]
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

Posting Permissions

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