react-gallery-s3
v0.4.0
Published
React image gallery and aws s3 storage.
Downloads
3
Readme
react-gallery-s3
React gallery components and s3 storage.
Reference
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