@solid-primitives/upload

Primitive to make uploading files and making dropzones easier.

Installation

npm install @solid-primitives/upload
# or
yarn add @solid-primitives/upload

How to use it

createFileUploader

// single files
const { files, selectFiles } = createFileUploader();
selectFiles([file] => console.log(file));

// multiple files
const { files, selectFiles } = createFileUploader({ multiple: true, accept: "image/*" });
selectFiles(files => files.forEach(file => console.log(file)));

use:fileUploader directive

const [files, setFiles] = createSignal<UploadFile[]>([]);

<input
  type="file"
  multiple
  use:fileUploader={{
    userCallback: fs => fs.forEach(f => console.log(f)),
    setFiles,
  }}
/>;

createDropzone

<div
  ref={dropzoneRef}
  style={{ width: "100px", height: "100px", background: "red" }}>
  Dropzone
</div>

const { setRef: dropzoneRef, files: droppedFiles } = createDropzone({
  onDrop: async files => {
    await doStuff(2);
    files.forEach(f => console.log(f));
  },
  onDragStart: files => files.forEach(f => console.log(f)),
  onDragOver: files => console.log("drag over"),
});

Demo

Working example: https://primitives.solidjs.community/playground/upload Source code: https://github.com/solidjs-community/solid-primitives/blob/main/packages/upload/dev/index.tsx

Changelog

See CHANGELOG.md