Aman DeMan

Joined

50 Experience
0 Lessons Completed
0 Questions Solved

Activity

Posted in file uploads in nested forms with Vuejs and Rails

Hi all,

I have a Projects model which has many files and categories. So on my view, I would have a nested form where user can upload as many files and also associate as many categories when creating a project. I have been struggling to get my post request working for my file uploading part. It works fine( the request hits both categories and projects table) when i dont upload any file. Here is what i currently have,

project.rb

class Project < ApplicationRecord
  belongs_to :user
  has_many :files, dependent: :destroy
  has_many :categories, dependent: :destroy
  accepts_nested_attributes_for :categories, reject_if: :all_blank, allow_destroy: true
  accepts_nested_attributes_for :files, reject_if: :all_blank, allow_destroy: true
end

file.rb
class File < ApplicationRecord
  belongs_to :project
  has_attached_file :document
  validates_attachment :document, content_type: "text/csv"
end
category.rb
class Category < ApplicationRecord
  belongs_to :project

end

project_controller
  def new
    render json: Project.new.to_json(except: [:id, :created_at, :updated_at])
  end

  def create
    @project = Project.new(project_params)
    @project.user = current_user
    if @project.save
      render json: @project.to_json(except: [:id, :created_at, :updated_at])
    else

    end
  end

  def show

  end

  private
  def project_params
    params.require(:project).permit(:title, :description, 
     categories_attributes: [:id, :name, :_destroy], files_attributes: [:id, :document, :_destroy])
  end
project.js
my submit function:

formSubmit(){
        var myform = document.getElementById('myform');
        var formdata = new FormData(myform);
        let that = this;
        const config = {
            headers: { 'content-type': 'multipart/form-data' }
        };
        this.$http.post('/api/project', formdata
        ).then(response => {
          that.submitted = true;
           swal("Submitted", "", "success");
          console.log(response.body);
        }, response => {
          swal("Error",'',"error")
          console.log(response);
        });
      },

So when I submit the form I get server error if there is uploaded file but if there isn't, it hits the database, works fine.
on my project.html.erb 
<form id="myform" enctype="multipart/form-data">
            <h3>Make new project</h3>
            <div class="form-group">
              <label>Title</label>
              <input type="text" name= "project[title]" v-model="project.title" class="form-control">
            </div>
            <div class="form-group">
              <label>Description</label>
              <textarea name="project[description]" id="" cols="70%" rows="2" v-model="project.description" class="form-control"></textarea>
            </div>

            <h4>files</h4>
            <div class="col-md-5 col-md-offset-2">
              <input type="file" id="myinput"  ref="file" name="project[files_attributes][document]" multiple>
            </div>

            <h4>Categories</h4>

            <!--some stuff-->
          </form>
Any help is appreciated. Thank You.