Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Show the files listing
  • Hello and thanks for Uploadify, sorry for my question, but I didn't find anything about it in the boards.

    I use the simple version of Uploadify as shown below :
    <script type=\"text/javascript\">
    $(document).ready(function() {
    $('#userfile').fileUpload({
    'uploader': '../include/js/uploadify/uploader.swf',
    'script': '../include/js/uploadify/upload.php',
    'folder': '../images/documents/<?php echo $user_folder; ?>',
    'cancelImg': '../include/js/uploadify/cancel.png',
    'auto' : true
    });
    });
    </script>


    I already know how to show the files listing from the upload folder using PHP, but how can I refresh the content of the div "listing" once a file has been posted ?

    <input type='file' name='userfile' id='userfile' />
    <div id=\"listing\">while($file = readdir($open)) {...}</div>


    I'm just a beginner with jQuery and Ajax so I don't know how to do this yet...
    I guess that
    should stay empty and that jQuery allows to open in that div an external php listing the files, refreshed by Uploadify's onComplete... But how to do that ?

    Can you help me on this ? I'm sure lots of other users would be as thankful as I am.
  • In onAllComplete use jQuery's $.load() ie
    $('#listing').load('listing.php');

    The PHP file you load retrieves the directory listing and formats it how you would like it to display in the div.
    while($file = readdir($open)) {...}
  • Yes, it works ! Thanks a lot !

    So for people who want to do the same, here is the code :
    I use $user_folder PHP var to choose the folder from a user database...

    <script type=\"text/javascript\">
    $(document).ready(function() {
    $('#listing').load('listing.php?folder=<?php echo $user_folder; ?>').fadeIn(\"slow\")
    $('#userfile').fileUpload({
    'uploader': '../include/js/uploadify/uploader.swf',
    'script': '../include/js/uploadify/upload.php',
    'folder': '../images/documents/<?php echo $user_folder; ?>',
    'cancelImg': '../include/js/uploadify/cancel.png',
    'auto' : true,
    'onAllComplete' : function() {
    $('#listing').load('listing.php?folder=<?php echo $user_folder; ?>').fadeIn(\"slow\")
    }
    });
    });
    </script>


    In the body section :

    echo \"<input type='file' name='userfile' id='userfile' />\";
    echo \"<div id='listing'></div>\";


    Then comes listing.php :

    <?php
    $user_folder=$_GET['folder'];
    $upload_directory = \"../images/documents/\".$user_folder.\"/\";
    $open = opendir($upload_directory);
    $uploaded_files = \"\";
    $nb_files = 0;
    while($file = readdir($open)) {
    if(!is_dir($file) &amp;&amp; !is_link($file)) {
    $bytes_fs = filesize($upload_directory.$file);
    $kb_fs = round($bytes_fs/1024);
    $nb_files++;
    $uploaded_files .= \" <tr style='background: #fff;'>
    <td style='text-align: left;'><a href='\".$upload_directory.$file.\"' title='\".$file.\"'>\".$file.\"</a> (\".$bytes_fs.\" bytes) (\".$kb_fs.\" Kb)</td><td><a href='delfile.php?folder=\".$user_folder.\"&amp;file=\".$file.\"'><img src='../styles/cross.png' alt='Delete' /></a></td>
    </tr>
    <tr style='background: #eee;'>
    <td style='text-align: left; text-indent: 20px'>Sent on <strong>\".date(\"d/m/Y - H:m\", filemtime($upload_directory.$file)).\"</strong></td><td></td>\";
    $uploaded_files .=\"
    </tr>
    \";
    }}
    echo \"<table style='border: 2px dotted #000; width: 100%;'>\";
    if($uploaded_files == \"\") echo \" <tr>
    <td style='background: #fff; color: #000; text-align: center'><br /><strong>Empty folder.</strong><br /><br /></td>
    </tr>
    \"; else echo $uploaded_files;
    echo \"</table>\";
    ?>


    Ok, now how to ajaxify the file deleting by delfile.php ? I don't know...
  • Just implemented this code...It seems to work really well. Thanks!
    Is there an easy way to list the files alphabetically?
    Right now the order seems to be random.

    Cheers!
  • rather outputting the readdir directly. put the information into an array and then sort the array. From there you can output the array.
  • Travis,

    Thanks. I've been experimenting with that actually - but I keep running into errors.
    I don't really know much PHP, so I guess this is a simple way to start learning some.
    Although my head is starting to hurt from bashing against my desk.

    :)
  • I haven't tested this code but it should do what you are after

    To find the code changes easily I have spaced it apart from the original code

    <?php
    $user_folder=$_GET['folder'];
    $upload_directory = \"../images/documents/\".$user_folder.\"/\";
    $open = opendir($upload_directory);
    $uploaded_files = \"\";
    $nb_files = 0;
    while($file = readdir($open)) {
    if(!is_dir($file) &amp;&amp; !is_link($file)) {


    $fileArray[] = $file;
    }
    }
    sort($fileArray);
    foreach ($fileArray as $file) {


    $bytes_fs = filesize($upload_directory.$file);
    $kb_fs = round($bytes_fs/1024);
    $nb_files++;
    $uploaded_files .= \" <tr style='background: #fff;'>
    <td style='text-align: left;'><a href='\".$upload_directory.$file.\"' title='\".$file.\"'>\".$file.\"</a> (\".$bytes_fs.\" bytes) (\".$kb_fs.\" Kb)</td><td><a href='delfile.php?folder=\".$user_folder.\"&amp;file=\".$file.\"'><img src='../styles/cross.png' alt='Delete' /></a></td>
    </tr>
    <tr style='background: #eee;'>
    <td style='text-align: left; text-indent: 20px'>Sent on <strong>\".date(\"d/m/Y - H:m\", filemtime($upload_directory.$file)).\"</strong></td><td></td>\";
    $uploaded_files .=\"
    </tr>
    \";
    }}
    echo \"<table style='border: 2px dotted #000; width: 100%;'>\";
    if($uploaded_files == \"\") echo \" <tr>
    <td style='background: #fff; color: #000; text-align: center'><br /><strong>Empty folder.</strong><br /><br /></td>
    </tr>
    \"; else echo $uploaded_files;
    echo \"</table>\";
    ?>
  • Sah-weet!

    Thanks Travis - I'm going to give that a test right now.

    Much appreciated!

    :)
  • If you want less overhead you can just append an img tag to the section where you want it to show and pass back the image name to the script and since you know were the image will be just add the image name to a path. Not a big deal but less overhead then loading an additional page just to get basically what you already have so why make it work more?