How to display preview image using Plug.Upload

Questions / Help
,
1

I am trying to let user upload image in the form, then when an user upload an image and submit the form, I do put_session %Plug.Upload{} in session data then forward to new page for preview.

  def preview_mms(conn, %{ "upload-image" => upload_image}) do
    conn
    |> put_session(:upload_image, file)
    |> redirect(to: image_preview_path(conn, :index))
  end

then in ImagePreviewController.ex

def index(conn, _params) do
  %{filename: filename, path: path} = get_session(conn, :upload_image)
  temp_file = Path.join(path, filename)
  render conn, "index.html", temp_file: temp_file
end

in index.html.eex

<div class="row">
  <div class="col12">
    <img src="<%= @temp_file %>" alt="Upload Image">
  </div>
</div>

But got an error

(Phoenix.Router.NoRouteError) no route found for GET /tmp/plug-1528/multipart-1528402326-568658593711254-4/momo.jpg

I read docs in Plug.Upload and it says

“Uploaded files are stored in a temporary directory and removed from that directory after the process that requested the file dies.”

What does it mean? does it mean uploaded file in temp directory deleted after new request? even though I try to put that in session data?

What am I missing? Please help!

2

You did not put the file in the session, but just a struct with the name and path to the temp. file. The file itself is still just on the filesystem and will be delete with the end of the request.

3

Oh ok.
then I tried to save a actual content(image file) in session but I can’t do this
(Plug.Conn.CookieOverflowError) cookie named “_myapp_key” exceeds maximum size of 4096 bytes
I think this is because image file is too book to save in session data.
So what is better solution?
Why I am trying to do this is I want an user check the image before save to Amazon s3.

4

So move the file to a different location and it’s not going to be removed automatically. But you’re then also responsible to clean up at that new location in case people abandon the upload and such.

I always uploading files to S3 but into a temp. folder, which is set up to delete files after 24h – this way the cleanup is automated for me – and if the user saves the uploaded file I only move the file on S3 to a location without auto cleanup.

4 Likes