User Profile

User
 losttime
Location
 Utah, USA
Time Zone
 
URL
 http://www.dconstructing.com

Recent Comments

Posted 15/10/2009 11:56pm
Because the author does not seem to be contributing to these comments, here's what I've figured out so far.

1) Download the code he provided and place it in app/views/helpers/ajaxupload.php

2) Go to the Ajaxupload page he linked to and download ajaxupload.js (http://valums.com/ajax-upload/). Place this file in webroot/js/ajaxupload.js

3) Download the prototype javascript library (http://www.prototypejs.org/) and place it in webroot/js/prototype.js

4) Create a reference to the javascript files we just downloaded. There are a few different ways to do this. For my needs, in default.ctp, I have this:

View Template:


<head>
<?php echo $javascript->link(array('prototype')); ?>
</head>
You don't need to reference ajaxupload.js, it gets called when it's needed.

5) In your controller, make sure you have this:

Controller Class:

<?php 
var $helpers = array('Javascript', 'Ajaxupload', 'Ajax');
?>
6) In the view which you will use to upload the file, you will need to set some options, call the ajaxupload helper, and setup a trigger button (in that order):

View Template:


// set some options
// $options['data'] passes additional information along with the file
// $options['files'] specifies the filetype 'image','text','video', or 'audio'
// $options['update']['id'] defines a DOM object that you want to update
//     with the result of the AJAX request.
// $options['update']['reply'] can be set to false to use the name of
//     the file you just uploaded in the update, or true if you want to
//     use the response returned by your controller/action.
$options = array(
    'data' => array(
        'name' => 'value'
    ),
    'files' => 'image',
    'update' => array(
        'id' => 'test',
        'reply' => true
    )
); 

// call the ajaxupload helper
// 'trigger_id' refers to the button, so whatever id you give
// the button, you need to put here. 'controller' and 'action'
// define which controller and method will be called to handle
// the file upload.
echo $ajaxupload->upload('trigger_id', array('controller' => 'posts', 'action' => 'upload_img'),$options);

// setup a trigger button
// This is just a simple button. It can be inside or outside a form
echo $form->button('Text For Button', array('type'=>'button','id'=>'trigger_id'));



Handling the upload:



In your controller, the file is accessed with:

Controller Class:

<?php 
$this->data['XXXXX']['File']
?> where XXXXX is the name of the model which corresponds to the controller you specified when you called the ajaxhelper in your view. If I followed the proper naming conventions in my example, the controller is 'posts' (see it?), which would correspond to the model 'Post'. If you're using the 'images' controller, you should be entering 'Image' for XXXXX.

Now for a few quirks:



1) $options['data'] only accepts one name=>value pair.
2) The value of $options['data'] cannot include a dot '.' (a period).
3) As mentioned earlier, $options['busy'] and $options['disable'] don't seem to work.

I've rewritten part of the code posted above to correct issues 1 and 2, but haven't gotten to 3 yet. Find the _options() method and replace it with this:

Helper Class:

<?php 
function _options($options = null) {
    $return = array();
    if (!empty($options['data'])) {
        $data = $options['data'];
        $ret = "data: {";
        foreach ($data as $key=>$value) {
            $retdata[] = '\''.$key.'\' : \''.$value.'\'';
        }
        $retdata = join(' , ',$retdata);
        $ret .= $retdata."} ";
        $return[] = $ret;
    }
    if (!empty($options['autoSubmit'])) {
        $return[] = "autoSubmit: {$options['autoSubmit']}";
    }
    if (!empty($options['responseType'])) {
        $return[] = "responseType: {$options['responseType']}";
    }
    return $return;
}
?>
I hope this helps some people.
Report this