Reactでファイルアップロードアプリを作成する方法

1. 基本的なファイルアップロード: 最も基本的な方法は、input要素を使用してファイルを選択し、そのファイルをサーバーに送信する方法です。

import React, { useState } from 'react';
function FileUploadApp() {
  const [selectedFile, setSelectedFile] = useState(null);
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };
  const handleUpload = () => {
    const formData = new FormData();
    formData.append('file', selectedFile);
    // サーバーにフォームデータを送信するためのAPI呼び出しを行う
    // ここにAPI呼び出しのコードを追加
    // ファイルのアップロードが完了したら、成功メッセージを表示するなどの処理を行う
  };
  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>アップロード</button>
    </div>
  );
}
export default FileUploadApp;

2. ファイルのプレビュー: アップロードするファイルのプレビューを表示する方法です。

import React, { useState } from 'react';
function FileUploadApp() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [previewUrl, setPreviewUrl] = useState(null);
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    setSelectedFile(file);
    setPreviewUrl(URL.createObjectURL(file));
  };
  const handleUpload = () => {
    // ファイルのアップロード処理
  };
  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      {previewUrl && <img src={previewUrl} alt="ファイルプレビュー" />}
      <button onClick={handleUpload}>アップロード</button>
    </div>
  );
}
export default FileUploadApp;

これらはReactでファイルアップロードアプリを作成するための基本的な方法です。必要に応じて、追加の機能や改善を行うことができます。また、ファイルのバリデーション、進捗状況の表示、エラーハンドリングなど、さまざまな機能を追加することもできます。