[issue2551204] Allow file upload by drag and drop into text input area with image preview.

New submission from John Rouillard:

https://wiki.roundup-tracker.org/FileUploadViaDragDropAndPaste has an early version
of this using a separate drop area.

See https://rouilj.dynamic-dns.net/fossil/roundup_sysadmin/artifact?
name=4b2a028df6&txt=1&ln=74-340 for the implementation using the @note textarea
with support for pasting text rather than trying to attach it from a paste.
Trying to paste an image will result in an attached file.

The code at: https://gist.github.com/adactio/0e406cbc2ff0d3eed7a0ffcd0d932aab
shows how to add an image preview. The article motivating this code is 
https://adactio.com/journal/19080. The handler will need to be added to every
file input and the inner loop will need to check that the fileinput.files[X].type property 
starts with "image/" before trying to generate a preview.

If implemented correctly, this should be able to be added to all the templates
(possibly even minimal).

This implementation can be limited to just one file input if desired as adding file inputs
requires other changes to the dom that affect layout and redoing the layout/css for
all templates may be tricky. (The image preview will cause layout changes as well.)

Marking as starter ticket as the work occurs in javascript on client side, so extensive
knowledge of Roundup isn't required. Also there is significant prior work available.

----------
components: Web interface
keywords: StarterTicket
messages: 7524
nosy: rouilj
priority: normal
severity: normal
status: new
title: Allow file upload by drag and drop into text input area with image preview.
type: rfe

_________________________________________________
Roundup tracker <[email protected]>
<https://issues.roundup-tracker.org/issue2551204>
_________________________________________________