react-gallery-s3

React gallery components and s3 storage.

Reference

• ts-s3

Usage

Client components

Upload image component

import React from "react";
import UploadImage from "../src/UploadImage";

const Default = () => {
  const selected = (file: File) => {
    console.log(file);
  };

  // limit(optional) is MB
  return <UploadImage limit={10} selected={selected} />;
};

export default Default;

List images component

import React, { useState } from "react";
import ListImages from "../src/ListImages";

const Default = () => {
  const [open, setOpen] = useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleSelect = (image: string) => {
    console.log(image);
  };

  const handleDelete = (image: string) => {
    console.log(image);
  };

  const images = [
    "/dummy.jpg",
    "/dummy.jpg",
    "/dummy.jpg",
    "/dummy.jpg",
    "/dummy.jpg",
    "/dummy.jpg",
    "/dummy.jpg",
    "/dummy.jpg",
  ];

  return (
    <>
      <button onClick={handleOpen}>OPEN</button>
      <ListImages
        open={open}
        images={images}
        onSelect={handleSelect}
        onDelete={handleDelete}
        onClose={handleClose}
      />
    </>
  );
};

export default Default;

Server functions

import { S3ClientConfig } from "ts-s3";
import Connector from "../src/Connector";

const baseUrl = "http://localhost/";
const config: S3ClientConfig = { region: "us-east-1" };
const connector = new Connector(baseUrl, config);

// file upload to s3
const response = await connector.uploadImage(
  "dummy",
  "test/test.jpg",
  file
);

// get list from s3
const images = await connector.listImages("dummy", "test", 8);

// delete image on s3
const response = await connector.deleteImage("dummy", "test/content.json");

Preview

npm run preview

Upload image component

List images component