Svelte Dropzone Textarea

andygock
1

svelte-dropzone-textarea

Drag and drop a file into a <textarea> Svelte component and load the file's content into the textarea.

Install

npm install svelte-dropzone-textarea

Usage

Example usage:

<script>
  import DropzoneTextarea from "svelte-dropzone-textarea";

  let data = "";

  const handleRead = (text) => {
    data = text;
    console.log(`handleRead(): ${text.length} bytes`);
  };

  const handleUpdate = (text) => {
    date = text;
    console.log(`handleUpdate(): ${text.length} bytes`);
  };
</script>

<h1>DropzoneTextarea</h1>
<DropzoneTextarea {handleRead} {handleUpdate} />
<p>data is {data.length} characters long</p>

Demo on StackBlitz

Props

Name	Type	Description
`handleFile`	`function`	Callback function that is called when a file is dropped.
`handleRead`	`function`	Callback function that is called when a file is dropped and read.
`handleUpdate`	`function`	Callback function that is called when the textarea is updated, includes dropping or typing.
`valueModify`	`function`	Modify value of dropped file contents before updating textarea.
`...rest`	`...`	Any other props are passed to the underlying textarea.

Top categories