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, Ed, biapar, Willr, Ingo, swaiba

Uploadify + jQuery Form plugin


Go to End
Reply


2 Posts   1501 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