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   1125 Views

Avatar
beezer

Community Member, 16 Posts

30 September 2011 at 6:27am

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

Community Member, 16 Posts

30 September 2011 at 6:29am

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