Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Sorting images via drag and drop in multi-image preview

edited December 2013 in Framework

In this post, you wrote

Sorting the images/files is a good idea. I think we can add that via drag and drop to the multi-file/image preview box.

Drag and drop does move the images around, which is awesome, but how do I capture the final arrangement when they hit submit? My images field is currently the same upon submittal as it was on page load.


  • While we're on the subject of drag and drop, {! filemanager/util/multi-image !} doesn't support file upload via drag and drop, does it? I'd like to add it if not.

  • You should be able to drag and drop to upload files into the dialog box that opens to select a file. I believe that should work anywhere it's used.

    The drag and drop to reorder should also be updating the field. I'll try to setup a test and see what it's doing.

  • Here's a test of the drag and drop reordering that's working on my end (tested in Chrome & Firefox):

  • Hmm, getting back to this and I'm not sure why the sorting wasn't working for me. Seems to work fine now.

    I do think dragging and dropping onto the preview field would be nice, not just into the dialog box that opens when you click "Browse images".

    Speaking of sorting, here's another question/issue. It would be nice if the list of files in the dialog were sorted. Imgur

  • The folder list sorts itself automatically for me, but that may be OS-dependent. I just pushed a change that adds sorting in the browser to make sure it works the same everywhere.

  • Thanks!

    What do you think about dragging and dropping onto the preview field? Worth pursuing?

  • The only trouble with it is you won't have a say in which folder you're uploading to that way, and I hesitate a bit to just clutter the base /files/ folder...

  • So what would it take to have a say in which folder you're uploading to? We already have path in $.filebrowser ({});

  • That is true. I guess it's fair to assume if you drop it onto the page itself and not the dialog window that it would default to whatever path is set to. In that case, it would be a matter of including apps/filemanager/js/jquery.filedrop.js then calling $(self.opts.preview).filedrop() with the right callbacks. Here would be the relevant code from the file browser dialog:

Sign In or Register to comment.