PDA

View Full Version : Simple File Uploader - components to upload files



m4dc4p
20 Sep 2011, 3:14 PM
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
21 Sep 2011, 8:12 AM
This looks like something I could use. Nice job.

r.vanelk
6 Oct 2011, 6:28 AM
Nice job! Very good plugin!

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

m4dc4p
6 Oct 2011, 7:21 AM
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
14 Oct 2011, 5:24 AM
This is indeed something many ExtJS developers can use! :D

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
14 Oct 2011, 7:37 AM
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
26 Oct 2011, 12:18 AM
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
26 Oct 2011, 9:16 AM
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
4 Dec 2012, 5:08 AM
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
4 Dec 2012, 8:24 AM
Thanks! I made the suggested change.