title: File attachments for redux-form and elixir/phoenix as backend API (serialization issue)
body: <p>I have two <code>product</code> controllers in my elixir/phoenix backend. First - API endpoint (<code>pipe_through :api</code>) and second controller <code>piping through :browser</code>:</p>
  
  <pre><code># router.ex
  scope "/api", SecretApp.Api, as: :api do
    pipe_through :api
  
    resources "products", ProductController, only: [:create, :index]
  end
  
  scope "/", SecretApp do
    pipe_through :browser # Use the default browser stack
  
    resources "products", ProductController, only: [:new, :create, :index]
  end
  </code></pre>
  
  <p><code>ProductController</code> handles requests from form generated by elixir form helpers and accepts some file attachments. Everything is fine with it. Here is create action and params processed by this action:</p>
  
  <pre><code>def create(conn, %{"product" =&gt; product_params}) do
    changeset = Product.changeset(%Product{}, product_params)
  
    case Repo.insert(changeset) do
      {:ok, _product} -&gt;
        conn
        |&gt; put_flash(:info, "Product created successfully.")
        |&gt; redirect(to: product_path(conn, :index))
      {:error, changeset} -&gt;
        render(conn, "new.html", changeset: changeset)
    end
  end
  </code></pre>
  
  <p>params from log (I am using <a href="https://github.com/stavro/arc">arc</a> for handling image uploads in elixir code)</p>
  
  <pre><code>[debug] Processing by SecretApp.ProductController.create/2
    Parameters: %{"_csrf_token" =&gt; "Zl81JgdhIQ8GG2c+ei0WCQ9hTjI+AAAA0fwto+HMdQ7S7OCsLQ9Trg==", "_utf8" =&gt; "✓", 
                "product" =&gt; %{"description" =&gt; "description_name", 
                  "image" =&gt; %Plug.Upload{content_type: "image/png", 
                    filename: "wallpaper-466648.png", 
                    path: "/tmp/plug-1460/multipart-754282-298907-1"}, 
                  "name" =&gt; "product_name", "price" =&gt; "100"}}
    Pipelines: [:browser]
  </code></pre>
  
  <p><code>Api.ProductController</code> handles requests from <a href="https://github.com/erikras/redux-form">redux-from</a>. Here is action, view and params, which are processed by this action:</p>
  
  <pre><code># action in controller
  def create(conn, %{"product" =&gt; product_params}) do
    changeset = Product.changeset(%Product{}, product_params)
  
    case Repo.insert(changeset) do
      {:ok, _product} -&gt;
        conn
        |&gt; render("index.json", status: :ok)
      {:error, changeset} -&gt;
        conn
        |&gt; put_status(:unprocessable_entity)
        |&gt; render("error.json", changeset: changeset)
    end
  end
  
  # product_view.ex
  def render("index.json", resp=%{status: status}) do
    %{status: status}
  end
  
  def render("error.json", %{changeset: changeset}) do
    errors = Enum.into(changeset.errors, %{})
  
    %{
      errors: errors
    }
  end
  
  [info] POST /api/products/
  [debug] Processing by SecretApp.Api.ProductController.create/2
    Parameters: %{"product" =&gt; %{"description" =&gt; "product_description", "image" =&gt; "wallpaper-466648.png", "name" =&gt; "product_name", "price" =&gt; "100"}}
    Pipelines: [:api]
  [info] Sent 422 in 167ms
  </code></pre>
  
  <p>Create action fails with 422 status, because image can't be saved with these params. My problem that I can't access image from backend code, I only have it in my JS code as FileList object. I don't understand how to pass image to backend code. Here is how this attachment represented in my JS code  (FileList, containing information about uploaded image).</p>
  
  <pre><code>value:FileList
    0: File
      lastModified: 1381593256801
      lastModifiedDate: Sat Oct 12 2013 18:54:16 GMT+0300 
      name: "wallpaper-466648.png"
      size: 1787293
      type: "image/png"
      webkitRelativePath: ""
  </code></pre>
  
  <p>I only have WebkitRelativePath (In case with first controller I have path to image: "/tmp/plug-1460/multipart-754282-298907-1") and I don't know what can I do with this JS object and how to access real image represented by this JS object (here is a <a href="http://redux-form.com/5.0.1/#/examples/file?_k=q4hifz">redux-form reference</a> about file uploads).</p>
  
  <p>Could you help me? How to explain to elixir how to find an image? I just would like to submit file attachments to my backend using JS code (because there a lot of interesting features for async validation etc).</p>
  
  <p>Here is a link to a full <a href="https://github.com/DavydenkovM/phoenix_commerce">app</a> if it could be helpful</p>