Drag and drop upload

Drag and drop upload

by Davo Smith -
Number of replies: 20
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Based on my Drag and Drop upload block, I've put together a core patch that would enable it to work across a site (without having to install my block). For those who are not familiar with the block, when course editing is on, users can drag one or more files from their desktop, onto a course section, and have them appear as resources (plus a more experimental feature that does the same for links & blocks of text dragged onto the course). This relies on certain features of HTML 5 which are available in recent versions of Firefox and Chrome (and possibly Safari?), but not in Internet Explorer (at least not in IE9).

The patch is available here: https://github.com/davosmith/moodle/tree/MDL-22504_drag_and_drop_upload

With the related tracker issue here: http://tracker.moodle.org/browse/MDL-22504

It's still a bit rough and ready, but I'd appreciate some feedback on it (especially anything related to the code that might improve its chances of getting accepted into Moodle core).

Note: to enable drag and drop upload, you need to visit the 'Admin / Appearance' page and tick the 'Enable drag and drop upload' option.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop upload

by Dan Poltawski -

Hi Davo,

Thanks for this! Your drag drop upload block is really awesome and I am really keen to see this become a core feature. I commented on the bug, but some comments here too:

I think the first step is really to get the drag/drop upload supported in the core mforms file upload form. Imagine that where it currently says 'No files attached' in a forum post, you can just drag the file there. That is absolutely a clear and easy win, with a great identified target that we should just do now! It'd be great if you were able to work on that because I think it'd be really straight forward to integrate to core.

With regard to your patch I think its more difficult to integrate because of the way dragging and dropping into course sections requires the creation of a resource module (and all the associated metadata/setup). Clearly this is the workflow that most teachers would like to use, but getting it done from a 'clean' point of view a few things stand out to me:

  • We'd likely need to abstract out some of the core 'create a course module' stuff, so that its always kept the same in both manually adding a resource through the form and drag dropping to automatically create the resource
  • Its may not be wise to 'hardcode' the core modules into the behaviour (i.e. mod/url, mod/file ), I can see the potential that we might want to add a core hook which allows various modules to 'support' drag/drop and then react to it, making it extensible and able to be used by third party modules. Example: A user could drag and drop a hot potatoes file into the course section and that would auto create the hotpot module for it. I've not really thought out what would be required for this, but I think making it pluggable might have a good use case and be the cleaner way to sort it out.

Thanks for doing this and sharing it.

cheers, Dan

Average of ratings: Useful (1)
In reply to Dan Poltawski

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Dan,

Thanks for the feedback.

I agree that allowing files to be dragged onto the 'no files attached' uploader in forums (and settings pages), would be a good start. I suspect that would be easiest implemented as a completely separate bit of Javascript, as about 90% (very innacurate estimate!) of my Dndupload JS code deals with updating the course page, leaving only about 10% which would be common between the two. Also, that way it could integrate directly with the JS that is already there for 'add attachment'.

As for the farming out course drag & drop support code amongst the relevant modules (or even 3rd party modules), also agreed that this is a good idea (obviously my 'block' implementation didn't do this, as I wanted to avoid touching any core code, and my first-draft core integration has just reused the old code).

I've got several ideas buzzing around my head about how to implement this, but I'm not going to have time just now to write them down. I think I'll create a page on Moodle docs with a proposed design and see where I get to (but possibly not until Monday evening).

Average of ratings: Useful (1)
In reply to Davo Smith

Re: Drag and drop upload

by Dirk Meyer -

Just a Thank-You for this great plugin. Would love to see this as part of core. Compatibility with other course formats such as 'Collapsible Topics' and file picker integration would be a great features too.

Average of ratings: Useful (1)
In reply to Dan Poltawski

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

There is now a proposed patch to allow Filepicker elements to accept drag & dropped files.

The patch can be found here: http://tracker.moodle.org/browse/MDL-29766

I would welcome any feedback on it

Average of ratings: Useful (1)
In reply to Davo Smith

Re: Drag and drop upload

by Dirk Meyer -

Hi Davo,

I don't see the "'Drag and drop upload enabled' message above the filemanager element" when trying to attach something to a forum post but when I drag a file into a course topic, it later becomes available in the file picker to be used again. I am using Chrome 14.0.835.202 for this and Firefox 3.6.23 Safari Version 5.0.3 (6533.19.4) did not like it at all.

Maybe I am not using the right moodle code? I downloaded the files from https://github.com/davosmith/moodle/commit/e74580a09dec272e4d7ca789d4b06fe89333a35d

Average of ratings: -
In reply to Dirk Meyer

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
The code you linked to does not have any support for dragging files onto a course, so you have either tried out the other patch as well, or installed my drag & drop upload block.

The first steps to get my code working include clearing all caches (to avoid conflicts, my patch does not touch the version number, which would normally trigger a cache clear). You then need to enable the drag and drop upload on the experimental features admin menu (as described in the tracker issue).
Average of ratings: -
In reply to Davo Smith

Re: Drag and drop upload

by John St -

I installed the patch and it works very well. Love it!

However, it does not seem to be showing up in some activities. For example, it works fine with forums, advanced uploading of files, glossary attachements, etc. But, it does not show up for upload a single file or database (image gallery). Could be that I set up those activities wrongly, but not sure at the moment.  

Ever investigate drag-n-drop into tinymce? 

Average of ratings: -
In reply to John St

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
As it was getting late last night, I've only tested it with forums and file resources, so far. I'll try out the other activities you mentioned.

I'm unlikely to do anything with TinyMCE, that's something for the maintainers of that editor to tackle.
Average of ratings: -
In reply to John St

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I've now had a moment spare to look at this.

It appears that the 'upload single' assignment type uses the simpler 'file picker' element, rather than the 'file manager' element. I will look to see if I can easilly add similar code to the file picker element (but I want to await 'official' feedback on the first patch, before I copy it across to the other element).

Average of ratings: -
In reply to John St

Re: Drag and drop upload

by ben reynolds -

I was distracted last week and didn't notice this topic until now.

  1. Although it's listed as a minor fix, it will be a boon to my poor teachers who are presently stuck using Advance uploading Assignment, uploading one file at a time through that painful process of click after click. This will reduce the amount of time they spend clicking to an astonsihing degree (& they will crown you King Davo).
  2. I'd sure like to try this patch on my test site, but I'm woefully ignorant about how to "find" it on github. So, is the best way to learn by reading the github help for Beginners?
Average of ratings: Useful (1)
In reply to ben reynolds

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
The easiest way to try would be to go onto github, download the zip file and create a new test Moodle instance based on this. Be aware that my patched version is based on the latest unstable code for Moodle, so it is not for production sites.
Average of ratings: -
In reply to Davo Smith

Re: Drag and drop upload

by Dirk Meyer -

After downloading from github and enabling AJAX course editing it does not work for me and I get the following as seen on the screen shot. Will make time tomorrow and apply patch manually,

Average of ratings: -
In reply to Dirk Meyer

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Looks like I've missed out the language strings from the patch I submitted.

The message should read 'Your browser does not support drag and drop upload' .

I'm working on a new and better version of the patch (much better integrated with the core modules, with the ability to be extended by other plugins), so I'll fix the language string issue when I upload that.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop upload

by ahmad hamwi -

Dear Davo, i love the drag and drop plugin.

But i recently installed the plugin to have old course file area in moodle 2.

(http://moodle.org/plugins/view.php?plugin=repository_coursefilearea).

Anyway,

what i wanted is to be able to change the location of the files that i drag them.Instead of going to server files,i want them to go to the "course file area" wich is another repositry.

Is that possible?

i love both plugins,and i wish a solution could be found.

Thank you

Average of ratings: -
In reply to ahmad hamwi

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Theoretically that is possible.

You would need to change the code in blocks/dndupload/upload.php.

As I have no idea how the internals of the course file area repository works, I am not able to comment further about exactly what changes would be needed.

My hope is to remove the need for this block by creating a Moodle core patch to do the same job (but better integrated into Moodle), so I'm not currently doing extensive work on this block (other than obvious bug fixes / integrating translation files).

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop upload

by ahmad hamwi -

Dear Davo, What about making the uploaded files go into the "my private files" area?

Can you help me with that task?

Thank you a lot, waiting for everything newsmile

Average of ratings: -
In reply to ahmad hamwi

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I'm guessing putting the files into the 'my private files', in addition to appearing on the course, would be possible.

However, I'm not sure what would need to be changed to do this, you'd have to have a look through the code in 'blocks/dndupload/upload.php' and also the code in Moodle core for dealing with 'private files'.

Let me know how you get on.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop upload

by Vernon Spain -
Picture of Plugin developers Picture of Testers

Hi Davo,

Maybe I've missed a discussion/forum somewere..

Where are the files actually stored on the server? I've done searches for files I've dragged and uploaded but am none the wiser.

Regards,

Vernon

Average of ratings: -
In reply to Vernon Spain

Re: Drag and drop upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Vernon - you haven't mentioned which version of drag and drop you are using.

Are you talking about my old block? In which case, is it the Moodle 1.9 or the Moodle 2.x version?

Are you talking about drag and drop onto courses in Moodle 2.3+ or drag and drop onto filemanagers in forms in 2.3+?

Assuming you are asking about Moodle 2.3+ and drag and drop onto courses, the answer is 'wherever the file would normally be stored if you created a file resource and uploaded a file to it via the settings form'. If you are wanting to know the internal details of how files are stored within Moodle 2.x, then this is a good starting point: http://docs.moodle.org/dev/File_API_internals

 

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop upload

by Vernon Spain -
Picture of Plugin developers Picture of Testers

Hi Davo,

You nailed it. It's the 2.3 version and you've answered my question.

Cheers,

Vern

Average of ratings: -