3

How i can easy add dropzone to my exist form and how to not skip verify auth token? My old uploader images acted without accusations I try add column "file" to products base. I don't know how to add dropzone to my form without create new migration for only images. Can anyone help me?

view:

    <%= simple_form_for [:user, @product], html: {id: "dropzone-form- 
    id"} do |f| %>
    <%= f.input :name, label: "Nazwa" %>
    <%= f.input :description, label: "Opis" %>
    <%= f.input :long_description, label: "Długi opis" %>
    <%= f.input :price, label: "Cena" %>
    <%= f.association :category, label: "Kategoria" %>
    <%= f.input :condition, label: "Stan", :collection => 
    [['Nowy','Nowy'],['Używany','Używany']] %>

    <div id="files-field"
       class="dropzone"
       style="border: 2px dashed rgba(0, 0, 0, 0.3);
              min-height: 100px !important;">
    <div class="dz-message"
         style="margin: 20px">
      Drag your cats' pics here! Or
      <button>
        select files
      </button>
    </div>
    </div>

    <p>
    <%= f.submit %>
    </p>
    <% end %>

upload-dropzone.js

// .js file
Dropzone.options.filesField = {
  url: "/user/products",
  addRemoveLinks: true,
  autoProcessQueue: false,
  uploadMultiple: true,
  accept: function(file, done) {
    $("div#files-field").css({"height": "auto"});
    done();
  },
  init: function() {
    var myDropzone = this;

    var form = document.getElementById('dropzone-form-id');
    form.addEventListener('submit', function(event) {
      // stop the form's submit event
      if(myDropzone.getQueuedFiles().length > 0){
        event.preventDefault();
        event.stopPropagation();
        myDropzone.processQueue();
      }
    });

    myDropzone.on("sendingmultiple", function(file, xhr, formData) {
      formData.append("name", $('#product_name').val());
      formData.append("description", $('#product_description').val());
      formData.append("long_description", $('#product_long_description').val());
      formData.append("price", $('#product_price').val());
      formData.append("category", $('#product_category_id').val());
      formData.append("condition", $('#product_condition').val());
    });
  },
  successmultiple: function(data,response) {
    alert(response);
  }
};

products controller:

    skip_before_action :verify_authenticity_token

    def create
      @product = Product.new(product_params)
      @product.user_id = current_user.id
      if @product.save
        redirect_to user_products_path, notice: "Pomyślnie dodano 
     produkt."
      else
        render action: :new
       end
    end

    private

    def product_params
      params.require(:product).permit(
        :name,
        :category_id,
        :description,
        :long_description,
        :price,
        {photo: []},
        :condition
      )
    end

Started POST "/user/products" for 127.0.0.1 at 2019-07-30 15:29:27 +0200
Processing by User::ProductsController#create as JSON
Parameters: {"name"=>"", "description"=>"", "long_description"=>"", "price"=>"", "category"=>"", 
"condition"=>"", "file"=>{"0"=>#<ActionDispatch::Http::UploadedFile:0x00007fbe12aa45d8 @tempfile=# 
<Tempfile:/tmp/RackMultipart20190730-32614-658ixz.png>, @original_filename="Zrzut ekranu z 2019-03- 
05 11-37-48.png", @content_type="image/png", @headers="Content-Disposition: form-data; 
name=\"file[0]\"; filename=\"Zrzut ekranu z 2019-03-05 11-37-48.png\"\r\nContent-Type: image/png\r\n">}}
User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC 
LIMIT ?  [["id", 2], ["LIMIT", 1]]
↳ /home/dondaro/.rvm/gems/ruby-2.5.3/gems/activerecord-5.2.2/lib/active_record/log_subscriber.rb:98
Completed 400 Bad Request in 2ms (ActiveRecord: 0.2ms)



ActionController::ParameterMissing (param is missing or the value is empty: product):

app/controllers/user/products_controller.rb:60:in `product_params'
app/controllers/user/products_controller.rb:27:in `create'
dondaro610
  • 31
  • 1

1 Answers1

0

add this in javascript with other formData

formData.append("authenticity_token", $('input[name="authenticity_token"]').val());

or if just sending 1 file, add this to dropzone config

headers: {'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
rdaniels
  • 939
  • 8
  • 7