All times are UTC + 2 hours [ DST ]




Post new topic Reply to topic  [ 2 posts ] 
  Print view

Drag and Drop Attachemnts
Author Message
PostPosted: Thu Aug 27, 2015 8:02 pm 
Offline

Joined: Thu Jan 10, 2013 9:14 pm
Posts: 79
Is it possible to drag and drop files to the Attachment tab onto my list from Windows Explorer or Outlook? If not could this be done with javascript or html5 some how?

Thanks
Quentin


Top
 Profile  
 

Re: Drag and Drop Attachemnts
PostPosted: Sat Aug 29, 2015 3:48 pm 
Offline

Joined: Tue Mar 08, 2011 7:37 pm
Posts: 275
Hi Quentin,

First of all, some browsers already treat input elements as drop targets. In Google Chrome for example, you can drag files over the "Browse" button and it will accept them, so you already have this functionality.

If you need a pure js/HTML5 solution, I'm afraid there is no easy way of doing this, due to how the attachments are handled into the form (the files are uploaded when pressing save just like in out of the box SharePoint forms).

So this process has to be done completely manually. I can get you started with the drag n drop feature, but you'll have to write some code yourself to perform the actual upload and I'm pretty sure this is not a simple task.

This is how you can hook the drag n drop events to the attachments DIV:

1) Place the following code to the includes section of the form:

Code:
<script>

   function HookDragNDrop(form)
   {
      var attachments = form.Form.ATTACHMENTS_DIV;
      
      // Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
      attachments.addEventListener('dragover', function(e) {
         e.stopPropagation();
         e.preventDefault();
         e.dataTransfer.dropEffect = 'copy';
      });

      // Get file data on drop
      attachments.addEventListener('drop', function(e) {
         e.stopPropagation();
         e.preventDefault();
         var files = e.dataTransfer.files; // Array of all files
         alert(files[0].name); //get the first file. Here you would have to find a way of uploading the files through javascript, reading HTML5 FileReader object.
      });
   
   }


</script>


2) Place the following code to the LoadCompleted section of the form:

Code:
HookDragNDrop(form);


Sorry for not being able to help you further on this, but perhaps the above can help you get started.

_________________
Spyros Moschovakos

Best Practice Consulting,
http://www.bpc-components.com


Top
 Profile  
 

Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC + 2 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Style by custom web design , optymalizacja pozycjonowanie strony pozycjonowanie
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group