title: HTML5 file drag-and-drop upload with Ruby on Rails
body: <p>In my Ruby on Rails app, I have a simple file upload button that I'm trying to replace with a drag and drop box using the File/FileReader APIs in HTML5, using <a href="http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/" rel="noreferrer">this tutorial</a> specifically. As is, I use a Ruby script to upload the file to my public/data folder. I'm not sure how to integrate the drag-and-drop script with that. My idea was to make the file upload button I had already hidden, and use Javascript to set its value to the path of the drag-and-dropped image when the user tries to submit.</p>
  
  <p>However, when I try to submit I get the error: </p>
  
  <blockquote>
    <p>File name too long - public/data/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNj....</p>
  </blockquote>
  
  <p>because the temporary file storage name given by HTML5 is just too long, I guess. </p>
  
  <p>I tried concatenating the string to the first 60 characters and then it gave the error:</p>
  
  <blockquote>
    <p>No such file or directory - public/data/data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAA</p>
  </blockquote>
  
  <p>In any case, the file is not getting added to <code>public/data</code> folder.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;%= form_tag( { :action =&gt; 'create' }, :multipart =&gt; true ) %&gt;
  &lt;div id="dropbox"&gt;&lt;span id="droplabel"&gt;Drop file here...&lt;/span&gt;&lt;/div&gt;
  &lt;img id="preview" alt="[ preview will display here ]" /&gt;
  
  &lt;%= hidden_field_tag :uploadfile, :id =&gt; "uploadfile", :name =&gt; "uploadfile" %&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;div id="submit"&gt;
  &lt;%= submit_tag( "Upload file" ) %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Ruby:</p>
  
  <pre><code>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 =&gt; name, :location =&gt; 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
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>$("#submit input").click(function() {
      $("#uploadfile").val($("#preview").attr("src"));
  });
  </code></pre>