S3とフロントエンド（React＋TypeScript）だけでアップローダーを作る

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './image';

import reportWebVitals from './reportWebVitals';
import UFileUpload from './test';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <UFileUpload />
    <App />
  </React.StrictMode>
);

reportWebVitals();

import { useState, useEffect } from 'react';
import { S3 } from 'aws-sdk';

const BUCKET_NAME = 'mshiihara-test';
const REGION = 'ap-northeast-1';

const s3 = new S3({
  region: REGION,
  accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY || '',
  secretAccessKey: process.env.REACT_APP_AWS_SECRET_KEY || '',
});
function App() {
  const [files, setFiles] = useState<S3.ObjectList>([]);

  useEffect(() => {
    s3.listObjectsV2({ Bucket: BUCKET_NAME }, (err, data) => {
      if (err) {
        console.error(err);
      } else {
        if (data.Contents) {
          // Sort files by last modified date in descending order
          const sortedFiles = data.Contents.sort((a, b) => (b.LastModified?.getTime() || 0) - (a.LastModified?.getTime() || 0));
          setFiles(sortedFiles);
        }
      }
    });
  }, [files]);

  let imgs;
  if (files && files.length > 0) {
    imgs = files.map((file, i) => (
      <img
        src={`https://${BUCKET_NAME}.s3-${REGION}.amazonaws.com/${file.Key}`}
        alt={file.Key}
        key={i}
        width="150"
      />
    ));
  }

  return (
    <div>
      {files && files.length > 0 ? (
        <div>
          <ul>{imgs}</ul>
        </div>
      ) : null}
    </div>
  );
}

export default App;

import * as React from "react";
import Dropzone from 'react-dropzone';
import axios from 'axios';
import CSS from 'csstype';
import AWS from 'aws-sdk'

const AWS_ACCESS_KEY = process.env.REACT_APP_AWS_ACCESS_KEY;
const AWS_SECRET_KEY = process.env.REACT_APP_AWS_SECRET_KEY;

AWS.config.update({
  accessKeyId: AWS_ACCESS_KEY,
  secretAccessKey: AWS_SECRET_KEY,
  region: 'ap-northeast-1'
});

const s3 = new AWS.S3();

interface INbdProps {
}

interface INbdState {
  isUploading: boolean;
  images: any[];
}

// SDKによるアップロード
const upload_image = (file: any, bucket: string) => {

  try {
    const params = {
      Bucket: bucket,
      Key: file.name,
      ContentType: file.type,
      Body: file,
    };
 
    const res = s3.putObject(params).promise();
 
  } catch (error) {

    console.log(error);
    return;
  }
}

const baseStyle: CSS.Properties = {
  flex: 1,
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  padding: "20px",
  // borderWidth: 2,
  // borderRadius: 2,
  borderColor: "#eeeeee",
  borderStyle: "dashed",
  backgroundColor: "#fafafa",
  color: "#bdbdbd",
  outline: "none",
  transition: "border .24s ease-in-out"
};


class UFileUpload extends React.Component<INbdProps, INbdState> {

  constructor(props: INbdProps) {
    super(props);
    this.state = {
      isUploading: false,
      images: []
    };
    this.handleOnDrop = this.handleOnDrop.bind(this);
  }


  handleOnDrop(files: any[]) {

    Promise.all(files.map(file => this.uploadImage(file)))
      .then(images => {
        this.setState({
          isUploading: false,
          images: this.state.images.concat(images)
        });
      }).catch(e => console.log(e));
  }

  uploadImage = (file: any) => {

    // public access s3 へのアップロード
    upload_image(file, 'mshiihara-test')

    const params = {
      file_type: file.type,
      file_name: file.name
    }

    const options = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }

    return axios.post(
      'https://mike2mike.xyz/up/', params, options)
      .then(res => {
        const img_options = {
          headers: {
            'Content-Type': file.type
          }
        };
        return axios.put(res.data.file_upload_url, file, img_options);
      })
  }

  render() {
    
    return (
      <div>
        <h1>ファイルアップローダー</h1>
        このアプリは実験のためであって、実用的なものではありません。なので、削除機能はありません。管理人が随時チェックしてファイル削除するので念のため。ただし、右クリックで保存したり、URLを収得することができます。
        <Dropzone onDrop={this.handleOnDrop} multiple maxSize={8000000} >
          {({ getRootProps, getInputProps }) => (
            <div 
              {...getRootProps({ className: "dropzone" })}
              style={baseStyle}
            >
              <input {...getInputProps()} />

              {this.state.isUploading ?
                <div>ファイルをアップロードしています</div> :
                <div>ファイルをドラックするかクリックしてファイルを選択してください</div>}
        
   
            </div>
             
          )}
        </Dropzone>
        
      </div>
    );
  }
}


export default UFileUpload;