Drag and drop media uploading support

[Christopher Allan Webber]

We should add drag and drop media uploading support to MediaGoblin. Plenty of other applications (including OpenPhoto) have this; why not us?

​https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

It might be worth discussing whether or not we want to do some other overhauls to make our upload page more dynamic as well, but just supporting dragging and dropping minimally might be a good first step.

Not sure if this should be a plugin or not? I think probably not but would be interested in what others would think.

[chimo]

Hi!
I've done a bit of work with drag-and-drop multi-file upload before.
I'd be interested in working on this if it's okay with everyone.

We could either go with pure JS, or with a jQuery plugin (such as: ​http://blueimp.github.com/jQuery-File-Upload/ which offers some nice features out-of-the-box)

Thoughts?

[chimo]

Git repo: ​https://gitorious.org/~chimo/mediagoblin/chimos-mediagoblin/commits/dnd
Notes and thoughts: ​http://wiki.mediagoblin.org/User:Chimo (needs input!)

Status:

• drag and drop works
• batch upload doesn't work reliably (this used to work a while back)

When dragging more than one item, I often (but not always) get:

IntegrityError: (IntegrityError) column slug is not unique u'INSERT INTO core__tags (slug) VALUES (?)' (u'foo',)

Right now, I'm just looping through the list of files and submitting the form for each one.
Might be worth seeing if the server-side code could accept multiple files in one request.

[chimo]

Batch upload now works again.
I had to make uploads happen synchronously to prevent dupe slugs.

[Christopher Allan Webber]

Hi! I'm moving this ticket from "assigned" to in_progress per our new workflow. Please update the ticket and let us know if you're still working on this. If you are, super great! If not, we'll remove the claim and move it back to "accepted" in a couple of weeks.

Thanks!

[pythonsnake]

So I've finally pushed it at a very primitive stage (basic multi-uploading with drag and drop support works...) There is still a lot of work to be done. (sorry the the lateness btw)
​https://github.com/pythonsnake/MediaDwarf/tree/486_multiupload

[Christopher Allan Webber]

Heya,

So this is a preliminary review... full disclaimer that I have not yet run the code.

From doing a rough read:

• The main tricky thing about this is that it requires "javascript or nothing". We need an option for media submission to continue to work without js... that's a requirement here.
• Do we really need all this jquery-file-upload? I suppose maybe so... I am hesitant about adding more javascript dependencies, but if it's justified...
• However, at the very least, jquery-file-upload at least needs to move to extlib and package licensing information with it.
• There's a bunch of print statements throughout the code, both in javascript and python, as well as code commented out in various places. That has to be fixed before merge consideration.
• I suppose I should run / investigate the code more before I ask this, but I was a bit surprised by:

-                filename = request.files['file'].filename
+                filename = request.files['file[]'].filename

(what does that mean?)

• Despite all that, don't misinterpret this; I *am* excited about the possibility of asynchronous multi-file-upload working, and I did like the design and mockups you made. I need to run it still, and I'm excited about giving it a spin ;)

So that's my early review for issues. I need to try to run the code; will do next. Happy to discuss any of this over IRC!

[Christopher Allan Webber]

pythonsnake and I discussed this and jquery-file-upload will be fairly key to it... getting it packaged right will still be important, though. :)

[Christopher Allan Webber]

So I gave it a test. I have *not* read the code yet.

So generally, this works super nice. Nice work pythonsnake!

However, I think it's also giving up a few things, and I'm not sure what we should do about getting them back. There's no longer a nice way to add descriptions or set the title or adjust things while doing an upload.

I think that's pretty necessary... here's maybe two ways:

• We could have both a single-upload file mode which keeps the existing behavior, as well as a batch upload mode, and just have them be separate views. That's probably easiest. (Should we refactor some of the submit code to avoid view logic duplication though?)
• We could allow for editing on-page of the multiupload page. What I mean is something like:

 goblin_force_wip1.png           [✎]

Some other things I've noticed:

• Not sure about on anyone else's machine, but on mine, I get a weird scrollbar to the right of the [x] boxes... it's kind of distracting.
• The "default media settings" thing is kind of weird looking as a button. I wonder if we could use some other expose-this-dropdown type widget...?

[davidak]

Youtube Upload Page

[davidak]

Youtube has solved this problem good.

every file has the fields for title, description etc.

so it is one page for 1 or multiple files. also the same code for each upload.

after the upload, the progress of processing is visible on the page.

all the time the informations can get edited and saved automatically or by clicking the button.

https://issues.mediagoblin.org/raw-attachment/ticket/486/Bildschirmfoto%202014-04-19%20um%2021.31.59.png