Can we use Uploadify simply for progressive enhancement on file upload inputs?

Question

When I do file inputs, I usually set their opacity to 0 and position a browse button beneath them (simply because the file inputs are kind of ugly and inflexible by themselves - and I must to meet the designer's requirements).

I just stumbled across Uploadify.

My form is working at the moment as a standard form with file input uploads.

I wish to use Uploadify just for the features...

• Forcing the upload prompt to an extension (jpg, jpeg, png, gif).
• Showing the filename once selected and filesize

I set the option to not upload automatically on selection.

When I submit the form now with this jQuery invocation code...

var fileTypes = [];
$.each(config.validExt, function(i, ext) {
 fileTypes.push('*.' + ext);
});

var fileInputs = form.find('input[type=file]');

fileInputs.uploadify({
'uploader'  : config.basePath + 'assets/packages/uploadify/uploadify.swf',
'script'    : config.basePath + 'assets/packages/uploadify/uploadify.php',
'cancelImg' : config.basePath + 'assets/packages/uploadify/cancel.png',
'auto'      : false,
'folder'    : config.basePath + 'application/uploads',
'fileDesc'  : 'Images (' + config.validExt.join(', ') + ')' ,
'fileExt'   : fileTypes.join(';')
});

form.find('button[type=submit]').click(function(event) {

fileInputs.uploadifyUpload();

});  

It just falls over and doesn't upload anything.

Also, sending the folder from the client sounds a little flaky, but I planned to select the folder via PHP.

So basically, I want the form to act like usual, just to have those benefits from using Uploadify.

Is this possible?

Thanks

Answer 1

Try submitting the form via the onAllComplete option. Make sure the button is not a submit button.

fileInputs.uploadify({
  'uploader'      : config.basePath + 'assets/packages/uploadify/uploadify.swf',
  'script'        : config.basePath + 'assets/packages/uploadify/uploadify.php',
  'cancelImg'     : config.basePath + 'assets/packages/uploadify/cancel.png',
  'auto'          : false,
  'folder'        : config.basePath + 'application/uploads',
  'fileDesc'      : 'Images (' + config.validExt.join(', ') + ')' ,
  'fileExt'       : fileTypes.join(';'),
  'onAllComplete' : function(event,data) {
      form.submit();
    }
});

form.find('#submit').click(function(event) {
  fileInputs.uploadifyUpload();
});