WE drag and drop files into webpage

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 ?

Drag and drop is not yet supported but it’s on our list.

You might want to check with Taylor Design. http://webcustomcontrols.com They have an alternative File Uploader.

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.

Not using the built-in controls. However, drag and drop supporting is something we will certainly be adding to a future release.

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(“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

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=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

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 …

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.

[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…

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=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 :wink:

Feel free to try it. I tried this several years ago with disastrous results.

I tried :frowning:

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 :frowning: Maybe another time… In a while …

Michel,

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…

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.

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.

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.