Friendly File Names

Last post 01-01-2012, 7:26 AM by PeterK. 3 replies.
Sort Posts: Previous Next
  •  12-22-2011, 5:24 AM 72400

    Friendly File Names

    Hi,
     
    I'm evaluating phpfileuploader and it works very well.
     
    I'm using the 'start uploading manually version' (http://phpfileuploader.com/demo/form-manualstart.php), and would like to add a 'User-Friendly File Name' field to the form, so that users can add a meaningful title/name to their files which are to be uploaded. 
     
    So, when a user has selected multiple files, and the list displays just before pressing the 'Upload Files' button, I need a field beside each selected file name where the user can type a meaningful name or title.
     
    Any suggestions how this can be achieved using phpfileuploader would be much appreciated.
     
    Thanks,
     
     
    Peter
     
     
     
     
  •  12-22-2011, 7:45 AM 72403 in reply to 72400

    Re: Friendly File Names

    Hi PeterK,
     
    The example below shows you how to custom the queue table, hope it help
     
    <?php require_once "phpuploader/include_phpuploader.php" ?>
    <?php session_start(); ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Demo 1 - use SaveDirectory property</title>
    </head>
    <body>
    <div>
    <hr/>
    <?php
    $uploader=new PhpUploader();
    $uploader->MaxSizeKB=10240;
    $uploader->Name="myuploader";
    $uploader->MultipleFilesUpload=true;
    $uploader->InsertText="Select multiple files (Max 10M)";
    $uploader->AllowedFileExtensions="*.jpg,*.png,*.gif,*.bmp,*.txt,*.zip,*.rar";
    $uploader->Render();
    ?>
    </div>
    <div id="queuediv" style="display: none;">
                <div id="queuedivtablecontainer">
                </div>
                <div style="font-size: larger;  margin: 4px;">
                 
                    <a href="#" onclick="cancelalltasks();return false;">Cancel all tasks.</a>
                </div>
            </div>
    <script type='text/javascript'>
    var uploader = document.getElementById("myuploader");
    uploader.handlequeueui=myqueueuihandler;
    function myqueueuihandler(list)
    {
    if(list.length<2)
    {
    document.getElementById("queuediv").style.display="none";
    }
    else
    {
    document.getElementById("queuediv").style.display="";
    var container=document.getElementById("queuedivtablecontainer");
    container.innerHTML="";
    var table=document.createElement("table");
    table.style.borderCollapse="collapse";
    table.cellSpacing=0;
    table.cellPadding=4;
    table.border=1;
    table.borderColor="darkgreen";
    for(var i=0;i<list.length;i++)
    {
       var img=document.createElement("IMG");
       var imgFinish=document.createElement("IMG");
       var imgError=document.createElement("IMG");
       var imgUpload=document.createElement("IMG");
       var imgQueue=document.createElement("IMG");
       img.src="phpuploader/resources/circle.png";
       imgFinish.src="phpuploader/resources/uploadok.png";
       imgError.src="phpuploader/resources/uploaderror.png";
       imgUpload.src="phpuploader/resources/uploading.gif";
       imgQueue.src="phpuploader/resources/stop.png";
       //you can handle the file name here
    //if(name.length>6)
    //{
    //    name="something"
    //}
    var name=list[i].FileName;
    var size=list[i].FileSize; // (or -1)
    var stat=list[i].Status; // Finish|Error|Upload|Queue
    var func=list[i].Cancel;
    var row=table.insertRow(-1);
    row.insertCell(-1).appendChild(img);
    row.insertCell(-1).innerHTML=name;
    //handel width of name <td> here
    row.cells[1].style.width="400px";
    var last=row.insertCell(-1);
    if(stat=="Queue")
    {
    imgQueue.onclick=func;
    last.appendChild(imgQueue);
    }
    else if(stat=="Finish")
    {
           last.appendChild(imgFinish);
    }
    else if(stat=="Error")
    {
           last.appendChild(imgError);
    }
    else if(stat=="Upload")
    {
           last.appendChild(imgUpload);
    }
    }
    container.appendChild(table);
    }
    return false; //hide the default;
    }
    function cancelalltasks()
    {
    uploader.cancelall();
    }
    </script>
    </body>
    </html>
     
    Regards,
     
    Ken 
  •  12-22-2011, 8:20 AM 72408 in reply to 72403

    Re: Friendly File Names

    Thanks for the fast response Ken,
     
    I'll play with what you've posted and see does it work for me.
     
    Thanks again,
     
     
    Peter
     
     
  •  01-01-2012, 7:26 AM 72470 in reply to 72408

    Re: Friendly File Names

    Hi,
    I'm not having much luck applying your example code to the form-manualstart.php file provided.
     
    Can you suggest how to integrate into same ?
     
    Thanks in advance,
     
     
    Peter.
     
     
View as RSS news feed in XML