fixed form upload, added specs and docs

Author: jonasjabari

app/concepts/matestack/ui/core/form/form.js

@@ -42,7 +42,13 @@ const componentDef = {
     },
     setProps: function (flat, newVal) {
       for (var i in flat) {
-        if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
+        if (flat[i] instanceof File){
+          flat[i] = newVal;
+          this.$refs["input."+i].value = newVal
+        } else if (flat[i] instanceof Array) {
+          flat[i] = newVal
+          this.$refs["input."+i].value = newVal
+        } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
           setProps(flat[i], newVal);
           return;
         } else {
@@ -57,7 +63,6 @@ const componentDef = {
         this.data[key] = [];
         for (let index in files) {
           if (files[index] instanceof File) {
-            console.log(files[index]);
             this.data[key].push(files[index]);
           }
         }
@@ -120,20 +125,19 @@ const componentDef = {
       const self = this;
       let payload = {};
       payload[self.componentConfig["for"]] = self.data;
-      console.log(this);
       let axios_config = {};
-      // TODO check file uploads
-      if (this.$vnode.data.attrs.enctype == "multipart/form-data") {
+      if (self.componentConfig["multipart"] == true ) {
         let form_data = new FormData();
         for (let key in self.data) {
           if (key.endsWith("[]")) {
             for (let i in self.data[key]) {
               let file = self.data[key][i];
-              console.log(file);
-              form_data.append(self.componentConfig["for"] + "[" + key.slice(0, -2) + "][" + i + "]", file, "test_" + i);
+              form_data.append(self.componentConfig["for"] + "[" + key.slice(0, -2) + "][]", file);
             }
           } else {
-            form_data.append(self.componentConfig["for"] + "[" + key + "]", self.data[key]);
+            if (self.data[key] != null){
+              form_data.append(self.componentConfig["for"] + "[" + key + "]", self.data[key]);
+            }
           }
         }
         axios_config = {

app/concepts/matestack/ui/core/form/form.rb

@@ -9,6 +9,7 @@ def setup
         @component_config[:submit_path] = submit_path
         @component_config[:method] = options[:method]
         @component_config[:success] = options[:success]
+        @component_config[:multipart] = options[:multipart] == true
         unless options[:success].nil?
           unless options[:success][:transition].nil?
             @component_config[:success][:transition][:path] = transition_path options[:success]

app/concepts/matestack/ui/core/form/input/input.haml

@@ -39,9 +39,8 @@
     "@change": "inputChanged(\"#{attr_key}\"); filesAdded('#{attr_key}')",
     ref: "input.#{attr_key}",
     placeholder: placeholder,
-    "init-value": init_value,
     multiple: options[:multiple] }
 
 %span{ class: "errors", "v-if": error_key }
   %span{ class: "error", "v-for": "error in #{error_key}" }
-    {{ error }}
+    {{ error }}

docs/components/form.md

@@ -57,7 +57,6 @@ my_object: {
 }
 ```
 
-
 #### set by Active Record class name
 
 ```ruby
@@ -106,6 +105,13 @@ Using the standard Rails params, we can pass information to our route!
 params: { id: 42 }
 ```
 
+### Multipart
+
+If you want to perform file uploads within this form, you have to set `multipart` to true. It will send the form data with `"Content-Type": "multipart/form-data"`
+
+```ruby
+multipart: true # default is false which results in form submission via "Content-Type": "application/json"
+```
 
 ### Success
 
@@ -1348,4 +1354,34 @@ datalist id: 'datalist-id' do
   option value: 10
   option value: 20
 end
-```
+```
+
+#### Example 11: File Upload
+
+In order to perform a single file upload, add this `form_input` component
+
+```ruby
+form_input key: :some_file, type: :file
+```
+
+In order to perform multiple file uploads, add this `form_input` component
+
+```ruby
+form_input key: :some_files, type: :file, multiple: true
+```
+
+Don't forget to add the `multiple: true` attribute to your `form_config`!
+
+In order to accept multiple files, you should permit params on your controller like:
+
+`some_controller.rb`
+```ruby
+#...
+params.require(:my_form_wrapper_key).permit(
+  :some_file,
+  some_files: []
+)
+#...
+```
+
+Please be aware that the `form_input` components with a `type: :file` can not be initialized with a given file.