Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Uploadify + jQuery Form plugin


Reply

2 Posts   1082 Views

Avatar
beezer

30 September 2011 at 6:27am Community Member, 16 Posts

I am using the uploadify module on a frontend form and everything works fine except that I've run in to some problems submitting the form via ajax (the form is in a modal and I can't really refresh the whole page).

With the images being uploaded on selection it works fine to then submit the form using ajaxForm() but if I set the uploadOnSubmit parameter on the MultipleFileUploadField the form is submitted to a blank page instead.

Form code:

function __construct($controller, $name) {
$fields = new FieldSet(
$images = new MultipleFileUploadField('Images', _t('UploadForm.IMAGES', 'Images'))
);
$actions = new FieldSet(
new FormAction('doupload', _t('UploadForm.UPLOAD', "Upload"))
);
$images->setFileTypes(array(
'png',
'gif',
'bmp',
'jpg',
'jpeg'
));
//$images->uploadOnSubmit();
parent::__construct($controller, $name, $fields, $actions);
}
public function doupload($data, $form) {
$memberID = Member::currentUserID();
if(isset($data['Images']) && is_array($data['Images'])) {
foreach($data['Images'] as $id) {
if($file = DataObject::get_by_id("File", (int) $id)) {
$bookImage = new BookImage();
$bookImage->ImageID = $file->ID;
$bookImage->MemberID = $memberID;
$bookImage->write();
}
}
}
$response['success'] = True;
$response['message'] = _t('CartController.UPLOADSUCCESS', 'Your upload was successful!');
}

Javascript:

$('#UploadForm_UploadForm').ajaxForm({
dataType: 'json',
success: function(data) {
var url = window.location.pathname + '/show_mygallery';
$('#ImageList').load(url, function() {
// Clear uploadify form
$('#UploadForm_UploadForm .inputs input').remove();
$('#UploadForm_UploadForm .upload_previews li').remove();
});
}
});

and here is the code in uploadify_init.js that submits the form by-passing the ajaxForm binding, line 61:

            onAllComplete : function(event) {
               $e = $(event.currentTarget);
               $e.data('active',false);
               $e.parents('form').find(':submit').attr('disabled',false).removeClass('disabled');
               $container = $e.parents('.UploadifyField:first');
               $('.preview',$container).show();
               if($e.metadata().upload_on_submit) {
                  $e.parents('form').submit();
               }

            },

Am I missing something or is there a better way to go about this?

Cheers

Avatar
beezer

30 September 2011 at 6:29am Community Member, 16 Posts

sspaste with better formatting: http://www.sspaste.com/paste/show/4e84b2e24d593