How do I Drag and Drop INTO Construct 3?

1 favourites
  • 9 posts
From the Asset Store
Casino? money? who knows? but the target is the same!
  • Hi, I'm looking for a way to drag and drop a selection of text, an image or a file from an external source into the Construct 3 player window (published to web not to the editor). The drag source could be from another browser window, or the same one or even from a desktop folder.

    For example, this site allows drag n drop from a desktop folder:

    css-tricks.com/examples/DragAndDropFileUploading

    Is there a simple way to do this with Construct 3? Is it even possible? If so are there any guides or step-by-steps to getting this to work? Thanks!

  • You can do it, but only with a nw.js standalone export.

    scirra.com/manual/162/nwjs

    On file dropped

    Triggered after the user drag-and-drops a file in to the application window. The DroppedFile expression contains the path to the file that was dropped in, allowing you to load it to read its contents.

  • Ah, I was hoping there was a way to do it with the Web Player.

    But thanks for finding that, it's a good start!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • It's possible to process file drag and drops in the browser, but there are certain security restrictions. I'm not sure how you would do it with a piece of text, but it's probably possible.

    Dragging an image from another website for instance does not give you the image file, but will give you the URL for the image. You may or may not be able to request this file from the remote server, depending on the configuration of that server. But in most cases this is impossible without running your own server to download the images from the remote servers on demand and send them back to your game.

    Files dropped from the user file system will appear as a "file" object that can be read, but not written to.

    I don't know off the top of the head if we have a mechanism for this, I'm guessing that we don't as it's something that would likely require the binary data plugin and that is still quite new. But I can't see any reasons why we couldn't support it. Maybe do a bit more searching around and file a feature request if you can't find anything.

    If your happy with JS then you can use this snippet based on https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop to get a file dropped on the page.

    // Put any global functions etc. here
    
    runOnStartup(async runtime =>
    {
    	// Code to run on the loading screen
    	
    	runtime.addEventListener("beforeprojectstart", () => OnBeforeProjectStart(runtime));
    });
    
    function OnBeforeProjectStart(runtime)
    {
    	document.body.addEventListener("drop", dropHandler);
    	document.body.addEventListener("dragover", dragOverHandler);
    }
    
    function dropHandler(ev) {
    	console.log('File(s) dropped');
    
    	// Prevent default behavior (Prevent file from being opened)
     	ev.preventDefault();
    
     	if (ev.dataTransfer.items) {
     		// Use DataTransferItemList interface to access the file(s)
     		for (var i = 0; i < ev.dataTransfer.items.length; i++) {
     			// If dropped items aren't files, reject them
     			if (ev.dataTransfer.items[i].kind === 'file') {
     				var file = ev.dataTransfer.items[i].getAsFile();
     				console.log('... file[' + i + '].name = ' + file.name);
     			}
     		}
     	} else {
     		// Use DataTransfer interface to access the file(s)
    		 for (var i = 0; i < ev.dataTransfer.files.length; i++) {
    			 console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
    		 }
    	 }
    }
    
    function dragOverHandler(ev) {
     	console.log('File(s) in drop zone'); 
    	
     	// Prevent default behavior (Prevent file from being opened)
    	 ev.preventDefault();
    }
    

    It requires that you do not use "worker mode" on your game, which is under "advanced" in the project properties.

  • Subscribe to Construct videos now

    I did it with the snippet Nepeo shared.

    Here drag&drop image upload c3p

    oyunkulturu.com/temp/capx/drop_upload.c3p

  • NepeoEren The code works great along with eren's sample project, thanks!

    As an alternative to drag n drop from a website, is there a fairly simple way to copy an image to the clipboard and then paste it into the Construct 3 player? Thanks again for the help so far!

  • The clipboard API is a little fiddly, it's possible to capture paste events with the contents. However, the Construct runtime blocks the context menu so users will only be able to paste by doing ctrl+v at the moment.

    Here's a snippet that allows you to listen to paste events and get any pasted files ( like images ).

    window.addEventListener('paste', event => {
    	for (const item of event.clipboardData.items) {
    		if (item.kind === 'file') {
    			console.log(item.getAsFile());
    		}
    	}
    });

    I briefly looked into the idea of triggering a paste manually, which obviously has strong security restrictions ( otherwise any website could look at the contents of you clipboard ). It's relatively easy to read text from the clipboard, although the user has to grant permission. Unfortunately arbitrary clipboard data is still under development by the browser teams. Diego did some work around this API recently and told me it's pretty awkward to work with, and it's only supported in the latest version of Chrome.

    This is the MDN article on reading clipboard text and this is the MDN article on reading arbitrary clipboard data.

    Small warning from the latter MDN article:

  • Nepeo Hmm, that's interesting! I wonder if it's possible to remap the Ctrl+v(paste) to a mouse or touch event... Lot's of things to test out, thanks!

  • tkain it's possible to do that fairly easily for cut and copy using document.execCommand("copy"), but paste has security restrictions that prevent that sort of trick.

    You can map a click event to use the navigator.clipboard.read(Text)? methods, but it requires figuring out the permissions APIs as I mentioned.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)