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

Knut Alboldt pmwiki at alboldt.de
Thu Aug 30 10:22:28 CDT 2007


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