FileUpload

() => {
    const [myFiles, setMyFiles] = React.useState([])
    const[error, setError] = React.useState(false);
    const onDelete = file  =>{
      setMyFiles((prev) => prev.filter((f) => f !== file));
    }
    const onDrop = React.useCallback((acceptedFiles) => {
      acceptedFiles.forEach((file) => {
      const reader = new FileReader()
      reader.onerror = () => setError(true);
      reader.onload = () => {
        setMyFiles([...myFiles, ...acceptedFiles]);
      }
      reader.readAsArrayBuffer(file)
    })
  }, [])
  return(<FileUpload accept="image/*" files={myFiles} errorUpload={error} onDrop={onDrop} onDelete={file => onDelete(file)} ></FileUpload>);
}

Bruk FileUpload når

Bruk FileUpload når du trenger å ta imot filer fra brukeren, f.eks. bilder eller dokumenter, via dra-og-slipp eller en vanlig filvelger.

Retningslinjer

FileUpload bygger på react-dropzone og sprer videre props for det biblioteket.

Komponenten validerer eller forkaster ikke potensielt skadelige filer selv — dette må du selv stå for. Bruk accept-propen for å begrense hvilke filtyper som aksepteres. Les mer i OWASP sin artikkel om filopplasting.

Eksempler

Dra-og-slipp med feilhåndtering
() => {
    const [myFiles, setMyFiles] = React.useState([])
    const[error, setError] = React.useState(false);
    const onDelete = file  =>{
      setMyFiles((prev) => prev.filter((f) => f !== file));
    }
    const onDrop = React.useCallback((acceptedFiles) => {
      acceptedFiles.forEach((file) => {
      const reader = new FileReader()
      reader.onerror = () => setError(true);
      reader.onload = () => {
        setMyFiles(prev => [...prev, ...acceptedFiles]);
      }
      reader.readAsArrayBuffer(file)
    })
  }, [])
  return(<FileUpload accept="image/*" files={myFiles} errorUpload={error} onDrop={onDrop} onDelete={file => onDelete(file)} ></FileUpload>);
}