# WE drag and drop files into webpage **URL:** \ **Category:** Web\ **Created:** [April 5, 2013, 7:20pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281 "2013-04-05T19:20:08Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Trausti\_Thor\_Johanns](https://forum.xojo.com/letter_avatar_proxy/v4/letter/t/8edcca/32.png) [@Trausti\_Thor\_Johanns](https://forum.xojo.com/u/Trausti_Thor_Johanns)\ **Post date:** [April 5, 2013, 7:20pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/1 "2013-04-05T19:20:08Z")
Is it possible to handle drag and drops ? Where a user could drag a file into the browser ? I just can’t find anything about it, except that it wasn’t possible in earlier versions. I would be quite OK with a solution where if a user would drag any number of files into the browser, that they would just be added to the file uploader. Also, is it possible to re-arrange the files inside the file uploader ? ---
**Author:** ![Geoff\_Perlman](https://forum.xojo.com/user_avatar/forum.xojo.com/geoff_perlman/32/48_2.png) [@Geoff\_Perlman](https://forum.xojo.com/u/Geoff_Perlman)\ **Post date:** [April 5, 2013, 8:00pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/2 "2013-04-05T20:00:15Z")
Drag and drop is not yet supported but it’s on our list. ---
**Author:** ![Bob\_Keeney](https://forum.xojo.com/letter_avatar_proxy/v4/letter/b/54ee81/32.png) [@Bob\_Keeney](https://forum.xojo.com/u/Bob_Keeney)\ **Post date:** [April 5, 2013, 9:15pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/3 "2013-04-05T21:15:39Z")
You might want to check with Taylor Design. [http://webcustomcontrols.com](http://example.com) They have an alternative File Uploader. ---
**Author:** ![Brad\_Hutchings](https://forum.xojo.com/user_avatar/forum.xojo.com/brad_hutchings/32/143_2.png) [@Brad\_Hutchings](https://forum.xojo.com/u/Brad_Hutchings)\ **Post date:** [April 5, 2013, 11:31pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/4 "2013-04-05T23:31:36Z")
It’s actually possible with Chrome, some Javascript, and an invisible WebFileUploader. It’s not terribly pretty. It doesn’t work with other browsers. It’s not something I would bother packaging up for Web Essentials unless I saw a very specific need that fit the same parameters as what I did it for. More trouble than it’s worth ;-). But possible. ---
**Author:** ![Geoff\_Perlman](https://forum.xojo.com/user_avatar/forum.xojo.com/geoff_perlman/32/48_2.png) [@Geoff\_Perlman](https://forum.xojo.com/u/Geoff_Perlman)\ **Post date:** [August 5, 2013, 8:58pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/6 "2013-08-05T20:58:58Z")
> [@24809:@dave duke](#): > > is it possible to drag and drop a webcontainer inside a webpage? Not using the built-in controls. However, drag and drop supporting is something we will certainly be adding to a future release. ---
**Author:** ![Brock\_Nash](https://forum.xojo.com/user_avatar/forum.xojo.com/brock_nash/32/1126_2.png) [@Brock\_Nash](https://forum.xojo.com/u/Brock_Nash)\ **Post date:** [August 5, 2013, 9:30pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/7 "2013-08-05T21:30:43Z")
# To make a control draggable I implemented this method: # Sub draggable(extends wc as webControl, assigns isDraggable as Boolean) if isDraggable then wc.ExecuteJavaScript(“Xojo.get(’”+wc.ControlID+"’).draggable = ‘true’;") [//me.ExecuteJavaScript](https://me.ExecuteJavaScript)(“Xojo.get(’”+wo.ControlID+"’).draggable = ‘true’;") else wc.ExecuteJavaScript(“Xojo.get(’”+wc.ControlID+"’).draggable = ‘false’;") end End Sub To use it: RectControl1.draggable = true Catching the drop events will take some additional javascript on your part. From this you can decide what happens to the control itself as well as the control it was dropped onto. I have found the following controls support it at least on Chrome: WebButton WebCheckbox WebToolbar WebRectangle WebLabel WebProgressWheel WebSeperator WebRadioGroup WebContainer ---
**Author:** ![Chris\_Musty](https://forum.xojo.com/user_avatar/forum.xojo.com/chris_musty/32/3639_2.png) [@Chris\_Musty](https://forum.xojo.com/u/Chris_Musty)\ **Post date:** [July 27, 2014, 10:26am UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/8 "2014-07-27T10:26:18Z")
> [@25377:@Geoff Perlman](#): > > Not using the built-in controls. However, drag and drop supporting is something we will certainly be adding to a future release. I have been out of the loop for a bit - when is this planned for implementation? It is one thing that is stopping me from using Xojo on a new project. ---
**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\ **Post date:** [July 27, 2014, 10:39am UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/9 "2014-07-27T10:39:27Z")
[quote=115333:@Chris Musty]I have been out of the loop for a bit - when is this planned for implementation? It is one thing that is stopping me from using Xojo on a new project.[/quote] You maybe able to implement that feature using JavaScript and WebSDK. See ‘Selecting files using drag and drop’ at [https://developer.mozilla.org/en-US/docs/Using\_files\_from\_web\_applications](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications) ---
**Author:** ![Chris\_Musty](https://forum.xojo.com/user_avatar/forum.xojo.com/chris_musty/32/3639_2.png) [@Chris\_Musty](https://forum.xojo.com/u/Chris_Musty)\ **Post date:** [July 27, 2014, 10:41am UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/10 "2014-07-27T10:41:46Z")
Not after dropping files necessarily, basically into drag and drop eg reordering a bunch of containers etc. ---
**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\ **Post date:** [July 27, 2014, 11:34am UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/11 "2014-07-27T11:34:24Z")
> [@115335:@Chris Musty](#): > > Not after dropping files necessarily, basically into drag and drop eg reordering a bunch of containers etc. I thought you where referring to the original post which asks about drag and drop files. You mean moving about objects on the screen ? For instance click on a rectangle, and drop it into another ? This seems feasible with MouseDown, MouseMove and MouseUp … ---
**Author:** ![Chris\_Musty](https://forum.xojo.com/user_avatar/forum.xojo.com/chris_musty/32/3639_2.png) [@Chris\_Musty](https://forum.xojo.com/u/Chris_Musty)\ **Post date:** [July 27, 2014, 1:49pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/12 "2014-07-27T13:49:02Z")
Nope simply drag and drop controls not external files etc. For example I create a dashboard that is comprised of many containers. It would be good for the user to be able to drag them around as they please. As stated by Geoff above, it is not yet available but is being planned. My question was in reference to this, ie can anyone comment on when it might be available. ---
**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\ **Post date:** [July 27, 2014, 4:23pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/13 "2014-07-27T16:23:54Z")
> [@24809:@dave duke](#): > > is it possible to drag and drop a webcontainer inside a webpage? > [@25377:@Geoff Perlman](#): > > Not using the built-in controls. However, drag and drop supporting is something we will certainly be adding to a future release. [quote=115371:@Chris Musty]As stated by Geoff above, it is not yet available but is being planned. My question was in reference to this, ie can anyone comment on when it might be available.[/quote] I am not sure why Geoff made the answer that dragging and dropping a web container inside a WebPage was not possible with built-in controls. Moving controls around a WebPage is just as easy as this in WebPage : `Sub MouseMove(X As Integer, Y As Integer, Details As REALbasic.MouseEvent) Rectangle1.left = X Rectangle1.Top = y End Sub ` Then of course it may take tuning to make the control moving around smooth and responsive without gobbling web traffic (through a Timer probably to avoid too frequent updates). As for “drop”, a few lines of code in WebPage.MouseUp are enough to know the control has been dropped and take appropriate action. And this is through pure Xojo code, without much differences with what is done in Desktop. Brock Nash JavaScript is another approach that works beautifully, although it will probably require adding a WebWrapperControl from the WebSDK to integrate within Xojo. I am convinced Geoff was talking about having support for file drop, which is a common feature amongst web apps today. Sorry, but I am sure some Xojo Staff will be glad to tell you that even if such a feature is being planned, no release date has been scheduled. Wish I was wrong, but… ---
**Author:** ![Bob\_Keeney](https://forum.xojo.com/letter_avatar_proxy/v4/letter/b/54ee81/32.png) [@Bob\_Keeney](https://forum.xojo.com/u/Bob_Keeney)\ **Post date:** [July 27, 2014, 6:37pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/14 "2014-07-27T18:37:11Z")
Using MouseMove is not a good idea. In a debug app you have next to zero latency so it appears smooth. On an outside web server MouseMove is a sure way to drown your app in events and make it unresponsive. Remember that ALL events are processed on the server. Move your mouse a single pixel and it sends an event to the server for processing. Now move your mouse all over the place and you’ve got hundreds of events that get sent to the server. ---
**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\ **Post date:** [July 27, 2014, 8:24pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/15 "2014-07-27T20:24:38Z")
[quote=115467:@Bob Keeney]Using MouseMove is not a good idea. In a debug app you have next to zero latency so it appears smooth. On an outside web server MouseMove is a sure way to drown your app in events and make it unresponsive. Remember that ALL events are processed on the server. Move your mouse a single pixel and it sends an event to the server for processing. Now move your mouse all over the place and you’ve got hundreds of events that get sent to the server.[/quote] I am aware MouseMove can generate a lot of traffic. However, I see very little other solutions in Xojo code to detect the position of the cursor on the screen to move an object. Now, I am not sure MouseMove is so dangerous that the mere mention of it condemns an app to be hanged and doomed. Here is my reasoning to alleviate the issue, please don’t scream and hear me out. Let use consider the drag and drop action from UI display side for an instant. For all intents and purposes, a user sees changes occurring every 1/60 th a second as a continuous move. Translated to microseconds intervals, it gives 1,000,000 divided by 60, equals 16,666. So for the user to see smooth, displaying the moving object every 16,666 microseconds is enough. MouseMove indeed fires at every pixel position change. For a quick swipe across 1600 pixels in a quarter a second, the interval is 156 microseconds. I believe that the code I posted to move an object would work fine if it was executed only every 60 th a second and look smooth to the user. So in essence to preserve processing time for the app and not overwhelm it with MouseMove, execute it only at 16,666 microseconds interval. It should give the app ample time to do quantities of other things, prevent drowning and preserve responsiveness. By introducing time resolution into the execution of the event we insure the preservation of processing power. Sure, network incidents and transmission delays could disrupt that rosy picture but given the average quality of Internet today, it should not be too much of a problem. I am going to create a test project and experiment around that concept on my host in NY. From Paris, the network conditions should be realistic enough between client and server to see if indeed responsiveness becomes an issue with the technique I described. I am confident a drag and drop can be implemented that way. If it does not work, I promise to report and make amends. The only lighter alternative I see is to use JavaScript through a code such as what Brock Nash posted which would execute in the client, then use a WebDSK interface to send back JavaScript event values and variables to Xojo. But that becomes a bit more complex than regular Xojo programming. But hey, it still maybe ready much before xojo implements the feature as mentioned by Geoff 😉 ---
**Author:** ![Bob\_Keeney](https://forum.xojo.com/letter_avatar_proxy/v4/letter/b/54ee81/32.png) [@Bob\_Keeney](https://forum.xojo.com/u/Bob_Keeney)\ **Post date:** [July 27, 2014, 9:27pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/16 "2014-07-27T21:27:33Z")
> [@115476:@Michel Bujardet](#): > > I am going to create a test project and experiment around that concept on my host in NY. From Paris, the network conditions should be realistic enough between client and server to see if indeed responsiveness becomes an issue with the technique I described. I am confident a drag and drop can be implemented that way. If it does not work, I promise to report and make amends. Feel free to try it. I tried this several years ago with disastrous results. ---
**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\ **Post date:** [July 27, 2014, 9:37pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/17 "2014-07-27T21:37:26Z")
> [@115480:@Bob Keeney](#): > > Feel free to try it. I tried this several years ago with disastrous results. I tried ☹ Unusable. The position of the cursor reported has a life of its own, MouseUp fires without the button being released. I do not see how ever any drag and drop could be done on server side. I make amends. What I thought possible is not. Maybe the JavaScript method could work but I had enough for today ☹ Maybe another time… In a while … ---
**Author:** ![Chris\_Musty](https://forum.xojo.com/user_avatar/forum.xojo.com/chris_musty/32/3639_2.png) [@Chris\_Musty](https://forum.xojo.com/u/Chris_Musty)\ **Post date:** [July 27, 2014, 9:59pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/18 "2014-07-27T21:59:01Z")
Michel, > [@115414:@Michel Bujardet](#): > > I am not sure why Geoff made the answer that dragging and dropping a web container inside a WebPage was not possible with built-in controls. I would tend to argue he knows what he is talking about and furthering Bob’s point your method is not suitable for commercial apps. The mouseover event does not even trigger correctly how could your method above work? Without seeing the framework there might be some client side trickery involved to make this reliable. Rest assured we were promised it was being worked on. While I know Xojo never give out time frames I was simply asking when it might be available. My bad… ---
**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\ **Post date:** [July 28, 2014, 7:43am UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/19 "2014-07-28T07:43:00Z")
I recognized my attemps failed. Most probably such a metaphor cannot be implemented server side. But without trying one never knows. I made amends for having presumed too much. I remain convinced that if it is possible, JavaSCript can achieve moving controls in the browser, after which it is only a question of reporting back to Xojo the new location or the release of the mouse button. I write “if it is possible” because I do not know of any site where controls drag and drop is used. Drag and drop files is much more commonly implemented in numerous places succesfully with JavaScript, as it requires much less client server interaction. It is a nice way to manage upload, much less cumbersome than the file selector. Microsoft uses it extensively for its developer Windows Store interface and it is very convenient to upload the numerous picture files needed. ---
**Author:** ![Greg\_O\_Lone](https://forum.xojo.com/user_avatar/forum.xojo.com/greg_o_lone/32/49_2.png) [@Greg\_O\_Lone](https://forum.xojo.com/u/Greg_O_Lone)\ **Post date:** [July 28, 2014, 12:28pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/20 "2014-07-28T12:28:48Z")
The way drag and drop will be handled (when we get to it) will have to be completely client side. We’ve got some ideas, but they’re all “still on the drawing board” at this point. As far as this dashboard thing goes, if you’re looking for the functionality I’m thinking for where the dashboard controls automatically move out of the way when you drag others around, you’ll probably be better off creating a control to do this yourself using proxy images and the WebSDK. ---
**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\ **Post date:** [July 28, 2014, 3:24pm UTC](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281/21 "2014-07-28T15:24:07Z")
The method Brock Nash posted is quite interesting. I tried it, and with his help was able to make it work. Add this method in a module : `Sub draggable(extends wc as webControl, assigns isDraggable as Boolean) if isDraggable then wc.ExecuteJavaScript("document.getElementById('"+wc.ControlID+"').draggable = 'true';") else wc.ExecuteJavaScript("document.getElementByID('"+wc.ControlID+"').draggable = 'false';") end End Sub ` To use it: RectControl1.draggable = true The drag is absolutely smooth and natural with Rectangle and WebButton I tried. This is perfect. As it stands, it does nothing more than to show how a control can be moved with the mouse. But I am now convinced this is the way to go to implement control drag and drop. [Next page](https://forum.xojo.com/t/we-drag-and-drop-files-into-webpage/8281.md?page=2)