Saturday, July 31, 2010

adding "loading gif" with ajax to my uploading image process

hi,

so far i successfully coded an image upload and resize feature. but i
want my website to be web 2.0 compliant. so i read about ajax and
thought its really easy to do ajax with cake. appearently i've got
problems.

all this happens with controller "users", model "User" and View
"editProfile.ctp":

i wanna show a typical loading gif while the picture is uploaded. when
uploading is done, the gif disappears and the picture is shown.

so far i have the form in my view where i define url and options:


echo $ajax->form('User','post', array (
'url'=> array(
'controller' => 'users',
'action' => 'uploadProfileImage'
),
'update' => 'image_preview',
'before' => 'startLoading()',
'complete' => 'endloading()',
'failure' => 'failure()'
));
echo $form->file('User');
echo $form->button('Upload', array('type' => 'submit'));
echo $form->end();

with my divs in the view for showing the loading icon and picture

<div id="loading" style="display:none;">
<?php echo $html->image('../img/icons/loader.gif'); ?>
</div>

<div id="image_preview">
<?php echo $html->image('profilepics/small/'.
$user['image_path']); ?>
</div>


in the <head> section of my view

<?php
echo $this->Html->css(array('profile.css'));
echo $this->Html->charset();
echo $javascript->link('scriptaculous-js-1.8.3/lib/prototype');
echo $javascript->link('scriptaculous-js-1.8.3/src/scriptaculous');
?>


<script id="demo" type="text/javascript">

var error = false;

function startLoading(){
error=false;
Element.show('loading');
Element.hide('image_preview');
}

function endLoading(){
Element.hide('loading');
if(!error) Element.show('image_preview');
}

function failure(){
alert('Es ist ein Fehler aufgetreten');
error=true;
}

</script>

the actual uploading process is triggered in a function in my
controller

function uploadProfileImage()
{

$image_path = $this->Image->upload_image_and_thumbnail($this-
>data,"",200,150,$this->Session->read('User.username'), true);

$updates = $this->User->findByUsername($this->Session-
>read('User.username'));
$updates['User']['image_path']= $updates['User']['username']."/".
$updates['User']['username'].".jpg";
$this->User->save($updates);

$this->redirect(array('controller' => 'users', 'action' =>
'editprofile'));

}

the problem is, i only see the loading icon endlessly and it seems my
function in the controller is not called correctly.


can anyone help me?

thx :)

Check out the new CakePHP Questions site http://cakeqs.org and help others with their CakePHP related questions.

You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to cake-php@googlegroups.com
To unsubscribe from this group, send email to
cake-php+unsubscribe@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php?hl=en

No comments: