How to I preload existing files and display them in the blueimp upload table?

Question

I am using the jquery-ui version of Blueimp upload and I like how I can format a table and display files that were just uploaded. But I'd like to use it as a file manager as well so I want to preload existing files and display than as if they were just uploaded. How can I do that? A sample link to where someone else has addressed this would suffice. BTW, I am uploading several different file types, not just images.

Thanks!

Answer 1

Or without an ajax call:

1. Prepare array containing details of existing files, e.g:

   var files = [
       {
           "name":"fileName.jpg",
           "size":775702,
           "type":"image/jpeg",
           "url":"http://mydomain.com/files/fileName.jpg",
           "deleteUrl":"http://mydomain.com/files/fileName.jpg",
           "deleteType":"DELETE"
       },
       {
           "name":"file2.jpg",
           "size":68222,
           "type":"image/jpeg",
           "url":"http://mydomain.com/files/file2.jpg",
           "deleteUrl":"http://mydomain.com/files/file2.jpg",
           "deleteType":"DELETE"
       }
   ];
   

2. Call done callback

   var $form = $('#fileupload');        
   
   // Init fileuploader if not initialized
   // $form.fileupload();
   
   $form.fileupload('option', 'done').call($form, $.Event('done'), {result: {files: files}});
   

Answer 2

I also had the same problem. It is not magic how it works. I recommend to examine the UploadHandler.php file. Then you will be able to modify this plugin accordind to your needs.

The code above in your second post is just an ajax call to the uploader script (by default index.php in server/php/ folder). The call method is set to "get" by default in $.ajax object.

Open the UploadHandler.php file and go to the class method "initialize(...)". You will see how the call with "get" handled. UploadHandler calls the class method this->get(.:.) to prepare and send the list of existing files. If you use other upload directory, you need pass a parameter to the UploadHänder. Simply chage the url property in the $.ajax object like :

url: $('#fileupload').fileupload('option', 'url')+'?otherDir='+myDir,

then you should initialize the option property of the UploadHandler before you create a new UploadHandler object like this:

$otherDir = trim($_REQUEST['otherDir']);
$otherDir_url = [anyURL] .'/'.$otherDir;//so that the files can be downloaded by clicking on the link

$options = array(
'upload_dir'=> $otherDir,
'upload_url'=> $otherDir_url,
);

$upload_handler = new UploadHandler($options);