Getting uploadify to work

[eluser]Bob Sawyer[/eluser]
OK, got it working. I thought I'd share my code in hopes that someone benefits from it.

As we've previously discovered, Uploadify does not work with CI's MVC structure or its "pretty URLs," so following the lead of others in this thread, I used the upload.php script included in the Uploadify archive. But I needed some additional functionality -- additional values needed to be passed to the script, and the file data needed to be inserted into the database after upload.

First, I copied and modified several functions from CI's Upload lib that I needed to prep the files:

Code:

function set_filename($path, $filename, $file_ext) {
   mt_srand();
   $filename = md5(uniqid(mt_rand())).$file_ext;    
   if ( ! file_exists($path.$filename)) {
      return $filename;
   } else {
      $filename = str_replace($file_ext, '', $filename);
      $new_filename = '';
      for ($i = 1; $i < 100; $i++) {            
         if ( ! file_exists($path.$filename.$i.$file_ext)) {
            $new_filename = $filename.$i.$file_ext;
            break;
         }
      }
      $new_filename .= '.'.$file_ext;
      return $new_filename;
   }
}

function prep_filename($filename) {
   if (strpos($filename, '.') === FALSE) {
      return $filename;
   }
   $parts = explode('.', $filename);
   $ext = array_pop($parts);
   $filename    = array_shift($parts);
   foreach ($parts as $part) {
      $filename .= '.'.$part;
   }
   $filename .= '.'.$ext;
   return $filename;
}

function get_extension($filename) {
   $x = explode('.', $filename);
   return '.'.end($x);
}

Then I added a few additional checks, tweaks, and vars to the existing "if" statement:

Code:

if (!empty($_FILES)) {
   $path = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
   $client_id = $_GET['client_id'];
   $file_temp = $_FILES['userfile']['tmp_name'];
   $file_name = prep_filename($_FILES['userfile']['name']);
   $file_ext = get_extension($_FILES['userfile']['name']);
   $real_name = $file_name;
   $newf_name = set_filename($path, $file_name, $file_ext);
   $file_size = round($_FILES['userfile']['size']/1024, 2);
   $file_type = preg_replace("/^(.+?);.*$/", "\\1", $_FILES['userfile']['type']);
   $file_type = strtolower($file_type);
   $file_ext = get_extension($_FILES['userfile']['name']);
   $targetFile =  str_replace('//','/',$path) . $newf_name;
   move_uploaded_file($file_temp,$targetFile);

   $filearray = array();
   $filearray['file_name'] = $newf_name;
   $filearray['real_name'] = $real_name;
   $filearray['file_ext'] = $file_ext;
   $filearray['file_size'] = $file_size;
   $filearray['file_path'] = $targetFile;
   $filearray['client_id'] = $client_id;

   $json_array = json_encode($filearray);
   echo $json_array;
}

Note the existence of "$_GET['client_id']" and the json_encoded array. That's going to help me post this info to the db. Now, my Javascript...

The dashboard controller's index() function checks the user role and applies a number of different variables through a switch() statement. We're assuming that a user with the role of "Client" has logged in and wants to upload files:

Code:

switch($role_name) {
      case "Client":
      $client_id = $this->Sql->getClientUserClientId($user_id);
      $uploadify = <<<JS
&lt;script type="text/javascript"&gt;
$(document).ready(function() { // wait for document to load  
   $('#userfile').fileUpload({
      'uploader' : '/js/uploader.swf',
      'script' : '/uploadify/upload.php',
      'scriptData' : {'client_id':'
JS;
      
      $uploadify.= $client_id;
      $uploadify.= <<<JS2
'},
      'scriptAccess' : 'always',
      'multi' : true,
      'fileDataName' : 'userfile',
      'cancelImg' : '/images/icon-delete.gif',
      'auto' : true,
      'folder' : '/files',
      'fileExt' : '*.doc;*.docx;*.pdf;*.jpg;*.png;*.zip',
      'fileDesc' : 'Select files of type .doc, .pdf, .jpg, .png, or .zip',
      'sizeLimit' : '3072000',
      'simUploadLimit' : '8',
      'onError' : function (a, b, c, d) {
         if (d.status == 404)
            alert('Could not find upload script. Use a path relative to: '+'&lt;?= getcwd() ?&gt;');
         else if (d.type === "HTTP")
            alert('error '+d.type+": "+d.status);
         else if (d.type ==="File Size")
            alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
         else
            alert('error '+d.type+": "+d.text);
      },
      'onComplete' : function (event, queueID, fileObj, response, data) {
         $.post("/admin/dashboard/uploadify/", { 'filearray' : response });
      },
      'onAllComplete': function(event, data) {
         alert("Uploading Complete!\\nTotal uploaded: "+data.filesUploaded+"\\nTotal errors: "+data.errors+"\\nClose this box to refresh the page and see your uploaded files.");
         [removed].href="/admin/dashboard";
      }
   });
...

Note that I'm using the onComplete callback of Uploadify to post the 'response' value to my dashboard controller's uploadify() function, which looks like this:

Code:

function uploadify() {
     $this->Sql->insertFile(json_decode($_POST['filearray']));
}

Simple DB insert, nothing else. I use Uploadify's onAllComplete callback to pop an alert on the user to let them know that all files have been uploaded and other info. When they click “OK” to close the alert box, the page refreshes and they can see their uploaded files displayed in a list with other uploaded files.

I hope this helps someone. It took me most of the weekend, muddling through trial and error and looking up possible solutions on this board, the Uploadify boards, Google Groups, and a few others before I finally stumbled across the final solution earlier this evening.

Cheers,
Bob