UploadField, CheckboxSetField work in shortcode form fixes #37

Author: sheadawson

code/controllers/ShortcodableController.php

@@ -158,6 +158,7 @@ public function ShortcodeForm()
                     $fields->push(
                         CompositeField::create($attrFields)
                             ->addExtraClass('attributes-composite')
+                            ->setName('AttributesCompositeField')
                     );
                 }
             }
@@ -176,14 +177,21 @@ public function ShortcodeForm()
             ->loadDataFrom($this)
             ->addExtraClass('htmleditorfield-form htmleditorfield-shortcodable cms-dialog-content');
 
-        if ($data = $this->getShortcodeData()) {
-            $form->loadDataFrom($data['atts']);
-        }
-
         $this->extend('updateShortcodeForm', $form);
 
         $fields->push(LiteralField::create('shortcodablefieldsend', '</div>'));
 
+        if ($data = $this->getShortcodeData()) {
+            $form->loadDataFrom($data['atts']);
+
+            // special treatment for setting value of UploadFields
+            foreach ($form->Fields()->dataFields() as $field) {
+                if (is_a($field, 'UploadField') && isset($data['atts'][$field->getName()])) {
+                    $field->setValue(array('Files' => explode(',', $data['atts'][$field->getName()])));
+                }
+            }
+        }
+
         return $form;
     }
 

javascript/shortcodable.js

@@ -87,21 +87,38 @@
                 if (id) {
                     attributes['id'] = id;
                 }
+                var data = JSON.stringify(this.serializeArray());
+
                 var attributesComposite = this.find('.attributes-composite');
                 if (attributesComposite.length) {
                     attributesComposite.find(":input").each(function(){
                         var attributeField = $(this);
                         var attributeVal = attributeField.val();
+                        var attributeName = attributeField.prop('name');
+
+                        if(attributeField.is('.checkbox') && !attributeField.is(':checked')) {
+                            return true; // skip unchecked checkboxes
+                        }
+
                         if(attributeVal !== ''){
-                            if(attributeField.is('.checkbox')) {
-                                attributes[attributeField.prop('name')] = attributeField.is(':checked') ? 1 : 0;
+                            if (attributeName.indexOf('[') > -1) {
+                                var key = attributeName.substring(0, attributeName.indexOf('['));
+                                if (typeof attributes[key] != 'undefined') {
+                                    attributes[key] += ',' + attributeVal;
+                                } else {
+                                    attributes[key] = attributeVal;
+                                }
                             } else {
-                                attributes[attributeField.prop('name')] = attributeVal;
+                                if(attributeField.is('.checkbox')) {
+                                    attributes[attributeField.prop('name')] = attributeField.is(':checked') ? 1 : 0;
+                                } else {
+                                    attributes[attributeField.prop('name')] = attributeVal;
+                                }
                             }
                         }
                     });
                 }
-
+                console.log(attributes);
                 return {
                     'shortcodeType' : this.find(':input[name=ShortcodeType]').val(),
                     'attributes' : attributes