Need advice on Ajax fileupload

Question

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 action? 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.

score 2 · Accepted Answer · edited May 23 '17 at 12:04

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");
}
}

I think my problem is that I simly have a few knowledge on how AJAX works. I still cant figure out how it works - so the URL handler is not loaded in the browser but is just called? — Captain Comic, Mar 18 '11 at 08:15
if you're using PHP you can use their example here: https://github.com/valums/ajax-upload/blob/master/server-side/upload-handler.php Yes, the URL is the server side code you use to persist the file you've chosen from your disk. — LeftyX, Mar 18 '11 at 08:22
Muchisimas gracias! One more question please - how can I pass back parameters from PHP to client? Say I am saving files in PHP under different names and I want to pass back names — Captain Comic, Mar 18 '11 at 08:38
I return a JSON string. I'll update my answer with some more infos. — LeftyX, Mar 18 '11 at 09:16
OMG I was too lazy to look what is the package - they have sample — Captain Comic, Mar 18 '11 at 09:23

score 1 · Answer 2 · answered Mar 18 '11 at 07:54

1

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.

answered Mar 18 '11 at 07:54

ThiefMaster

310,957
84
592
636

Let me put it other way how can I set php handler page. When I upload using
it is "action=" and here?
– Captain Comic Mar 18 '11 at 07:58

score 1 · Answer 3 · answered Mar 18 '11 at 07:54

1

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.

answered Mar 18 '11 at 07:54

Quentin

914,110
126
1,211
1,335

Thank you David. But I dont get the following. Uploading using old school
will make my browser simply load other (or the same) php page that is specified as handler. How it works for ajax uploader? Sorry lame question, I keep learning.
– Captain Comic Mar 18 '11 at 08:05
I haven't, and don't intend, to go through the third party code you are using. It probably posts a form to a hidden iframe. – Quentin Mar 18 '11 at 08:07

Need advice on Ajax fileupload

3 Answers3

Linked