Simple File Uploader - components to upload files

[m4dc4p]

I've created a set of components and some samples that allow you to upload files using drag and drop and which will give progress notifications as the files upload.(*)

I didn't build a really nice UI for uploading - but what I've done will let you build the sweet UI you would like to have.

Check out the code and a sample at http://uploader.codeslower.com/. Feedback here or on GitHub (https://github.com/m4dc4p/uploader) is greatly appreciated.

Let me emphasize again that I'm not interested in improving the sample UI; I am more interested in improving the underlying components to **make** a great UI.

Thanks!

(*) Of course, IE doesn't support any of the interfaces to make this work, so the UI will fall back to the plain old file-picker.

[dawesi]

This looks like something I could use. Nice job.

[r.vanelk]

Nice job! Very good plugin!

How can i get the file in the AJAX call? The POST and the FILES var are empty...

[m4dc4p]

The file is in the request body, as a stream of raw bytes. Fiddler (or Firebug, etc.) will show you what the browser submits.

What are you using the server side - PHP? I haven't actually tried that yet ... Let me know if you get it working. Patches also welcome

[nicobarten]

This is indeed something many ExtJS developers can use!

Thank you very much for this awesome plugin.

Btw, i use the MVC system of ExtJS, so i put all my events under controllers. Is it also possible to use the events 'success', 'failure' and 'callback' in a controller?

Also, in the 'failure' event i want to access the current Cs.file.ui.FileItem object... to set the text in red of that file. How can i access that object?

[m4dc4p]

Btw, i use the MVC system of ExtJS, so i put all my events under controllers. Is it also possible to use the events 'success', 'failure' and 'callback' in a controller?

I haven't used MVC myself so I'm not sure how to do it exactly, but I am positive there is a way. I would expect you can set up handlers for the three uploader events, which will in turn fire controller events.

Also, in the 'failure' event i want to access the current Cs.file.ui.FileItem object... to set the text in red of that file. How can i access that object?

I didn't expose it. SimpleFileUploader isn't meant to be extensible. I intended people to create their own UI using the File Uploader components.

Let me know how it works out for - glad it can be useful.

[r.vanelk]

How can i change the background color of the upload progress bar?

I add a class to the ProgressBar in the file 'fileItem.js'.

cls: 'the_class',

.the_class
{
    background-color: #456D9F !important;
}

Now is the upload bar a few seconds #456D9F and then the color changed to the standard color of the Extjs theme.

[m4dc4p]

How can i change the background color of the upload progress bar?

I add a class to the ProgressBar in the file 'fileItem.js'.

I didn't design the sample UI to be very flexible, so I don't think you can do that. You'd have more luck creating your own UI.

Out of curiosity, what are you using the uploader for?

[rednix]

Added the following code to work with latest Ext JS 4.1.1:

    if (!me.hasListeners) {
        me.hasListeners = new me.HasListeners();
    }

in constructor of class Cs.file.data.FileManager right before

me.addEvents(

[m4dc4p]

Thanks! I made the suggested change.