Digital Variants: Bare bones multi-file upload

What I need for HritServer is an import facility that can handle multiple file uploads. I've found many fancy scripts for doing this that are way too complex and too specific. Sometimes all you need is a bare bones solution you can tailor to suit your needs rather than a fully fledged product you have to spend ages understanding and cutting down to size. Also I hate building in dependencies that only increase the tendency for code to break. So here's my simple contribution to the HTML multifile upload problem.

The basic idea is to have one <input type="file"> for every file you want to upload. But you hide all but the current empty one. So when the user selects the only visible input file element it sets itself to the chosen file, adds itself to an invisiible list of input file elements, and creates a fresh one for the next time. To make it easier to see what's already been selected I maintain a secondary list of paths in a table. Next to each entry is a remove button that let's you take out individual entries. That's it. Here is the php code to handle the upload on the server side. Replace this with something else if you like, such as Apache file upload in Java:

And here is the HTML, with self-contained javascript.

<html>
<head>
<style type="text/css">
input.invisible { display: none }
</style>
<script type="text/javascript">
function remove( value )
{
    var repo = document.getElementById("repository");
    var child = repo.firstChild;
    while ( child != null )
    {
        if ( child.nodeName=="INPUT"&& child.value==value )
        {
            child.parentNode.removeChild(child);
            break;
        }
        child = child.nextSibling;
    }
    // now look at the table
    var table = document.getElementById("listing");
    child = table.firstChild;
    var finished = false;
    while ( child != null && !finished )
    {
        if ( child.nodeName=="TR" )
        {
            var gchild = child.firstChild;
            while ( gchild != null )
            {
                if ( gchild.nodeName=="TD" )
                {
                    var ggchild = gchild.firstChild;
                    if ( ggchild!=null&&ggchild.nodeName=="SPAN" )
                    { 
                        if ( ggchild.textContent!=null&&ggchild.textContent==value )
                        {
                            finished = true;
                            child.parentNode.removeChild(child);
                            break;
                        }
                    }
                }
                gchild = gchild.nextSibling;
            }
        }
        child = child.nextSibling;
    }
}
function doaddfile()
{
    var input1 = document.getElementById("input1");
    var repo = document.getElementById("repository");
    var listing = document.getElementById("listing");
    var parent = input1.parentNode;
    var input2 = document.createElement('input');
    input2.setAttribute( "type", "file" );
    input2.setAttribute( "name", "uploadedfile[]" );
    input2.setAttribute( "onchange", "doaddfile()" );
    input1.setAttribute( "class", "invisible" );
    input1.removeAttribute("id");
    input2.setAttribute("id","input1");
    parent.removeChild( input1 );
    parent.appendChild( input2 );
    repo.appendChild( input1 );
    // now create the row in the listing table
    var text = document.createTextNode(input1.value);
    var span = document.createElement("span");
    span.appendChild(text);
    var row = document.createElement("tr");
    var cell1 = document.createElement("td");
    cell1.appendChild(span );
    row.appendChild( cell1 );
    // add a button to remove the entry
    var button = document.createElement("input");
    button.setAttribute("type","button");
    button.setAttribute("onclick","remove('"+input1.value.replace(/\\/g,"\\\\")+"')");
    button.setAttribute("class","remove");
    button.setAttribute("value","remove");
    var cell2 = document.createElement("td");
    row.appendChild( cell2 );
    cell2.appendChild( button );
    if ( listing.firstChild == null )
 listing.appendChild( row );
    else 
        listing.insertBefore( row, listing.firstChild );
}
</script>
</head>
<body>
<form enctype="multipart/form-data" action="/upload.php" method="POST">
<div>
Choose a file to upload: <input id="input1" onchange="doaddfile()" name="uploadedfile[]" type="file" /><br />
</div>
<table id="listing">
</table>
<div id="repository">
</div>
<input type="submit" value="Upload File" />
</form>
</body>
</html>

Call the first "upload.php" and the second "upload.html" then put them both in the root document directory of your web-server. If you have php installed navigate to /upload.html and take it from there. You can add styling and change the server script easily because it is simple.

Digital Variants

Friday, 30 March 2012

Bare bones multi-file upload

No comments:

Post a Comment

Blog Archive