File attachments for redux-form and elixir/phoenix as backend API (serialization issue)
<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>