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…