How to upload an image to a Phoenix JSON API back-end٩

Phoenix Forum Questions / Help
,
1

Is converting to base64 the only way to go? Or is it possible to post the image to a JSON API back-end using multipart/form-data.

I am using Vue-JS on front-end, can an image 10 MB in size be converted client side to base64 and then posted to to Phoenix as JSON without making the browser freeze?

All I need is to upload an image from VueJs to Phoenix, save its path on server and get an id identifier for it sent back to client.

2

Here’s a page in the Phoenix docs that should get you started @acrolink! http://phoenixframework.org/blog/file-uploads

1 Like
3

JSON Api is a typical case…

I have done it the base64 way, but You need to increase Plug.Parsers length in your endpoint. This was otherwise not working for HiRes photos from mobile.

PRO: It is just acting like a string.
CON: There is an increase of the file size transmitted, due to encoding.

I saw someone mixing both… JSON Api + support for Plug.Uploads, but could not remember where.

2 Likes
4

@acrolink please have you being able to resolve this issue. I’m also experiencing similar issue.

5

@acrolink, @papakay Have you managed to understand how to solve this ? I’m also facing the same question, the only different part is that i’m using elm as the front-end.

Thank you!