Úvod

Dropzone UI je kompletní sada reakčních komponent, která umožňuje vývojářům strávit méně času kódováním zóny drag and drop pro nahrávání souborů.

Ve standardním HTML5 můžete nahrávat soubory přes
. Navíc existují balíčky jako dropzone a reag-dropzone, které tento úkol zvládnou velmi dobře.
Nicméně, inspirováno v těch posledních, bylo vytvořeno něco nového a výkonnějšího:dropzone-ui.

Pomocí tohoto nového nástroje můžete snadno zobrazit náhledy a také omezit typy souborů, velikost a množství souborů. Kromě toho můžete změnit režim zobrazení, abyste viděli soubory jako vodorovný seznam nebo jako mřížku.

Jak jsem řekl dříve, režim zobrazení můžete změnit kliknutím na tlačítko nahoře vedle tlačítka „odebrat vše“:

Poslední ukázka je důležitá, protože můžete vidět také 2 vynikající funkce:

• Informační vrstva
• Stav souboru

Informační vrstva

Vrstva, která zobrazuje všechny relevantní informace o souboru, jako je název, typ a velikost.

Stav souboru

Stav souboru po ověření podle ověřovacích kritérií.

Chcete-li vytvořit Dropzone, která podporuje snímky obrazovky uvedené výše, potřebujete tento kód převzatý z CodesandBox:

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          preview
          info
          hd
        />
      ))}

    </Dropzone>
  );
}

Náhled na celou obrazovku

Jednou z vlastností je, že v kombinaci s další komponentou nazvanou "FullScreenPreview" ze stejného balíčku můžete vidět náhled souboru na celou obrazovku.

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          preview
          info
          hd
        />
      ))}
      <FullScreenPreview
        imgSource={imageSrc}
        openImage={imageSrc}
        onClose={(e) => handleSee(undefined)}
      />
    </Dropzone>
  );
}

A toto je výsledek po vypuštění souborů a kliknutí na view tlačítko na požadované položce souboru:

Lokalizace

V neposlední řadě je uživatelské rozhraní dropzone dostupné ve španělštině prostřednictvím localization podpěra:

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { useState } from "react";
export default function App() {
  const [files, setFiles] = useState([]);
  const [imageSrc, setImageSrc] = useState(undefined);
  const updateFiles = (incommingFiles) => {
    console.log("incomming files", incommingFiles);
    setFiles(incommingFiles);
  };
  const onDelete = (id) => {
    setFiles(files.filter((x) => x.id !== id));
  };
  const handleSee = (imageSource) => {
    setImageSrc(imageSource);
  };
  return (
    <Dropzone
      onChange={updateFiles}
      value={files}
      maxFiles={10}
      maxFileSize={2998000}
      localization={"ES-es"}
    >
      {files.map((file) => (
        <FileItem
          {...file}
          onDelete={onDelete}
          onSee={handleSee}
          localization={"ES-es"}
          preview
          info
          hd
        />
      ))}
      <FullScreenPreview
        imgSource={imageSrc}
        openImage={imageSrc}
        onClose={(e) => handleSee(undefined)}
      />
    </Dropzone>
  );
}

Závěr

Závěrem lze říci, že se jedná o úžasnou knihovnu pro drag and drop soubory s náhledy obrázků. Tento příspěvek nemůže ukázat úplný potenciál dropzone-ui, ale byl poskytnut obecný přehled. Ve skutečnosti jsou zde informace dostačující k tomu, abyste mohli začít s jeho úžasným nástrojem. Více informací naleznete v dokumentaci https://www.npmjs.com/package/dropzone-ui. V dalších příspěvcích ukážu tento balíček podrobně.