Need advice on Ajax fileupload

I am trying get use of Ajax file uploader http://valums.com/ajax-upload/

The doc says:

var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: '/server/upload'
    // WHAT IS action:?
});

The element property means what element ID is used as Upload button. What is act开发者_运维问答ion? It must be some sort of handler for uploaded files?

How I can handle uploaded files and where are located?

The doc says

// events         
// you can return false to abort submit
onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){},
onComplete: function(id, fileName, responseJSON){},
onCancel: function(id, fileName){},

I want when upload complete display a list of files somewhere, say in div with ID=list

The short snippet will be highly appreciated and awarded.

I've used File Uploader quite a lot and I think it is the best file uploader out there.

The action is the method (URL) which receives the call from your Ajax client script. You have to define a DIV in your HTML:

<div id="uploaderFile"></div>

I've used a javascript function to build my uploader around the DIV:

function CreateImageUploader() {
    var uploader = new qq.FileUploader({
        element: $('#uploaderFile')[0],
        template: '<div class="qq-uploader">' +
                              '<div class="qq-upload-drop-area"><span>Drop files here to upload</span></div>' +
                              '<div class="qq-upload-button ui-button ui-widget ui-corner-all ui-button-text-only ui-state-default">Seleziona il Listino Excel</div>' +
                              '<ul class="qq-upload-list"></ul>' +
                              '</div>',
        hoverClass: 'ui-state-hover',
        focusClass: 'ui-state-focus',
        action: 'Home/UploadImage',
        allowedExtensions: ['jpg', 'gif'],
        params: { },
        onSubmit: function(file, ext) {

            },
        onComplete: function(id, fileName, responseJSON) {
            $("#PopupImageUploader").dialog('close');
            }
        }
    });
}

What happens here is you're creating an uploader around this element element: $('#uploaderFile')[0]. I've used the standard template but you can change the appearance. When you've done that everything is pretty much setup on the client-side. On the server side (it depends what you're using) you have to intercept and read the file and persist it.
I use ASP.NET MVC. You can find my action here and here Your server-side code will manage to persist the file where you want and will return infos to the client script.
Personally I return json data which I manage with the event onComplete to: close a dialog (like in the example); show a message etc etc etc.

If you want to pass parameters back to the client on the server side you can return a JSON object. I would do something like this:

return ("{success:true, newfilename: '" + newFileName + "'}");

I reckon that in PHP could be something like this:

echo {success:true, newfilename: '" + newFileName + "'}";

Forgive me if there are mistakes in that but I've never written a single PHP line in my whole life ;-)

the client side now can check the JSON object like this:

onComplete: function(id, fileName, responseJSON) {
   alert(responseJSON.newfilename);
}

As you can see I pass back the result of the action: success:true or success:false so I can show a warning to the user:

onComplete: function(id, fileName, responseJSON) {
if (responseJSON.success)
{
    alert(responseJSON.newfilename);
}
else {
    alert("something wrong happened");
}
}

How I can handle uploaded files and where are located?

This depends on your webserver and backend language. In PHP have a look at the $_FILES array.

What is action? It must be some sort of handler for uploaded files?

The URL the form used to upload the file is submitted to.

What is action? It must be some sort of handler for uploaded files?

Yes, same as for the HTML <form> element's attribute.

How I can handle uploaded files

With a server side script written in your server side language of preference.

and where are located?

Probably as a stream to STDIN. The forms library you use with the aforementioned server side language have methods to extract it automatically.