Ruby on Rails: Dropzone js, bekommen [Objekt Objekt], aber warum?

Question

Ich bekomme [Objekt Objekt] auf meine Thumbnails (das Hintergrundbild ist der Bereich, wo Sie klicken können, um Fotos hochzuladen ... Ich bin nicht sicher, wie Sie die normale Box ähnlich dem Beispiel in http://www.dropzonejs.com/ laden)

Ansicht

<%= simple_form_for @project do |f| %> 

    <div class="dropzone dz-clickable dz-square" id="mydrop"> 
    <div class="dz-default dz-message" data-dz-message=""></div> 
    <div id="bi_previews"></div> 
    <div class="fallback"> 
     <%= f.file_field :beautiful_image %></div> 
    </div> 
    </div> 

<% end %> 

Coffee

$(document).on 'ready page:load', -> 
    Dropzone.autoDiscover = false 
    $('div#mydrop').dropzone 
    url: '/projects' 
    previewsContainer: "#bi_previews" 
    headers: "X-CSRF-Token" : $('meta[name="csrf-token"]').attr('content') 
    paramName: "project[beautiful_image]" 
    init: -> 
     @on 'success', (file, json) -> 
     @on 'addedfile', (file) -> 
     @on 'drop', (file) -> 
     alert 'file' 
     return 
     return 

routes.rb

Rails.application.routes.draw do 
    devise_for :users 
    resources :projects 

Controller

def project_params 
    params.require(:project).permit(
    :user_id, :beautiful_image, :title_name, :remove_project_images_files, project_images_files: [], 
    project_images_attributes: [:id, :project_id, :photo, :_destroy]).merge(user_id: current_user.id) 
end 

Modell

has_attached_file :beautiful_image, :styles => { :large => "800x800>", :medium => "500x500>", :thumb => "150x150#" }, :default_url => "/images/:style/missing.png" 
validates_attachment_content_type :beautiful_image, content_type: /\Aimage\/.*\Z/ 

---

EDIT

Posting-Controller pro Kommentar requets

def new 
    @project = Project.new 
    @gear = Gear.new 
    @project.gears.build 
    @project.project_images.build 
end 

def edit 
    @project = Project.find(params[:id]) 
end 

def create 
    @project = Project.new(project_params) 

    respond_to do |format| 
    if @project.save 
     format.html { redirect_to @project, notice: 'Project was successfully created.' } 
     format.json { render :show, status: :created, location: @project } 
    else 
     format.html { render :new } 
     format.json { render json: @project.errors, status: :unprocessable_entity } 
    end 
    end 
end 

Answer 1

In Rails können Sie die Daten nicht veröffentlichen, ohne Formular. Rails überprüft das CSRF-Token für jede Anforderung, es sei denn, ist deaktiviert. In Ihrem Code initialisierten Sie dropzone mit div ID. Daher kann der Server Ihre authenticity token nicht verifizieren.

Der ApplicationController namens protect_from_forgery, je nach Bedarf. Alle Controller wurden von ApplicationController geerbt und es schien, dass es keine CSRF-Schwachstellen gab. Durch dynamische Analyse entdeckte ich jedoch, dass die Anwendung in der Tat anfällig für CSRF war.

Initialisieren Sie Ihre Dropzone mit der ID des Formulars.

HTML-Code

<%= simple_form_for @project, class: 'dropzone', id: 'project-form' do |f| %> 
      <div class="fallback"> 
       <%= f.file_field :beautiful_image, multiple: true %> 
      </div> 
<% end %> 

und Ihre Javascript um dieses

var objDropZone; 
    Dropzone.autoDiscover = false; 
    $("#project-form").dropzone({ 
      acceptedFiles: '.jpeg,.jpg,.png', 
      maxFilesize: 5, //In MB 
      maxFiles: 5, 
      addRemoveLinks: true, 
      removedfile: function (file) { 
       if (file.xhr.responseText.length > 0) { 
        var fileId = JSON.parse(file.xhr.responseText).id; 
         $.ajax({ 
         url: '/projects/' + fileId, 
         method: 'DELETE', 
         dataType: "json", 
         success: function (result) { 
          console.log('file deleted successfully'); 
          var _ref; 
          return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 

         }, 
         error: function() { 
          console.log('error occured while deleteing files'); 
         } 

        }); 
       } 

      }, 
      init: function() { 
       objDropZone = this; 

       this.on("success", function (file, message) { 
        console.log('file uploaded successfully') 
       }); 

       this.on("error", function (file, message) { 
        var _ref; 
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; 
       }); 
      } 
     });