InMy.Live

Téléchargement d’un seul fichier

Pour télécharger un seul fichier dans React, vous devez définir le content-type et content-length en-têtes et indiquez le contenu du fichier comme corps de la requête :

import { ChangeEvent, useState } from 'react';

function FileUploadSingle() {
  const [file, setFile] = useState<File>();

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setFile(e.target.files[0]);
    }
  };

  const handleUploadClick = () => {
    if (!file) {
      return;
    }

    // 👇 Uploading the file using the fetch API to the server
    fetch('https://httpbin.org/post', {
      method: 'POST',
      body: file,
      // 👇 Set headers manually for single file upload
      headers: {
        'content-type': file.type,
        'content-length': `${file.size}`, // 👈 Headers need to be a string
      },
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => console.error(err));
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />

      <div>{file && `${file.name} - ${file.type}`}</div>

      <button onClick={handleUploadClick}>Upload</button>
    </div>
  );
}

export default FileUploadSingle;

1. Tout d’abord, nous ajoutons un input élément avec type="file" attribut.
2. Nous pouvons stocker le fichier sélectionné dans l’état du composant React, après l’avoir reçu du onChange événement. Comme nous ne pouvons sélectionner qu’un seul fichier, nous pouvons l’obtenir à partir du files tableau sur l’entrée : e.target.files[0].
3. Nous pouvons télécharger le fichier à l’aide de l’API Fetch. Nous devons définir l’ensemble body au fichier que nous avons reçu de l’entrée et des en-têtes : content-type au dossier type et le content-length pour file.size. Notez que les en-têtes doivent être des valeurs de chaîne.

J’ai utilisé une API httpbin.org qui accepte les téléchargements de fichiers et répond avec une copie de la demande que vous envoyez. Voici le résultat :

Téléchargement de plusieurs fichiers

Pour télécharger plusieurs fichiers à partir de input élément dans React, vous devez utiliser l’API JavaScript FormData et encoder la demande comme multipart/form-data.

import { ChangeEvent, useState } from 'react';

function FileUploadMultiple() {
  const [fileList, setFileList] = useState<FileList | null>(null);

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    setFileList(e.target.files);
  };

  const handleUploadClick = () => {
    if (!fileList) {
      return;
    }

    // 👇 Create new FormData object and append files
    const data = new FormData();
    files.forEach((file, i) => {
      data.append(`file-${i}`, file, file.name);
    });

    // 👇 Uploading the files using the fetch API to the server
    fetch('https://httpbin.org/post', {
      method: 'POST',
      body: data,
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => console.error(err));
  };

  // 👇 files is not an array, but it's iterable, spread to get an array of files
  const files = fileList ? [...fileList] : [];

  return (
    <div>
      <input type="file" onChange={handleFileChange} multiple />

      <ul>
        {files.map((file, i) => (
          <li key={i}>
            {file.name} - {file.type}
          </li>
        ))}
      </ul>

      <button onClick={handleUploadClick}>Upload</button>
    </div>
  );
}

export default FileUploadMultiple;

La première différence par rapport à notre exemple de téléchargement de fichier unique est l’ajout de multiple attribut sur le input élément.

Au lieu de stocker un seul fichier dans l’état du composant React, nous enregistrons l’ensemble FileList en état

Pour télécharger plusieurs fichiers :

1. Créer un FormData objet: const data = new FormData();
2. Ajoutez chaque fichier que vous souhaitez télécharger à l’aide de FormData.append() – il accepte un nom de champ de formulaire, le fichier et un nom de fichier comme paramètres.
3. À l’aide de l’API Fetch, téléchargez les fichiers en définissant les données du formulaire comme body. Notez que lorsque vous utilisez des données de formulaire, vous n’avez pas besoin de définir les en-têtes manuellement. Il est pris en charge par l’API de récupération.

Voici à quoi ça ressemble :

Personnalisation de l’entrée du fichier

Le défaut input L’élément n’offre pas grand-chose en termes de style. Pour créer une entrée de téléchargement de fichier personnalisée dans React, vous devrez masquer l’entrée de téléchargement de fichier natif et déclencher le click événements sur l’entrée à l’aide de refs :

import { ChangeEvent, useRef, useState } from 'react';

function CustomFileInput() {
  const [file, setFile] = useState<File>();
  const inputRef = useRef<HTMLInputElement | null>(null);

  const handleUploadClick = () => {
    // 👇 We redirect the click event onto the hidden input element
    inputRef.current?.click();
  };

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) {
      return;
    }

    setFile(e.target.files[0]);

    // 🚩 do the file upload here normally...
  };

  return (
    <div>
      <div>Upload a file:</div>

      {/* 👇 Our custom button to select and upload a file */}
      <button onClick={handleUploadClick}>
        {file ? `${file.name}` : 'Click to select'}
      </button>

      {/* 👇 Notice the `display: hidden` on the input */}
      <input
        type="file"
        ref={inputRef}
        onChange={handleFileChange}
        style={{ display: 'none' }}
      />
    </div>
  );
}

Seulement le input L’élément avec le type de fichier peut ouvrir les fichiers à sélectionner dans le navigateur. Pour télécharger un fichier en cliquant sur le bouton personnalisé, nous devons déclencher le click() événement sur l’entrée : inputRef.current?.click();

Si nous ne voulons pas afficher l’entrée native, nous pouvons la masquer en ajoutant le display: none propriété CSS dans son style ou en appliquant une classe CSS qui définit la propriété d’affichage sur none (par exemple, dans Tailwind, le nom de la classe est hidden).

Dès lors, vous pouvez enregistrer les fichiers sélectionnés dans l’état ou les télécharger immédiatement. Vous avez maintenant une personnalisation complète de l’entrée de téléchargement de fichier :

Conclusion

Dans React, le téléchargement de fichiers est implémenté en utilisant le code HTML input élément et du JavaScript pour faire une requête POST/PUT au serveur avec le FormData qui contient les fichiers sélectionnés.

Votre serveur devra alors traiter les données du formulaire en plusieurs parties pour accepter les téléchargements de fichiers. Vous pouvez utiliser Multer dans Node.js pour implémenter cela ou télécharger les fichiers directement sur Amazon S3 si c’est ce que vous voulez.

Comme toujours, trouvez le code utilisé dans les exemples de mon référentiel GitHub.