Saturday, July 31, 2010

file uploading. problems with ajax and jquery

hi,

i found out that its not poosible to upload files with js. so i tried
jquery. so far my uploading funtion works perfectly without ajax, but
i wanna have a loading icon during the upload, the web 2.0 feeling. i
tried to do it this way

http://elmicoxcodes.blogspot.com/2007/03/asynchronous-upload-like-ajax-1.html

in my view i have:
-----------------------------------
in the head section:
<script type="text/javascript" src="js/ajaxupload.js"></script>

then:

<form action="uploadProfileImage" method="post" name="standard_use"
id="standard_use" enctype="multipart/form-data">
<p><input type="file" name="filename" /></p>

<button onClick="ajaxUpload(this.form,'users/
uploadProfileImage','image_preview','Loading...','Error in upload');
return false;" type="button">test</button>
</form>
-----------------------------------

i put the ajaxupload.js file in webroot/js. in my "onclick" event i
try calling my function that does all the uploading and resizing.

this function is in my controller "users_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'));

}
-----------------------------------
now if i select a file and hit the button, nothing happens. really
nothing..

any idea what is going wrong? i included the .js-file and i am calling
all function with its correct parameters..it seems cake wont react on
my onclick-event..

BIG THX


PS:


I N C A S E: this is the ajaxupload.js
-------------------
function $m(theVar){
return document.getElementById(theVar)
}
function remove(theVar){
var theParent = theVar.parentNode;
theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
if(obj.addEventListener)
obj.addEventListener(evType, fn, true)
if(obj.attachEvent)
obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
if(obj.detachEvent){
obj.detachEvent('on'+type, fn);
}else{
obj.removeEventListener(type, fn, false);
}
}
function isWebKit(){
return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function
ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http)
{
var detectWebKit = isWebKit();
form = typeof(form)=="string"?$m(form):form;
var erro="";
if(form==null || typeof(form)=="undefined"){
erro += "The form of 1st parameter does not exists.\n";
}else if(form.nodeName.toLowerCase()!="form"){
erro += "The form of 1st parameter its not a form.\n";
}
if($m(id_element)==null){
erro += "The element of 3rd parameter does not exists.\n";
}
if(erro.length>0){
alert("Error in call ajaxUpload:\n" + erro);
return;
}
var iframe = document.createElement("iframe");
iframe.setAttribute("id","ajax-temp");
iframe.setAttribute("name","ajax-temp");
iframe.setAttribute("width","0");
iframe.setAttribute("height","0");
iframe.setAttribute("border","0");
iframe.setAttribute("style","width: 0; height: 0; border: none;");
form.parentNode.appendChild(iframe);
window.frames['ajax-temp'].name="ajax-temp";
var doUpload = function(){
removeEvent($m('ajax-temp'),"load", doUpload);
var cross = "javascript: ";
cross += "window.parent.$m('"+id_element+"').innerHTML =
document.body.innerHTML; void(0);";
$m(id_element).innerHTML = html_error_http;
$m('ajax-temp').src = cross;
if(detectWebKit){
remove($m('ajax-temp'));
}else{
setTimeout(function(){ remove($m('ajax-temp'))}, 250);
}
}
addEvent($m('ajax-temp'),"load", doUpload);
form.setAttribute("target","ajax-temp");
form.setAttribute("action",url_action);
form.setAttribute("method","post");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("encoding","multipart/form-data");
if(html_show_loading.length > 0){
$m(id_element).innerHTML = html_show_loading;
}
form.submit();
}

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: