The Drag & Drop Framework in DataFlex

Lesson 4 - File dropping

In this lesson, we’ll look at how we can use the drag & drop framework to handle file dropping from your local filesystem to your Web Application.

Similar to regular Drag & Drop interactions, we’ll need to add a specialized component to our view. The cWebDragDropFileHelper works exactly like the regular cWebDragDropHelper, but has additional logic to handle file dropping and - consequently – file uploading.

The steps to take are very similar. We’ll add a WebDragDropFileHelper to our view. Next we’ll add our Drop targets just like we did in the regular helper. We don’t have to add a drag source specifically for File Dragging, this is supported out of the box by the WebDragDropFileHelper. Note that the filehelper supports File Dropping on top of the logic that the regular helper supports. This means that you can also add Drag Sources to handle regular Drag and Drop actions as well.

For file dropping, we’ll have to implement the OnFileDrop function. In this function, we’ll receive several parameters, the most important ones being the filename, a handle to the drop target and the drop position. Similar to the regular dragdrophelper, we can use the reference to the drop target to extract the DropData and use it in combination with the drop position to determine where exactly the file was dropped.

OnFileDrop is called for each file being dropped and should return the path to where the file will be uploaded. If we return an empty string here, the eventual upload will not take place.

Lastly is the OnFileFinished procedure. This is called after the file has finished uploading and can be used to perform actions, such as update the user interface after a file drop.

Alright, let’s put this info to use and look at an example for file dropping.

DEMONSTRATION

So here we have a fairly simple view containing just a TreeView with 3 folders. These folders represent actual folders on our filesystem within this demo workspace.
Let’s take a file from our filesystem and drop it on a folder in this tree view.
As you can see, uploading starts instantly and when it is done, the file is now uploaded to the exact folder we dropped it on.
We can confirm this by looking at the folder in our filesystem.
Let’s go through the code for this and look at some key pieces of logic that make this happen.
So here’s our TreeView, we can see that all it really does is look at the folder structure and mimic that in the control.
Now for the important part: the WebDragDropFileHelper. In here we’ve registered the Treeview’s folders as a valid drop target.
Now let’s look at the implementation of the OnFileDrop function. Here we’re getting the DropData from the TreeView to the corresponding struct.
This bit here gets our upload folder path for this workspace and creates the folder if it does not yet exist.
From the DropData, we can determine which folder the file was dropped on, this will be used to build the Path string to upload the file to.
Together with the filename, this is the final Path that we’ll return so that the file can actually be uploaded.
In OnFileFinished, we use the name of the uploaded file to update the TreeView visually. This is done by inserting a node at the dropped position, with the name of the file.

And that is how you can use the Drag & Drop framework to add file dropping to pretty much any control in your web application. Note that the regular WebFileUploadButton and Form still work as they used to and remain perfectly valid options for handling file uploads as well.

The Drag and Drop Framework in DataFlex

DataFlex courses

Information

The Drag & Drop Framework in DataFlex

Lesson 4 - File dropping