Drag and drop file upload

Drag and drop file upload

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

I've been playing around with some of the new HTML 5 FileReader and drag & drop code available in modern browsers and I've put together a 'proof of concept' block for Moodle 2.0.

With this block installed, you can drag files from your desktop onto a section of a Moodle course, where they are converted into resources (using the file name, minus extension, as the name of the resource and defaults for everything else).

If anyone wants to have a play, then the code is here: https://github.com/davosmith/moodle-block_dndupload

It needs Moodle 2.0+, a course with the 'topics' format and a recent version of Firefox or Chrome (I've not tried Safari/Opera, and I know IE won't work).

It is also likely to be full of security flaws in the way it uploads the files and everything else, but it should install cleanly and it does work (on my dev box). Full instructions are in the README file (along with several repeat warnings that this is not intended for production use - consider yourself warned!).

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

Re: Drag and drop file upload

by Mateo March Soriano -

Hello, Davo

I was waiting for someone to work about drag and drop files on moodle.

Thanks a lot for your work.

I've tried over a local moodle running on ubuntu 10.10, Firefox 3.6.18 and moodle 2.1, and runs OK.

Pardon my bad english.

Mateo

Average of ratings: -
In reply to Mateo March Soriano

Re: Drag and drop file upload

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

Glad to hear it's working OK.

I still need to add some visual feedback whilst the user is dragging the files, a few more checks on file size (the transfer increases the file size slightly during the transfer, so I need to take this into account with the limits) and add the edit buttons to the resources, once they've been uploaded. After that, a security review (particularly checking through how I handle the files on the server, to see if there are any flaws there) and it might be ready to release more widely.

If anyone has got any suggestions, not covered in the list above, please let me know.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop file upload

by Joseph Thibault -
Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers

Davo, I did check it on a test server...pretty slick and easy to use.  I do like the visual cue of the file uploading.  As for the visual cue of adding a file I think the file with a + above it and maybe the dashed line that usually surrounds the ajax enabled "move" feature in Moodle would be helpful to highlight where the file is getting added.  

cheers, 

Joe

Average of ratings: -
In reply to Joseph Thibault

Re: Drag and drop file upload

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

Easiest thing might be, as you suggested a list of the files (this does work with as many files as you want to drag and drop at the same time), with a + arrow instead of their icon, possibly with gray text and the dotted line around them (obviously all of the above will be within the CSS, so could be overridden by the theme).

I'd like to get straight on with this, but I know I've got a big project on at the moment, so it may be a few days before I can work on it some more.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop file upload

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

I have had an evening to work on this drag & drop upload block, so I am now reasonably confident that it is ready to be released.

https://github.com/davosmith/moodle-block_dndupload

Please could I have a few volunteers testing it? Once I've heard back from a few testers, then I'll add it the the Modules and Plugins database.

As before, this should work with Chrome and Firefox (recent versions). It might even work with IE 10 (but I'm not making any promises). I've not tested with Safari or any other browsers.

It is also Moodle 2.0+ only (and I will not be backporting it to M1.9).

Let me know of any problems / bugs.

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

Re: Drag and drop file upload

by ben reynolds -

Hello Davo,

We met at the MookUK11 shingdig. I tested this out on FF 5 Moodle 2.1 localhost Windows setup. I dragged a .docx and a .pdf to a section with no trouble. Got all the editing buttons, appropriate visual cues during transfer and so on.

I also dragged a 1.9 glossary out of Win 7's download folder onto the course. The transfer went beautifully although the glossary isn't happy without its style sheet smile

I believe you have a winner.

Average of ratings: -
In reply to ben reynolds

Re: Drag and drop file upload

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

@ben Thanks for testing it out.

If there's anyone else out there who can check it, before I add it to the M&P database, please let me know.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop file upload

by Geoffrey Rowland -
Picture of Plugin developers

Working for me too with Moodle 2.1 and Firefox 5.0.1

Not too fussed about the lack of bulk upload options as it is just soooo quick and neat to use for individual files.

Cool cool

Average of ratings: -
In reply to Geoffrey Rowland

Re: Drag and drop file upload

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

Does it not work with multiple files on your computer?

On my dev box, I can select as many files as I want and drag them straight onto a course.

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

Re: Drag and drop file upload

by Geoffrey Rowland -
Picture of Plugin developers

Yes it does work with multiple files e.g. selected with [Ctrl]. Hadn't actually tried before. Brilliant! 

Works for either Windows XP or Fedora Linux 14, with Firefox 5.0.1 and Moodle 2.1

Suspect this may be the 'killer' feature that convinces our lecturers that the move to Moodle 2.x is worthwhile.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop file upload

by ben reynolds -

Oh, and it for sure does not work with IE 9

Average of ratings: -
In reply to ben reynolds

Re: Drag and drop file upload

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
I assume it correctly displays the message in the block, that it doesn't work (in IE9), rather than just silently failing?
Average of ratings: -
In reply to Davo Smith

Re: Drag and drop file upload

by ben reynolds -

"Your browser does not support drag and drop upload of files"

I didn't notice that yesterday.

Average of ratings: -
In reply to ben reynolds

Re: Drag and drop file upload

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

Glad the message works, even if it is a little subtle (on the other hand, having a big glaring message all the time would quickly get boring).

Average of ratings: -