Drag and Drop from Filessytem

Classic Servoy
1

Is it possible to get a filehandle with drag and drop from Windows-Explorer to a Servoy Solution?

Thanks for any help.

2

I’m sure it’s possible in smart-client and ngclient. Not sure about webclient.
For NGclient there is the FileUpload web component: https://github.com/Servoy/servoy-extra- … Fileupload. Really easy to use.
For smartclient you can just implement the onDrop event of a form and checkout the event that is passed. We do something like this:

/**
 * Handle a drag over. Determines of a drop is allowed in this location.
 *
 * Return true is drop is allowed, otherwise false.
 *
 * @param {JSDNDEvent} event the event that triggered the action
 *
 * @returns {Boolean}
 *
 * @protected
 *
 * @properties={typeid:24,uuid:"F30ED7CA-06DA-4137-AE6C-46FB7024C12E"}
 */
function onDragOver(event) {
	var log = scopes.svyLogManager.getLogger('stb.filednd'),
	log.debug('onDragOver triggered');

	if (event.getSource() && event.data) {
		elements.droparea.visible = true;
		return true;
	}
	return false;
}

/**
 * Handle a drop.
 * Return true if drop has been performed successfully, otherwise false.
 *
 * @param {JSDNDEvent} event the event that triggered the action
 *
 * @returns {Boolean}
 *
 * @protected
 *
 * @properties={typeid:24,uuid:"A7CA099B-8F5A-4BE6-91E8-992B887A6E14"}
 */
function onDrop(event) {
	var log = scopes.svyLogManager.getLogger('stb.filednd'),
		result = false,
		content,

		/** @type {plugins.file.JSFile[]} */
		files = [];

	log.debug('onDrop triggered');
	try {
		// check if the dragged stuff is a file
		log.debug('Preparing for a drop');
		if (event && event.dataMimeType && event.dataMimeType.indexOf('application/x-java-file-list') > -1) {
			
			content = event.data.toArray();
			files = content.map(function(f) {
				return plugins.file.convertToJSFile(f);
			})
			
			files.forEach(/** @param {plugins.file.JSFile} file */
			function(file) {
				if (file.isDirectory()) {
					log.debug('Not saving directory {}', file.getAbsolutePath())
				} else if (!file.canRead()) {
					log.debug('Cannot read file {}', file.getAbsolutePath())
				} else if (file.exists()) {
					log.debug('Importing file {}', file.getAbsolutePath())
					// save the file
				}
			});
				
			result = true;	
		
		} else {
			throw 'Dropped stuff was not recognized as a file.';
		}
		log.debug('Drop successful');
	} catch (ex) {
		log.error(ex.toString());
	} finally {
		elements.droparea.visible = false;	
	}

	return result
}

/**
 * Handle end of a drag.
 *
 * @param {JSDNDEvent} event the event that triggered the action
 *
 * @protected
 *
 * @properties={typeid:24,uuid:"F49045DC-B1F1-4A8A-820D-19DF997C1110"}
 */
function onDragEnd(event) {
	elements.droparea.visible = false;	
}
3

I’ve done this on web client too, but it’s a lot more work
I think I used dropzoneJS for that

4

Hi Ruben,

the smart-client code, does it work on Java 8? I tried it in developer on the Mac and I could not get it to work.
Drag-and-drop is another good reason to move to NG-client…