Skip to content

A Svelte UI component for easy and intuitive file uploading

License

Notifications You must be signed in to change notification settings

svar-widgets/uploader

Repository files navigation

SVAR Svelte File Uploader

npm License npm downloads

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