

以下を参考に実装をしております。  
<http://plugmin.co/436/>

画像をドラッグ＆ドロップしようとしても、  
file:///Users/・・・・  
となってしまい、ファイルアップロードが上手くできませんでした。

以下のファイルでいうところの  
console.log("hoge3")は通っているのですが  
console.log("hoge4")は通ってません。

どのようにしたらよいのかわからず、かつ、javascriptのデバッグ方法があまり詳しくないため、詰まっております。

アドバイス頂けると幸いです。

宜しくお願いします。

ruby 2.2.2  
rails 4.0.3

Gemfile

[code]

    source 'https://rails-assets.org' do
      gem 'rails-assets-dropzone'
    end
    
[/code]

app/assets/javascripts/application.js

[code]

    //= require dropzone
    
[/code]

$ rake routes

[code]

      index GET      /index(.:format)     public#index
      root GET      /                    public#index
      upload POST     /upload(.:format)    public#upload
    
[/code]

ImageUploader自身は他でも使っており、問題なく画像アップロードできております。（ドラッグ＆ドロップではありませんが）

[code]

    class Chat < ActiveRecord::Base
      mount_uploader :image, ImageUploader
    end
    
[/code]

[code]

    class PublicController < ApplicationController
      def index
        @chat = Chat.new
      end
    
      def upload
        chat = Chat.find(params[:id])
        chat.attributes = chat_paramas
        chat.save
      end
    
      def chat_params
        params.require(:chat).permit(:user_id, :description, :image)
      end
    
    end
    
[/code]

app/views/public/index.html.erb

[code]

    <div class="uploadArea">
      <%= link_to "", 'javascript:void(0)', class: "uploadZone publish dz-clickable" %>
      <p>
        画像をドラッグ＆ドロップ!
      </p>
    </div>
    
[/code]

以下もapp/views/public/index.html.erb内に記載

[code]

    
    ※scriptの部分はタグ形式にすると、消えてしまったため、以下のように記載します。
    script type="text/javascript"
    
      $(function(){
    
          // 何かの値をPostしたいなら
          var hogeParam = "hoge";
    
          // おまじない
          Dropzone.autoDiscover = false;
    
          Dropzone.options.myAwesomeDropzone = {
              paramName : "file",         // input fileの名前
              parallelUploads:1,            // 1度に何ファイルずつアップロードするか
              acceptedFiles:'image/*',   // 画像だけアップロードしたい場合
              maxFiles:10,                      // 1度にアップロード出来るファイルの数
              maxFilesize:0.5,                // 1つのファイルの最大サイズ(1=1M)
              dictFileTooBig: "ファイルが大きすぎます。 ({{filesize}}MiB). 最大サイズ: {{maxFilesize}}MiB.",
              dictInvalidFileType: "画像ファイル以外です。",
              dictMaxFilesExceeded: "一度にアップロード出来るのは10ファイルまでです。",
          };
          // urlは実際に画像をアップロードさせるURLパスを入れる
          var myDropzone = new Dropzone(".uploadZone.publish",{url: ''});
    
          console.log("hoge3")
          // 何か値をpostしたい場合
          myDropzone.on("sending", function(file,xhr,formData) {
              console.log("hoge4")
              formData.append("hoge", hogeParam);
          });
      });
    
    /script
    
    
[/code]

追記

Satoshi Sachin Ohmoriさんからのご指摘内容をもとに、じっこうしたところ、  
インスタンスの生成までは確認できました。

ただ、現状、まだ、ブラウザ上に、画像をドラッグ＆ドロップしても、画像ファイルが読み込まれるだけで、アップロードまではいけませんでした。

エラーログもでず・・・。

[code]

    myDropzone: c
    URL: URL()
    _callbacks: Object
    clickableElements: Array[1]
    element: a.uploadZone.publish.dz-clickable
    files: Array[0]
    hiddenFileInput: input.dz-hidden-input
    listeners: Array[2]
    options: Object
    previewsContainer: a.uploadZone.publish.dz-clickable
    version: "4.2.0"
    __proto__: c
    
    
[/code]


CC BY-SA 3.0
2016-01-30T10:25:37.373
21508
2016-08-04T16:36:32.630
2016-02-05T11:38:47.027
13175
13175
question
javascript ruby-on-rails ruby jquery
dropzone.js（ドラッグ＆ドロップでのアップロード）が上手く動作しません。


JavaScriptでのdebug方法について書きます。  
JavaScriptでのdebugは`debugger`というメソッドをコードに入れると`debugger`を書いた行で止まってくれるので、そこで今までに定義した変数やメソッドを使うことが出来ます。

サンプルコード:

[code]

     var foo = "foo";
     debugger # ここでブラウザのJavaScriptの実行が止まるのでfooの変数に出来ます。
    
[/code]

所謂ブレークポイントという奴です。


CC BY-SA 3.0
2016-02-03T11:46:58.960
21668
2016-02-03T11:46:58.960
7373
21508
answer