Add dynamic thumbnail creation and screenshot drag-and-drop

Review Request #925 — Created July 21, 2009 and submitted


Review Board SVN (deprecated)


This change introduces two new cool screenshot-related features: Dynamic thumbnail creation and screenshot drag-and-drop.

Dynamic thumbnail creation creates thumbnails on the page immediately after upload, without the need to reload the page. The editor is properly hooked up and everything. This makes adding multiple screenshots to a page a lot faster, as the user no longer has to wait for a full page refresh, with the UI jumping around. This is also important for the next feature...

... Screenshot drag-and-drop. Users who have Google Gears v0.5.21.0 or higher installed will be able to drag one or more screenshots from their desktop or file manager directly into the browser window to attach screenshots. When dragging over the review request box, the screenshots area will display a dashed drop border with large centered text below any existing screenshots saying "Drop screenshots here to upload."

Dropping one or more screenshots onto the screenshot area will cause us to upload the screenshots and display their thumbnails. While the thumbnail is in the process of uploading, we display a temporary thumbnail with a spinner. This gets replaced by the actual thumbnail as soon as the upload finishes.

If the user drops non-image files onto the target area, the drop text will tell them the files were not images and then, after a couple seconds, disappear.
Dropped many screenshots, sometimes one at a time, sometimes many at a time, onto the drop zone. Saw the loading thumbnails appear, shortly replaced by the actual thumbnails.

Tested that editing works (as well as it can, as we apparently still have a bug with showing editted screenshot captions, but that's unrelated to this change, and they are stored in the database).

Tested this with review requests that don't contain any screenshots. We will show the whole "Screenshots" section as the drag operation is in progress, and hide again after if a valid image isn't dropped onto the target.
  2. /trunk/reviewboard/htdocs/media/rb/js/reviews.js (Diff revision 1)
    Can you reverse the position of these?
    if (success) {
    } else {
  3. Remove this line.
  4. Where did this come from?
    1. You need some kind of a boundary for multipart form data. It can be kinda whatever. That's what I picked.
      Though, I should randomize the number.
  5. I'd like to see this TODO implemented before this goes in. We have the error banner stuff which should be trivial to hook in.
Review request changed