FileUpload

import { Cell, For } from "retend";

import { Button, FileUpload } from "innate-ui";
import classes from "../docs.module.css";

export function FileUploadDemo() {
  const files = Cell.source<ReadonlyArray<File>>([]);
  const removeFile = (file: File) => {
    files.set(files.get().filter((item) => item !== file));
  };

  return (
    <div class={classes.fileUploadDemo}>
      <FileUpload
        value={files}
        accept="image/*"
        multiple
        maxFiles={3}
        onChange={(next) => files.set(next)}
      >
        <FileUpload.Dropzone>
          <strong>Drop images here</strong>
          <span>Up to 3 images total</span>
          <FileUpload.Trigger>Browse images</FileUpload.Trigger>
        </FileUpload.Dropzone>
      </FileUpload>

      <ul class={classes.fileUploadFiles}>
        {For(files, (file) => (
          <li>
            <span title={file.name}>{file.name}</span>
            <Button
              size="small"
              variant="ghost"
              title={`Remove ${file.name}`}
              onClick={() => removeFile(file)}
            >
              Remove
            </Button>
          </li>
        ))}
      </ul>
    </div>
  );
}