Phenix Storybook

Pick a theme

Displays Riders

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

Fichier trop volumineux 

<.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>