fixed nested form with multipart/fileupload, fixed init value of input type file #550

Author: jonasjabari

lib/matestack/ui/vue_js/components/form/base.rb

@@ -59,7 +59,7 @@ def attributes
                 multiple: ctx.multiple,
                 placeholder: ctx.placeholder,
                 '@change': change_event,
-                'init-value': init_value || (ctx.multiple ? [] : nil),
+                'init-value': init_value,
                 'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
               }).tap do |attrs|
                 attrs[:"#{v_model_type}"] = input_key unless type == :file

lib/matestack/ui/vue_js/components/form/form.js

@@ -235,29 +235,55 @@ const componentDef = {
         matestackEventHub.$emit('static_form_errors');
       }
     },
+    transformToFormData: function (formData, dataNode, parentKey=null) {
+      var self = this;
+      for (let key in dataNode) {
+        if (key.endsWith("[]")) {
+          for (let i in dataNode[key]) {
+            let file = dataNode[key][i];
+            if (parentKey != null) {
+              formData.append(self.props["for"] + parentKey + "[" + key.slice(0, -2) + "][]", file);
+            } else {
+              formData.append(self.props["for"] + "[" + key.slice(0, -2) + "][]", file);
+            }
+          }
+        } else {
+          if (Array.isArray(dataNode[key])){
+            dataNode[key].forEach(function(item, index){
+              if (parentKey != null) {
+                let _key = parentKey + "[" + key + "]" + "[]";
+                formData = self.transformToFormData(formData, item, _key)
+              } else {
+                let _key = "[" + key + "]" + "[]";
+                formData = self.transformToFormData(formData, item, _key)
+              }
+            })
+          } else {
+            if (dataNode[key] != null){
+              if (parentKey != null) {
+                formData.append(self.props["for"] + parentKey + "[" + key + "]", dataNode[key]);
+              } else {
+                formData.append(self.props["for"] + "[" + key + "]", dataNode[key]);
+              }
+            }
+          }
+        }
+      }
+
+      return formData;
+    },
     sendRequest: function(){
       const self = this;
       let payload = {};
       payload[self.props["for"]] = self.data;
       let axios_config = {};
       if (self.props["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];
-              form_data.append(self.props["for"] + "[" + key.slice(0, -2) + "][]", file);
-            }
-          } else {
-            if (self.data[key] != null){
-              form_data.append(self.props["for"] + "[" + key + "]", self.data[key]);
-            }
-          }
-        }
+        let formData = new FormData();
+        formData = this.transformToFormData(formData, this.data)
         axios_config = {
           method: self.props["method"],
           url: self.props["submit_path"],
-          data: form_data,
+          data: formData,
           headers: {
             "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
             "Content-Type": "multipart/form-data",

lib/matestack/ui/vue_js/components/form/input.rb

@@ -22,6 +22,11 @@ def input_attributes
               attributes
             end
 
+            def init_value
+              return nil if ctx.type.to_s == "file" 
+              super
+            end
+
             def vue_props
               {
                 init_value: init_value,

spec/dummy/app/models/dummy_child_model.rb

@@ -2,4 +2,7 @@ class DummyChildModel < ApplicationRecord
 
   validates :title, presence: true, uniqueness: true
 
+  has_one_attached :file
+  has_many_attached :files
+
 end

spec/test/components/dynamic/form/input/file_upload_spec.rb

@@ -12,11 +12,11 @@ def success_submit
         render json: {
           title: "server received title: #{form_params[:title].to_s}",
           file_1: {
-            instance: "server received file_1 instance: #{form_params[:file_1] ||= 'nil'}",
+            instance: "server received file_1 instance: #{form_params[:file_1].nil? ? 'nil' : form_params[:file_1]}",
             name: "server received file_1 with name: #{form_params[:file_1].present? ? form_params[:file_1].original_filename : 'nil'}"
           },
           file_2: {
-            instance: "server received file_2 instance: #{form_params[:file_2] ||= 'nil'}",
+            instance: "server received file_2 instance: #{form_params[:file_2].nil? ? 'nil' : form_params[:file_2]}",
             name: "server received file_2 with name: #{form_params[:file_2].present? ? form_params[:file_2].original_filename : 'nil'}"
           },
           files: [
@@ -205,7 +205,7 @@ def form_config
       class TestModel < ApplicationRecord
         has_one_attached :file
       end
-      
+
       class ExamplePage < Matestack::Ui::Page
         def response
           matestack_form form_config do
@@ -297,6 +297,51 @@ def form_config
       expect(page).to have_content("files[0] with name: nil")
       expect(page).to have_content("files[1] with name: nil")
     end
+
+    it "properly submits empty file uploads" do
+      class ExamplePage < Matestack::Ui::Page
+        def response
+          matestack_form form_config do
+            form_input key: :title, type: :text, placeholder: "title", id: "title-input"
+            br
+            form_input key: :file_1, type: :file, id: "file-1-input"
+            br
+            form_input key: :files, type: :file, multiple: true, id: "files-input"
+            br
+            button 'Submit me!'
+          end
+          toggle show_on: "uploaded_successfully", hide_on: "form_submitted", id: 'async-form' do
+            plain "{{event.data.file_1.instance}}"
+            plain "{{event.data.file_1.name}}"
+            plain "{{event.data.files}}"
+          end
+        end
+
+        def form_config
+          return {
+            for: :my_form,
+            method: :post,
+            multipart: true,
+            path: form_input_file_upload_success_form_test_path,
+            emit: "form_submitted",
+            success: {
+              emit: "uploaded_successfully"
+            }
+          }
+        end
+      end
+
+      visit '/example'
+      fill_in "title-input", with: "bar"
+
+      click_button "Submit me!"
+      expect(page).to have_content("file_1 instance: nil")
+      expect(page).to have_content("file_1 with name: nil")
+      expect(page).to have_content("files[0] instance: nil")
+      expect(page).to have_content("files[1] instance: nil")
+      expect(page).to have_content("files[0] with name: nil")
+      expect(page).to have_content("files[1] with name: nil")
+    end
   end
 
     # it 'should handle multiple values correctly with multipart: true set' do

spec/test/components/dynamic/form/nested_forms_spec.rb

@@ -80,7 +80,9 @@ def dummy_model_params
       params.require(:dummy_model).permit(
         :title,
         :description,
-        dummy_child_models_attributes: [:id, :_destroy, :title, :description]
+        :file,
+        files: [],
+        dummy_child_models_attributes: [:id, :_destroy, :title, :description, :file, files: []]
       )
     end
   end
@@ -97,8 +99,9 @@ def dummy_model_params
   end
 
   before :each do
-    DummyModel.destroy_all
+    ActiveStorage::Attachment.all.each { |attachment| attachment.purge }
     DummyChildModel.destroy_all
+    DummyModel.destroy_all
     allow_any_instance_of(NestedFormTestController).to receive(:expect_params)
   end
 
@@ -1248,6 +1251,149 @@ def response
 
     end
 
+    describe "supports multipart form submit alongside file upload within parent model" do
+
+      before do
+        @dummy_model = DummyModel.create(title: "existing-dummy-model-title")
+        @dummy_model.dummy_child_models.create(title: "existing-dummy-child-model-title-1")
+        @dummy_model.dummy_child_models.create(title: "existing-dummy-child-model-title-2")
+
+        class ExamplePage < Matestack::Ui::Page
+
+          def prepare
+            @dummy_model = DummyModel.last
+          end
+
+          def response
+            matestack_form form_config do
+              form_input key: :title, type: :text, label: "dummy_model_title_input", id: "dummy_model_title_input"
+
+              form_input key: :file, type: :file, label: "dummy_model_file_input", id: "dummy_model_file_input"
+              form_input key: :files, type: :file, label: "dummy_model_files_input", id: "dummy_model_files_input", multiple: true
+
+              @dummy_model.dummy_child_models.each do |dummy_child_model|
+                dummy_child_model_form dummy_child_model
+              end
+
+              form_fields_for_add_item key: :dummy_child_models_attributes, prototype: method(:dummy_child_model_form) do
+                button "add", type: :button # type: :button is important! otherwise remove on first item is triggered on enter
+              end
+
+              button "Submit me!"
+
+              toggle show_on: "success", hide_after: 1000 do
+                plain "success!"
+              end
+              toggle show_on: "failure", hide_after: 1000 do
+                plain "failure!"
+              end
+            end
+          end
+
+          def dummy_child_model_form dummy_child_model = DummyChildModel.new
+            form_fields_for dummy_child_model, key: :dummy_child_models_attributes do
+              form_input key: :title, type: :text, label: "dummy-child-model-title-input"
+              form_input key: :file, type: :file, label: "dummy-child-model-file-input"
+              form_input key: :files, type: :file, label: "dummy-child-model-files-input", multiple: true
+
+              form_fields_for_remove_item do
+                button "remove", ":id": "'remove'+nestedFormRuntimeId", type: :button # id is just required in this spec, but type: :button is important! otherwise remove on first item is triggered on enter
+              end
+            end
+          end
+
+          def form_config
+            {
+              for: @dummy_model,
+              method: :put,
+              multipart: true,
+              path: nested_forms_spec_submit_update_path(id: @dummy_model.id),
+              success: { emit: "success" },
+              failure: { emit: "failure" }
+            }
+          end
+        end
+      end
+
+      it "and properly sends dynamically added child data as multipart format" do
+        id_of_parent = DummyModel.last.id
+        id_of_child_1 = DummyChildModel.last.id
+        id_of_child_0 = id_of_child_1-1
+
+        visit "/example"
+
+        expect(page).to have_selector('#dummy_model_title_input')
+        expect(page).to have_selector('#title_dummy_child_models_attributes_child_0')
+        expect(page).to have_selector('#title_dummy_child_models_attributes_child_1')
+        expect(page).not_to have_selector('#title_dummy_child_models_attributes_child_2')
+        expect(page).not_to have_selector('#title_dummy_child_models_attributes_child_3')
+
+        click_on "add"
+        expect(page).to have_selector('#title_dummy_child_models_attributes_child_2')
+        click_on "add"
+        expect(page).to have_selector('#title_dummy_child_models_attributes_child_3')
+
+
+        fill_in "title_dummy_child_models_attributes_child_2", with: "new-dummy-child-model-title-3-value"
+        fill_in "title_dummy_child_models_attributes_child_3", with: "new-dummy-child-model-title-4-value"
+
+        attach_file('dummy_model_file_input', "#{File.dirname(__FILE__)}/input/test_files/matestack-logo.png")
+        attach_file "dummy_model_files_input", ["#{File.dirname(__FILE__)}/input/test_files/matestack-logo.png", "#{File.dirname(__FILE__)}/input/test_files/corgi.mp4"]
+
+        attach_file('file_dummy_child_models_attributes_child_0', "#{File.dirname(__FILE__)}/input/test_files/matestack-logo.png")
+        attach_file('file_dummy_child_models_attributes_child_2', "#{File.dirname(__FILE__)}/input/test_files/corgi.mp4")
+        attach_file('file_dummy_child_models_attributes_child_3', "#{File.dirname(__FILE__)}/input/test_files/matestack-logo.png")
+
+        attach_file "files_dummy_child_models_attributes_child_0", ["#{File.dirname(__FILE__)}/input/test_files/matestack-logo.png", "#{File.dirname(__FILE__)}/input/test_files/corgi.mp4"]
+        attach_file "files_dummy_child_models_attributes_child_2", ["#{File.dirname(__FILE__)}/input/test_files/matestack-logo.png", "#{File.dirname(__FILE__)}/input/test_files/corgi.mp4"]
+        attach_file "files_dummy_child_models_attributes_child_3", ["#{File.dirname(__FILE__)}/input/test_files/matestack-logo.png", "#{File.dirname(__FILE__)}/input/test_files/corgi.mp4"]
+
+        expect {
+          click_button "Submit me!"
+          expect(page).to have_content("success!") # required to work properly!
+          # expect proper form reset (added items are kept, but value is resetted)
+          expect(page).to have_selector('#dummy_model_title_input')
+          expect(page).to have_selector('#title_dummy_child_models_attributes_child_0')
+          expect(page).to have_selector('#title_dummy_child_models_attributes_child_1')
+          expect(page).to have_selector('#title_dummy_child_models_attributes_child_2')
+          expect(page).to have_selector('#title_dummy_child_models_attributes_child_3')
+          expect(page.find("#dummy_model_title_input").value).to eq("existing-dummy-model-title")
+          expect(page.find("#title_dummy_child_models_attributes_child_0").value).to eq("existing-dummy-child-model-title-1")
+          expect(page.find("#title_dummy_child_models_attributes_child_1").value).to eq("existing-dummy-child-model-title-2")
+          expect(page.find("#title_dummy_child_models_attributes_child_2").value).to eq("new-dummy-child-model-title-3-value")
+          expect(page.find("#title_dummy_child_models_attributes_child_3").value).to eq("new-dummy-child-model-title-4-value")
+        }
+        .to change { DummyModel.count }.by(0)
+        .and change { DummyChildModel.count }.by(2)
+
+        id_of_child_3 = DummyChildModel.last.id
+        id_of_child_2 = id_of_child_3-1
+
+        expect(DummyChildModel.find(id_of_child_3).title).to eq("new-dummy-child-model-title-4-value")
+        expect(DummyChildModel.find(id_of_child_2).title).to eq("new-dummy-child-model-title-3-value")
+
+        expect(DummyModel.find(id_of_parent).file.blob.filename).to eq("matestack-logo.png")
+        expect(DummyModel.find(id_of_parent).files[0].blob.filename).to eq("matestack-logo.png")
+        expect(DummyModel.find(id_of_parent).files[1].blob.filename).to eq("corgi.mp4")
+
+        expect(DummyChildModel.find(id_of_child_0).file.blob.filename).to eq("matestack-logo.png")
+        expect(DummyChildModel.find(id_of_child_0).files[0].blob.filename).to eq("matestack-logo.png")
+        expect(DummyChildModel.find(id_of_child_0).files[1].blob.filename).to eq("corgi.mp4")
+
+        expect(DummyChildModel.find(id_of_child_1).file.blob.nil?).to be true
+        expect(DummyChildModel.find(id_of_child_1).files.empty?).to be true
+
+        expect(DummyChildModel.find(id_of_child_2).file.blob.filename).to eq("corgi.mp4")
+        expect(DummyChildModel.find(id_of_child_2).files[0].blob.filename).to eq("matestack-logo.png")
+        expect(DummyChildModel.find(id_of_child_2).files[1].blob.filename).to eq("corgi.mp4")
+
+        expect(DummyChildModel.find(id_of_child_3).file.blob.filename).to eq("matestack-logo.png")
+        expect(DummyChildModel.find(id_of_child_3).files[0].blob.filename).to eq("matestack-logo.png")
+        expect(DummyChildModel.find(id_of_child_3).files[1].blob.filename).to eq("corgi.mp4")
+      end
+
+    end
+
   end
 
 end