react-gallery-s3

React gallery components and s3 storage.

Reference

- ts-s3

Usage

$3

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 ;
};

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 (
<>
OPEN
open={open}
images={images}
onSelect={handleSelect}
onDelete={handleDelete}
onClose={handleClose}
/>

);
};

export default Default;
`

$3

`
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
``

$3

!mv1

$3

!mv2