HTML5-Datei drag-und-drop-upload mit Ruby on Rails

In meine Ruby on Rails-app, ich habe einen einfachen Datei-upload-Taste, die ich bin versucht zu ersetzen mit einer drag-und drop-box mit der Datei/FileReader-APIs in HTML5, mit dieses tutorial speziell. Wie benutze ich ein Ruby-Skript, um die Datei hochladen zu meiner public/data-Ordner. Ich bin mir nicht sicher, wie integrieren Sie die drag-und-drop-Skript mit, dass. Meine Idee war, die Datei-upload-button hatte ich schon ausgeblendet, und verwenden Sie Javascript, um Ihren Wert auf den Pfad der drag-and-Drop Bild, wenn der Benutzer versucht, sich zu Unterwerfen.

Jedoch, wenn ich versuche zu senden bekomme ich die Fehlermeldung:

Datei-Namen zu lang - public/data/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAap/sABFEdWNreQABAAQAAABkAAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94yxavms4wlwa8p3hwywnj....

da die temporäre Datei storage name von HTML5 ist einfach zu lange, denke ich.

Habe ich versucht die Verkettung der Zeichenfolge in den ersten 60 Zeichen und dann gab es den Fehler:

No such file or directory - public/Daten/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAa

In jedem Fall, die Datei wird nicht Hinzugefügt bekommen, um public/data Ordner.

Mein 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>

Ruby:

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

und JS:

$("#submit input").click(function() {
    $("#uploadfile").val($("#preview").attr("src"));
});
InformationsquelleAutor user1436111 | 2012-10-08
  1. 1

    Das problem sieht wie, die Sie senden die Datei als Base64-codierte Daten-URL, die ist in Ordnung, aber das mit dem Namen nicht gehen zusammen mit ihm, wenn Sie auf dem server bereitstellen. Möchten Sie vielleicht extrahieren Sie die Datei vor dem konvertieren der Datei auf eine Daten-URL, so können Sie schicken Sie es zusammen mit der Datei in die params. Oder erstellen Sie eine neue mit dem Namen (UUID) wie Madao vorgeschlagen.

    Sollte zumindest lösen Sie Ihr problem mit dem Namen:

    def create
    ##
    file = params[:uploadfile]
    name = params[:filename] || SecureRandom.uuid
    ##
    directory = "public/data"
    path = File.join(directory, name)
    File.open(path, "wb") { |f| f.write(file.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
    InformationsquelleAutor Levi V
  2. 0

    Der Punkt ist, verwenden params[:uploadfile] als name-Wert ist unnötig， wenn Sie wollen einen einzigartigen Schlüssel, können Sie einfach SecureRandom.uuid.

    InformationsquelleAutor Madao
Schreibe einen Kommentar