Phenix Storybook

File Upload

Default file input Open in playground

files 

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.file_upload_input_group
    form={f}
    name={:file}
    upload_config={%Phoenix.LiveView.UploadConfig{accept: ".jpg, .png", ref: "upload-input"}}
    upload_progress={0}
  />
</.phx_form_for>
With label and hint Open in playground

Un fichier peut mettre jusqu'à 5min pour se téléverser.

50 Mo max 

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.file_upload_input_group
    form={f}
    label="Your file"
    name={:file}
    hint="50 Mo max"
    placeholder="Un fichier peut mettre jusqu'à 5min pour se téléverser."
    upload_config={%Phoenix.LiveView.UploadConfig{accept: ".jpg, .png", ref: "upload-input"}}
    upload_progress={0}
  />
</.phx_form_for>
With progress Open in playground 
<.phx_form_for for={%{}} as={:story} :let={f}>
  <.file_upload_input_group
    form={f}
    label="Your file"
    name={:file}
    upload_config={%Phoenix.LiveView.UploadConfig{accept: ".jpg, .png", ref: "upload-input"}}
    upload_progress={50}
  />
</.phx_form_for>
With validation error Open in playground

files 

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.file_upload_input_group
    form={f}
    name={:file}
    upload_config={%Phoenix.LiveView.UploadConfig{entries: [%Phoenix.LiveView.UploadEntry{ref: "upload-input"}], accept: ".jpg, .png", ref: "upload-input", errors: [{"upload-input", :too_large}]}}
    upload_progress={0}
  />
</.phx_form_for>