react 画像アップロード

import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import './FileUpload.css';

const FileUpload = () => {
  const [file, setFile] = useState(null);
  const [documentName, setDocumentName] = useState('');
  const [error, setError] = useState('');

  const onDrop = useCallback((acceptedFiles, rejectedFiles) => {
    if (rejectedFiles.length > 0) {
      setError('PDFまたはHTMLファイルのみアップロード可能です。');
      return;
    }
    
    const selectedFile = acceptedFiles[0];
    setFile(selectedFile);
    setError('');
  }, []);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: {
      'application/pdf': ['.pdf'],
      'text/html': ['.html', '.htm']
    },
    multiple: false
  });

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!file || !documentName) {
      setError('ファイルとドキュメント名を入力してください。');
      return;
    }

    const formData = new FormData();
    formData.append('file', file);
    formData.append('documentName', documentName);

    try {
      const response = await fetch('http://localhost:5000/upload', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        alert('ファイルのアップロードが完了しました。');
        setFile(null);
        setDocumentName('');
        setError('');
      } else {
        throw new Error('アップロードに失敗しました。');
      }
    } catch (error) {
      setError('アップロード中にエラーが発生しました。');
    }
  };

  return (
    <div className="upload-container">
      <h2>ファイルアップロード</h2>
      
      <div {...getRootProps()} className="dropzone">
        <input {...getInputProps()} />
        <p>ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択してください</p>
        <p>（PDFまたはHTMLファイルのみ）</p>
      </div>

      {file && (
        <div className="selected-file">
          選択されたファイル: {file.name}
        </div>
      )}

      <div className="input-group">
        <label htmlFor="documentName">ドキュメント名:</label>
        <input
          type="text"
          id="documentName"
          value={documentName}
          onChange={(e) => setDocumentName(e.target.value)}
        />
      </div>

      {error && <div className="error">{error}</div>}

      <button onClick={handleSubmit} className="submit-button">
        アップロード
      </button>
    </div>
  );
};

export default FileUpload;

.upload-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.dropzone {
  border: 2px dashed #cccccc;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
}

.dropzone:hover {
  border-color: #666666;
}

.selected-file {
  margin: 10px 0;
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.input-group {
  margin: 20px 0;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.error {
  color: red;
  margin: 10px 0;
}

.submit-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0056b3;
}

from flask import Flask, request
from flask_cors import CORS
from google.cloud import storage
import os

app = Flask(__name__)
CORS(app)

# GCPの認証情報を環境変数から設定
os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = "path/to/your/credentials.json"

# GCSのバケット名
BUCKET_NAME = "your-bucket-name"

@app.route('/upload', methods=['POST'])
def upload_file():
    try:
        # ファイルとドキュメント名を取得
        file = request.files['file']
        document_name = request.form['documentName']

        # GCSクライアントの初期化
        storage_client = storage.Client()
        bucket = storage_client.bucket(BUCKET_NAME)

        # ファイル名の作成（document_nameを含める）
        blob_name = f"{document_name}/{file.filename}"
        blob = bucket.blob(blob_name)

        # ファイルのアップロード
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )

        return {'message': 'File uploaded successfully'}, 200

    except Exception as e:
        return {'error': str(e)}, 500

if __name__ == '__main__':
    app.run(debug=True)

import pandas as pd

def update_doc_list(uploaded_files, storage_files, csv_path):
    try:
        # CSVファイルを読み込む
        df = pd.read_csv(csv_path)
        
        # storage_filesから実際のファイル名のリストを作成
        actual_files = [file.name for file in storage_files]
        
        # CSVのfilenameカラムの値がstorage_filesに存在しない行を削除
        df = df[df['filename'].isin(actual_files)]
        
        # doc_numを1から振り直す
        df['doc_num'] = range(1, len(df) + 1)
        
        # 新しくアップロードされたファイルの情報を追加
        for file in uploaded_files:
            new_row = {
                'doc_num': len(df) + 1,
                'filename': file.name,
                'title': file.name,  # タイトルはファイル名をデフォルトとする
                'url': ''  # URLは適宜設定
            }
            df = pd.concat([df, pd.DataFrame([new_row])], ignore_index=True)
        
        # CSVファイルを更新
        df.to_csv(csv_path, index=False)
        
        return "DOC_LIST updated successfully"
        
    except Exception as e:
        return f"Error updating DOC_LIST: {str(e)}"