We are using the HTML display control to display images and/or PDFs stored on Amazon S3 in a project and ran into a couple of issues when we tried to implement drag and drop. Continue on for more details and my solution

As I said we are storing files on Amazon S3 for this project, and the HTML Display control is perfect for displaying the images and PDFs, our S3 Class generated a pre-signed temporary URL for S3 and then we just assign that URL to the HTML Display Control and we are done. NoMmuss, No Fuss!!!!

As you can see we have an upload button below the image to allow the user to upload a new image. Which is using our S3 Class to store it on Amazon S3, updating a link record in our database, and then returning the pre-signed URL to display. However, the HTML Display control is Explorer Drag and Drop enabled, so a user can drag an image file from Explorer and drop it on the HTML Display control and it updates with that image.

However, there are a couple of issues that I have found, but don’t fear Uncle Pete also has solutions!

Issue #1, There doesn’t appear to be a way to disable the drag-and-drop behavior. I have tried setting the control to both disabled and grayed, but dropping an image still updated the control with the new image. I also tried the ExplorerAccept function with a false parameter that is supposed to disable drag and drop on the control, but it had no effect either.

Issue #2, is the opposite of Issue #1, when they do drop a file I need to perform the same steps as I would if they used the Upload button. No problem I thought there is already an event for that very thing, “Drop from the explorer onto HTM_NoName1 (WM_DROPFILES) sounds like just the ticket doesn’t it?

My expectation was that the event would fire and then I would use the ExplorerRetrieve function to process the dropped file. However, the event never fires 😦

My next attempt was to use the ExplorerAccept function, this time with the True parameter. In v28 we have a cool new feature on this function that lets us specify a callback procedure to process the files so I tried

ExplorerAccept(True,HTM_NoName1,ProcessDrop)

PROCEDURE ProcessDrop(NumberOfFiles is int,ListOfFiles is string)

Info("Process Drop [%NumberOfFiles%] Files, [%ListOfFiles%]")

But again the procedure never fired 😦

Finally, I noticed when you create an HTML Display control it populates with a few special events and some stub code like below

With some experimenting, I discovered that the ChangePage Procedure is indeed firing when the user drops a file onto the control. And the sURL parameter contains the name of the file in URI formation, meaning it is prefixed with file:/// like so

file:///G:/.shortcut-targets-by-id/1Z2j9kQWavo8g0rMAZbCsy7xGCiOwBfNN/wxPerts/Devcon%202023/AB.jpg

The next issue is this even also fires when I set the control to one of our pre-signed URL from S3, so I had to add some logic to determine if this was a user drop action or not, and to remove the file:/// if it was and then process the file the same as if they had used the Upload button. I used the following code to call the same ProcessDrop function as I tried to use with the ExplorerAccept function. And now I am able to process the file dropped and upload it to S3, etc.

IF Left(sURL,4) = "file" THEN
	// Drop from Explorer
	fileName is string = URLDecode(Replace(sURL,"file:///",""))
	ProcessDrop(1,fileName)
END

Issue #2 is solved, but notice that ChangePage function returns a True, I decided to see what happens if you return a false instead, and guess what, it doesn’t update the display!

So say I only wanted to allow JPG files to be dropped on the control, I update my code to this

PROCEDURE ChangePage(sURL is string, sDestination is string)

IF Left(sURL,4) = "file" THEN
	// Drop from Explorer
	fileName is string = URLDecode(Replace(sURL,"file:///",""))
	IF Upper(fExtractPath(fileName,fExtension)) <> ".JPG" THEN
		RESULT False
	END
	ProcessDrop(1,fileName)
	
END

RETURN True

Or if you want to disable drag and drop all together then you would just return a false from the procedure at all times, unfortunately, the cursor still changes indicating Drag and Drop is allowed, but at least the display isn’t updated.

I have reported this to PCSOFT, to me some of this feels like a bug, especially being able to drop on a disabled control, but at the bar minimum I believe the documentation needs to clarified regarding how Drag and Drop functions with the HTML control

• WINDEV
• WX