10

私の Ruby on Rails アプリには、このチュートリアルを具体的に使用して、HTML5 の File/FileReader API を使用してドラッグ アンド ドロップ ボックスに置き換えようとしている単純なファイル アップロード ボタンがあります。そのまま、Ruby スクリプトを使用してファイルを public/data フォルダーにアップロードします。ドラッグ アンド ドロップ スクリプトをそれと統合する方法がわかりません。私の考えは、私がすでに隠していたファイルアップロードボタンを作成し、ユーザーが送信しようとしたときにJavascriptを使用して、ドラッグアンドドロップされた画像のパスにその値を設定することでした.

ただし、送信しようとすると、次のエラーが表示されます。

ファイル名が長すぎます - public/data/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNj....

HTML5 で指定された一時ファイルの保存名が長すぎるためだと思います。

文字列を最初の 60 文字に連結しようとしたところ、エラーが発生しました。

そのようなファイルまたはディレクトリはありません - public/data/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAA

いずれにせよ、ファイルはpublic/dataフォルダーに追加されません。

私のHTML：

<%= form_tag( { :action => 'create' }, :multipart => true ) %>
<div id="dropbox"><span id="droplabel">Drop file here...</span></div>
<img id="preview" alt="[ preview will display here ]" />

<%= hidden_field_tag :uploadfile, :id => "uploadfile", :name => "uploadfile" %>
<br /><br />
<div id="submit">
<%= submit_tag( "Upload file" ) %>
</div>

ルビー:

def create
    name = params[:uploadfile]
    directory = "public/data"
    path = File.join(directory, name)
    File.open(path, "wb") { |f| f.write(params[:uploadfile].read) }
     @project = Project.new({:filename => name, :location => path})

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

およびJS：

$("#submit input").click(function() {
    $("#uploadfile").val($("#preview").attr("src"));
});
4

2 に答える 2