Page 1 of 1

Drag and Drop from Filessytem

PostPosted: Fri Jun 01, 2018 3:02 pm
by GabrielWyss
Is it possible to get a filehandle with drag and drop from Windows-Explorer to a Servoy Solution?

Thanks for any help.

Re: Drag and Drop from Filessytem

PostPosted: Fri Jun 01, 2018 5:38 pm
by Ruben79
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:
Code: Select all

/**
* 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;   
}


Re: Drag and Drop from Filessytem

PostPosted: Sat Jun 02, 2018 1:07 pm
by mboegem
I've done this on web client too, but it's a lot more work
I think I used dropzoneJS for that

Re: Drag and Drop from Filessytem

PostPosted: Tue Jun 05, 2018 10:17 am
by swingman
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...