Adding AWS file uploads to existing form

I have an existing form that writes text fields to the db. I’m looking for a guide/tutorial that shows how to include allowing the user to upload an image file in that existing form. Seems there’s plenty of docs out there on how to upload a file to AWS in isolation, but none that I can find showing up to upload a file with an existing post so that the file(image) is part of the show view. Anyone seen one around?

Do you want to upload to AWS directly or through your application?

I’d want users (an admin) to do it through the app UI.

I mean, do you first upload the file to your server and then from there to AWS, or do you upload it directly to AWS from the browser?

If it’s the latter, I don’t know if uploading to several hosts in the same multipart request is possible, so I would probably separate the forms, add a hidden input for the uploaded file url (on aws) and populate it with JS.

I’d want to be able to upload directly to AWS directly from the browser as part of a form. I’d then want the image to appear directly in the show view.

The former method you mention, I’ve worked out how to do, but it’s pretty poor user flow.

I’d do it with a hidden input field then, probably.

  • User picks a file
  • Some JS code uploads it to AWS
  • On upload callback the hidden aws_url field in the form gets populated with the uploaded file url
  • On submit the url gets submitted together with the form and shown in the show view

What timing! I git pushed my first working elixir upload commit within five minutes of this post :stuck_out_tongue:

This worked for me:

Edit: the show view I can’t help you with, sadly. I used Elm for the front end, and Phoenix 1.3 on the back.

1 Like

Thanks @markdev I was looking through that post just a few hours ago. It so nearly helps me with that I’m trying to do. At this stage I’ll just have to try to repurpose it as much as possible to see how I can take it to work with an existing form. The view part should be straight forward, it’s just getting an image uploaded at the same time as a post that’s the hurdle for me right now.