how to process an upload file in mootools? - php

Question

I already search about this and I cannot use ajax in file uploading, but all I need to do is process my file through an ajax then pass it to my controller (where I created and object file to save in a directory), so how can I process an upload file trough an ajax mootols, I already do it and nothings happens, no plugins please, I need just to someone guide me
this is my code
#f1_upload_process{
z-index:100;
position:absolute;
visibility:hidden;
text-align:center;
width:400px;
margin:0px;
padding:0px;
background-color:#fff;
border:1px solid #ccc;
}
</style>
<p id="f1_upload_process">Loading...<br/></p>
<p id="result"></p>
<form method="post" action="" enctype="multipart/form-data">
<label for="file">Subir un archivo</label>
<input type="file" name="file" id="fileArchivo" />
<input type="submit" name="submit" id="btnSubir" value="upload file" />
<iframe name="iframUpload" id="iframeUpload" type="file" style="display:none"></iframe>
</form>
mootools ajax
window.addEvent("domready",function(){
cargarIndex();
});
function cargarIndex()
{
var prueboRequest = new Request({
method: 'POST',
url: '../CONTROLLER/inicio.php',
onRequest: function() {},
onSuccess: function(texto, xmlrespuesta){
document.getElementById('subirarchivo').innerHTML= texto;
$('btnSubir').addEvent('click',function(){beginUploading()});
},
onFailure: function(){alert('Error!');}
}).send();
}
function beginUploading(){
var prueboRequest = new Request({
method: 'POST',
url: '../Controller/ControllerSubirArchivo.php',
onRequest: function() {},
onSuccess: function(texto, xmlrespuesta){
onFailure: function(){alert('Error!');}
}).send();
I already search but all I have found is this but with jquery, and I want something similar to:
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
//Name of the file input box
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// check for valid file extension
status.text('Only JPG, PNG or GIF files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
if(response==="success"){
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
} else{
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
}

Answer 1

As Dimitar Christoff said, no way to have an ajax file upload without a little bit of cross browser headache for now…
I would recommend the plupload project so you're sure it's cross browser. A plugin from the forge could also do the trick but separating the javascript file upload library is a good idea these days. Considering that the implementation of the HTML5 API is still partial on a lot of browsers, you may have to update the script soon…