Sara UI

logo

ImageUploader

Allows to upload and represent images.

Example

Example.svelte
<script lang="ts">
  import { ImageUploader } from "saraui"

  let state: File | undefined = undefined 
  //or you can init the state and you'll have an image placeholder
</script>

<ImageUploader bind:state
  name="profilePicture" 
  acceptedFileExtensions=".jpg, .png, .heic, .avif"
/>

Props

color?:

"primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error"

rounded?:

"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"

acceptedFileExtensions?:

string

isEditable?:

boolean

name?:

string

name is used to identify the file in a FormData value

state?:

File

you can use this prop to add a placeholder or bind:state to get the file when selected

icon?:

IconClassString | SizedIcon

Check Icons section
width?:

any posible default spacing value from Tailwind

Check Tailwind's default spacing scale