[pmwiki-users] [Fwd: Pmwiki Forms - Inputform for fileupload - Drag and Drop with FF]

Knut Alboldt pmwiki at alboldt.de
Thu Aug 30 10:27:46 CDT 2007


Ben (S.), or how about to integrate this into Cookbook/FormExtensions ?

Knut

-------- Original-Nachricht --------
Betreff: Pmwiki Forms - Inputform for fileupload - Drag and Drop with FF
Datum: Thu, 30 Aug 2007 17:22:28 +0200
Von: Knut Alboldt <pmwiki at alboldt.de>
An: pmwiki-users at pmichaud.com

Hi !

Today I discovered this page:

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

and immediately tested it with the
(:input file:) markup
runs wonderful (you have to install the FF-extension first, then you can
test the funbction on the page mentioned above) !

On that page near the bottom is a description, how a new
filename-input-box will be added "automagically", when one or more files
are dropped or the input value is changed:

...
<pre>

       <form>
         <div>
               An input: <input onchange="cloneAndAppend(null, this)"
type="file"><br>
           </div>
       </form>
       <script>
         function cloneAndAppend(event, input) {
           if (!input) input = this;
           var newNode = input.parentNode.cloneNode(true);
           var newInput = newNode.getElementsByTagName("input")[0];
           newInput.value = "";
           newInput.onchange = cloneAndAppend;
           input.parentNode.parentNode.appendChild(newNode);
         }
       </script>

     </pre>
...


so I tried to implement this by changing the definition for the
InputTags file (recipe php file which must be included in config.php):


<?php if (!defined('PmWiki')) exit();

$HTMLHeaderFmt['draganddropfilename'] = "
      <script type='text/javascript'><!--
         function cloneAndAppend(event, input) {
           if (!input) input = this;
           var newNode = input.parentNode.cloneNode(true);
           var newInput = newNode.getElementsByTagName(\"input\")[0];
           newInput.value = \"\";
           newInput.onchange = cloneAndAppend;
           newInput.name = input.name + \"X\";
           input.parentNode.parentNode.appendChild(newNode);
         }
//--></script>
";


$InputTags['file'][':html'] =
     "<div>
        <input onchange=\"cloneAndAppend(null, this)\" type=\"file\"
style=\"\" \$InputFormArgs />
        <br/><br/>
      </div>
";

?>

Runs perfectly, even by dragging multiple file at one on the filename
input box.

only restriction: needs Firefox and a extension

nice to be done: the name of the new fileinputboxes are generated by
just adding and "X". May cause duplicates when changing an input twice.
maybe the name should be generated appending timestamps to the name. or
how about adding [] (don't kow to much about PHP-HTML-variable-handling) ?

Worth to add this to http://www.pmwiki.org/wiki/PmWiki/Forms (or an own
recipe) ?


Cheers

Knut

PS: another nice discovery of today:
http://www.walterzorn.de/dragdrop/dragdrop.htm - have to see how that
could be integrated into pmwiki (and for which purpose)...




More information about the pmwiki-users mailing list