title: React Native - Upload image to Elixir Phoenix Framework
body: <p>I am using <code>Elixir Phoenix</code> as my backend and create an <code>api</code> to upload image. I am using <code>Waffle</code> hex package to handle the uploading.</p>
  <p>so I have a <code>api</code>:</p>
  <pre><code>localhost:4000/uplaod_avatar/
  </code></pre>
  <p>and run this function in controller:</p>
  <pre><code>  def upload_avatar(conn, params) do
      scope = Repo.get(User, 1)
      case AvatarUploader.store({ params[&quot;image&quot;], scope }) do
        {:ok, filename} -&gt;
          IO.puts(filename)
          render(conn, &quot;upload.json&quot;, params: %{&quot;status&quot; =&gt; :success, &quot;filename&quot; =&gt; filename})
        _ -&gt;
          render(conn, &quot;upload.json&quot;, params: %{&quot;status&quot; =&gt; :error})
      end
    end
  </code></pre>
  <p>when I test it with <code>Postman</code>, everything works. I test it with <code>formData</code> as the image shown below:</p>
  <p><a href="https://i.stack.imgur.com/TA7dM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TA7dM.png" alt="enter image description here" /></a></p>
  <p>this is the data from <code>Postman</code>:</p>
  <blockquote>
  <p>%{&quot;image&quot; =&gt; %Plug.Upload{content_type: &quot;image/png&quot;,
  filename: &quot;Screenshot 2021-03-10 at 4.31.53 PM.png&quot;, path:
  &quot;/var/folders/y7/9j1md31s75n9kwfbs6q073fw0000gn/T//plug-1618/multipart-1618382732-484457522147916-1&quot;}}</p>
  </blockquote>
  <p>It seems like <code>Phoenix Framework</code> understand the content data coming in and use <code>Plug.Upload</code> to process.</p>
  <p>But when I use <code>React Native</code> to test (ios version), this is what I do:</p>
  <pre><code>const data = new FormData();
        data.append('image',{
          name: this.state.fileName,
          type:this.state.fileType,
          uri:this.state.fileUri
        })
  </code></pre>
  <p>using the same <code>api</code>, I get the data like this:</p>
  <blockquote>
  <p>%{&quot;image&quot; =&gt; &lt;&lt;255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0,
  0, 72, 0, 72, 0, 0, 255, 225, 0, 88, 69, 120, 105, 102, 0, 0, 77, 77,
  0, 42, 0, 0, 0, 8, 0, 2, 1, 18, 0, 3, 0, 0, 0, 1, 0, ...&gt;&gt;}</p>
  </blockquote>
  <p>of course the <code>api</code> is not working for <code>react native</code>.</p>
  <p>How can I convert my data from <code>react native</code> to something like the data from <code>Postman</code>?</p>
  <p><strong>Update01</strong>
  After some poking around, I found out that the code for <code>Postman</code> is:</p>
  <pre><code>var formdata = new FormData();
  formdata.append(&quot;image&quot;, fileInput.files[0], &quot;Screenshot 2021-03-10 at 4.31.53 PM.png&quot;);
  </code></pre>
  <p>now, the question is, How can I get <code>fileInput.files[0]</code> from <code>React Native</code>?</p>