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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

All other Modules /

Discuss all other Modules here.

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

Uploadify + jQuery Form plugin


Go to End


2 Posts   2516 Views

Avatar
ec8or

Community Member, 18 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
ec8or

Community Member, 18 Posts

30 September 2011 at 6:29am

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