All threads / file uploads in nested forms with Vuejs and Rails

Ask A Question

Notifications

You’re not receiving notifications from this thread.

file uploads in nested forms with Vuejs and Rails

Aman DeMan asked in 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. 

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.