Opened 6 years ago

Last modified 3 years ago

#486 accepted enhancement

Drag and drop media uploading support

Reported by: Christopher Allan Webber Owned by:
Priority: major Milestone:
Component: programming Keywords:
Cc: Jef van Schendel, Will Kahn-Greene, pythonsnake, berkerpeksag Parent Tickets:

Description

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.

Subtickets

Attachments (1)

Bildschirmfoto 2014-04-19 um 21.31.59.png (158.4 KB) - added by davidak 5 years ago.
Youtube Upload Page

Download all attachments as: .zip

Change History (13)

comment:1 Changed 6 years ago by chimo

Owner: set to chimo
Status: newassigned

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.

Last edited 6 years ago by chimo (previous) (diff)

comment:2 Changed 6 years ago by 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.

comment:3 Changed 6 years ago by chimo

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

comment:4 Changed 6 years ago by pythonsnake

Cc: pythonsnake added

comment:5 Changed 6 years ago by Christopher Allan Webber

Status: assignedin_progress

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!

comment:6 Changed 6 years ago by 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

Last edited 6 years ago by pythonsnake (previous) (diff)

comment:7 Changed 5 years ago by 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!

comment:8 Changed 5 years ago by 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. :)

comment:9 Changed 5 years ago by 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...?

comment:10 Changed 5 years ago by berkerpeksag

Cc: berkerpeksag added

Changed 5 years ago by davidak

Youtube Upload Page

comment:11 Changed 5 years ago by 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

comment:12 Changed 3 years ago by Loic Dachary

Owner: chimo deleted
Status: in_progressaccepted
Note: See TracTickets for help on using tickets.