SVAR Svelte File Uploader

Demos

A Svelte UI component for easy and intuitive file uploading, allowing users to drag and drop files or select them from their device.

Versions for Svelte 4 and 5

There are two versions of the Uploader component:

  • version 1.x was designed to work with Svelte 4
  • version 2.x is created for Svelte 5 (please note that this version is in beta and may contain some instabilities)

To use SVAR Uploader v.2.0 beta for Svelte 5, install it as follows:

npm install wx-svelte-uploader

To use SVAR Uploader for Svelte 4:

npm install [email protected]

How to Use

To use the widget, simply import the package and include the component in your Svelte file:

<script>
    import { Uploader, UploaderList } from "wx-svelte-uploader";

    let data = [];
    const uploadURL = "http://localhost:3000/data";

    function handleUpload(ev) {
        console.log(ev.detail);
    }
</script>

<UploaderList bind:data />
<Uploader {uploadURL} bind:data on:upload={handleUpload} />

How to Modify

Typically, you don't need to modify the code. However, if you wish to do so, follow these steps:

  1. Run yarn to install dependencies. Note that this project is a monorepo using yarn workspaces, so npm will not work
  2. Start the project in development mode with yarn start

Run Tests

To run the test:

  1. Start the test examples with:
    yarn start:tests
    
  2. In a separate console, run the end-to-end tests with:
    yarn test:cypress
    

Top categories

Loading Svelte Themes