【API】REACT+OpenAPI+SpringでCSVアップロード機能を実装してみるよ

投稿者 投稿日:

REACT+OpenAPI+Spring BootでCSVをアップロードする機能を実装したい！

という事で今回実装例を挙げてみたいと思います

CSVファイルのアップロード機能をReactフロントエンドで実装を見ていきます！


1. フロントエンド

フォームの作成

CSVファイルをアップロードするためのフォームを作成します

// CSVUploadForm.js

import React, { useState } from 'react';

const CSVUploadForm = ({ onFileUpload }) => {
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    const selectedFile = event.target.files[0];
    setFile(selectedFile);
  };

  const handleUpload = () => {
    if (file) {
      onFileUpload(file);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>アップロード</button>
    </div>
  );
};

export default CSVUploadForm;

APIとの通信

CSVファイルをアップロードするためのAPIエンドポイントを呼び出す関数を作成します
これはOpenAPIを使用している場合、OpenAPIで定義されたエンドポイントに対応するものです

// API.js

const uploadCSV = async (file) => {
  const formData = new FormData();
  formData.append('file', file);

  const response = await fetch('/api/upload/csv', {
    method: 'POST',
    body: formData,
  });

  if (!response.ok) {
    throw new Error('CSVアップロードに失敗しました。');
  }

  const result = await response.json();
  return result;
};

export { uploadCSV };

コンポーネントで使用

CSVアップロードフォームとAPI呼び出しを組み合わせてコンポーネントを作成します

// UploadComponent.js

import React from 'react';
import CSVUploadForm from './CSVUploadForm';
import { uploadCSV } from './API';

const UploadComponent = () => {
  const handleFileUpload = async (file) => {
    try {
      const result = await uploadCSV(file);
      console.log('アップロード成功:', result);
      // 成功時の処理を追加する
    } catch (error) {
      console.error('アップロードエラー:', error.message);
      // エラー時の処理を追加する
    }
  };

  return (
    <div>
      <h2>CSVアップロード</h2>
      <CSVUploadForm onFileUpload={handleFileUpload} />
    </div>
  );
};

export default UploadComponent;

ルートコンポーネントで使用

アプリケーションのルートコンポーネントでUploadComponentを呼び出します

// App.js

import React from 'react';
import UploadComponent from './UploadComponent';

const App = () => {
  return (
    <div>
      <h1>React CSVアップロード</h1>
      <UploadComponent />
    </div>
  );
};

export default App;

上記は基本的な実装例でになります

実際のプロジェクトによってはエラーハンドリングやユーザーフィードバックのための追加の機能が必要です

また、サーバーサイド（Java）の実装もOpenAPIを使用して、ファイルを受け取り、処理するように設定する必要がありますね

次にサーバ再度の実装を見ていきます


2. バックエンド

JavaでCSVファイルを受け取るためには、Spring Frameworkなどを使用してRESTfulなエンドポイントを作成し、ファイルの受け取りと処理を行います

Controllerの作成

JavaでCSVファイルを受け取るためには、Spring Frameworkなどを使用してRESTfulなエンドポイントを作成し、ファイルの受け取りと処理を行います

import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping("/api/upload")
public class FileUploadController {

    @PostMapping("/csv")
    public ResponseEntity<String> handleCSVUpload(@RequestParam("file") MultipartFile file) {
        // ファイルの処理を行う（例: データベースに保存など）

        // 成功時のメッセージを返す
        return ResponseEntity.ok("CSVファイルが正常にアップロードされました。");
    }
}

MultipartFileの処理

MultipartFileを使用してファイルを受け取り、適切な処理を行います
この例では、ファイルをデータベースに保存することは示していますが、実際の要件に合わせて処理を変更してください！



このコードを実行するにはSpring Bootアプリケーションをビルドして実行する必要があります

通常、このようなエンドポイントは「http://localhost:8080/api/upload/csv」のようなURLで提供されます
（ポート番号はプロジェクトの設定により異なる場合があります）

なお、この例ではエラーハンドリングやセキュリティ機能が省略されていますので、プロジェクトに合わせて追加していってください

ぜひお試しくださいね！

ではっ

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon