davit wrote:In the next version of UI widget we will add methods to make it even easier.
This would be a benefit I believe and help developers make forms in UI's which include this brilliant widget even more intuitive for users.
Until the next version I'll expand a bit more on how I enabled and disabled the "Add files" and "Start upload" buttons based on other actions in the form and the number of files added to the widget. The method I've managed to dig out using Firebug was a quick solution as I've had a deadline, there's probably better ways to do it.
The <input type=file> (which is underneath the "Add files" button) I used a disable and opacity combination in the initialization of the widget to simulate a dimmed, disabled control (button). Without thoroughly confusing the user's of my form I needed to disable the adding of files to the widget until other actions in the form had been performed. In this particular case I need users of the form that contains the upload widget to make a selection from each of three drop down lists. Once the selections have been made the "Add files" button becomes active and stays active as long as any selection in the 3 drop downs is anything except the empty value of the default <option value="">Choose here</option> selection.
When one selection of the 3 drop downs is made the JQuery checks the other 2 and keeps the "Add files" button disabled and dimmed until 3 selections are made. It does that on the other 2 as well looking for an overall 3 selections to be made before enabling and lighting up the 'Add files' button.
The very basic JQuery for the 'Add files' button is:
Initialization:
$('a[id=uploader_browse]').css("opacity", "0.5");
// the <a id="uploader_browse">Add files</a> located in the "filename" div of the widget is the "Add files" button/selector which when enabled, opens the "browse" files dialog.
// the 0.5 opacity creates the disabled "dimmed" effect
$('input[type=file]').attr("disabled", true);
// the actual file uploading control.
//there is only one <input type="file"> in my form so this works.
After the 3 drop downs (<selects>) have an item selected the JQuery runs the following:
$('a[class=uploader_browse]').css("opacity", "1.0"); // set the opacity back to full
$('input[type=file]').attr("disabled", false);
....files can now be added to the widget but I needed to make sure 3 files corresponding to the 3 selections from the drop downs are added to the widget and uploaded but the problem is that "Start upload" button becomes active as soon as one file is added.
===============================================
The following is how I've managed to keep the "Start upload" disabled until the minimum number of files are added to the widget and uploaded before the user can continue with the submitting of the form. It's simpler than it first appears.
The "Start upload" button has two states: enabled and disabled, controlled by the class attribute in the: <a class="">Start uploading</a> that represents it.
Until there is a file added to the widget the "Start upload" button has the disabled state:
<a class="plupload_button plupload_start plupload_disabled">Start upload</a>
which makes sense but if you want to keep it disabled until there are 2 or more files (minimum 3 in my case) added to the widget then you have to override the class which enables it by forcing it back to a disabled state.
As soon as one file is added to the widget the 'Start upload' selector changes from:
<a class="plupload_button plupload_start plupload_disabled">Start upload</a>
to this:
<a class="plupload_button plupload_start ">Start upload</a>
That all said and because of time constraints I was not able to properly fiddle with the class in the CSS for the "dimmed/disabled" appearance of the "Start upload" button and so for the sake of expediency I opted to just .hide() and .show() it.
Since the "Add files" button remains visible in both it's disabled and enabled states (and I put other messages and prompting nearby) the user is still kept on track with the flow of form so 'hiding' and 'showing' the "Start upload" button isn't too far fetched.
To "hide" the "Start upload" button in the widget's initialization I used the following:
Initialization:
$('a[class=plupload_button plupload_start plupload_disabled]').hide();
//the <a> selector used for the "Start upload" button has no id only a class so we identify the selector by its class in both hiding and showing.
We hide the "Start upload" button until the right number of files are added to the widget (minimum 3 in my case) and then make it visible using the following JQuery in the widget's init FilesAdded event:
FilesAdded: function (up, files) {
// Called when files are added to queue
if (up.files.length == 3) {
$('a[class=plupload_button plupload_start]').show();
$('div[id=buttons_enabled]').text('3 files have been added, please click "Start uploading"');
}
}
I also added the the message displayed in the <div id="buttons_enabled"> just below the widget container to help direct the user's attention .
If files are removed and the total drops below 3 this is detected in the QueueChanged event and the "Start uploading" button hidden again (along with a message displayed nearby) in the QueueChanged event using:
$('a[class=plupload_button plupload_start]').hide();
$('div[id=buttons_enabled]').text('3 files minimum must be uploaded'); //message displayed nearby alerting user
===============================================
This is bit of a rough outline of how I've implemented it so far and there is further validation to insure the rule(s) I need are applied to the user but this is a gist of it. I'm happy to clarify further though it's not overly complex. I'm probably not the only developer who has needed to control the number of files in the widget before allowing the upload action to begin and from 'davit's' response it appear's this functionality is to be addressed in an upcoming version. This may not be the most "pretty" way to do this but so far it seems to work in the context I need it to as user's are getting through my rather complex form uploading their files and getting the form itself submitted. Hat's off to the plupload author's as the upload widget is quite an impressive upload utility and quite pliable to customize.
