Skip to content

Commit ca20b48

Browse files
gladiusgladius
committed
+ dependency upgrades and demo update
1 parent ddc774b commit ca20b48

31 files changed

+4291
-184
lines changed

‎.gitignore‎

100644100755
File mode changed.

‎LICENSE.md‎

100644100755
File mode changed.

‎README.md‎

100644100755
Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@ This **Spring Boot Starter** is perfect for implementing file/image management f
66

77
Read the full post at
88

9-
[![Open with ThePro](https://thepro.io/button.svg)](https://thepro.io/post/spring-boot-with-aws-s3---digitalocean-spaces-for-file-storage-Xx)
9+
[![Open with ThePro](https://thepro.io/button.svg)](https://thepro.io/post/spring-boot-and-digitalocean-spaces-for-file-storage-Q1)
1010

1111
### Demo UI
1212

13-
![Image of demo UI](https://raw.githubusercontent.com/gladius-thayalarajan/spring-boot-digital-ocean-spaces/master/screenshots/demo.gif)
13+
![Image of demo UI Gif](https://raw.githubusercontent.com/gladius-thayalarajan/spring-boot-digital-ocean-spaces/master/screenshots/demo.gif)
14+
15+
![Image of demo UI Png](https://raw.githubusercontent.com/gladius-thayalarajan/spring-boot-digital-ocean-spaces/master/screenshots/gallery.png)
1416

1517
### Digital Ocean Spaces Dashboard
1618

@@ -20,8 +22,8 @@ Read the full post at
2022

2123
👤 **Gladius Thayalarajan**
2224

23-
- Website: thepro.io/@/gladius
24-
- Github: [@gladius](https://github.com/gladius)
25+
- Website: [thepro.io/@/gladius](thepro.io/@/gladius)
26+
- Github: [github.com/gladius](https://github.com/gladius)
2527

2628
## Show your support
2729

‎demo/.gitignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel

‎demo/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16+
17+
## Learn More
18+
19+
To learn more about Next.js, take a look at the following resources:
20+
21+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
22+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
23+
24+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
25+
26+
## Deploy on Vercel
27+
28+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
29+
30+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎demo/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "spaces-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start"
9+
},
10+
"dependencies": {
11+
"axios": "^0.21.0",
12+
"next": "10.0.3",
13+
"react": "17.0.1",
14+
"react-dom": "17.0.1"
15+
}
16+
}

‎demo/pages/_app.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import "../styles/styles.css";
2+
3+
function MyApp({ Component, pageProps }) {
4+
return <Component {...pageProps} />;
5+
}
6+
7+
export default MyApp;

‎demo/pages/index.js‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import Head from "next/head";
2+
import { useEffect, useState } from "react";
3+
import axios from "axios";
4+
5+
//const CDN_URL = "REPLACE_WITH_YOUR_CDN_URL";
6+
7+
const CDN_URL = "https://zeaque-dev.ams3.digitaloceanspaces.com/files/";
8+
const Gallery = () => {
9+
const [loading, setLoading] = useState(true);
10+
const [images, setImages] = useState([]);
11+
const [progress, setProgress] = useState(0);
12+
13+
useEffect(() => {
14+
loadImages();
15+
}, []);
16+
17+
const loadImages = () => {
18+
setLoading(true);
19+
axios
20+
.get("http://localhost:8080/get/images")
21+
.then((response) => {
22+
setImages(response.data);
23+
setLoading(false);
24+
})
25+
.catch((error) => {
26+
console.log(error);
27+
});
28+
};
29+
30+
const deleteImage = (id) => {
31+
setLoading(true);
32+
axios
33+
.delete("http://localhost:8080/delete/image/" + id)
34+
.then((response) => {
35+
loadImages();
36+
})
37+
.catch((error) => {
38+
console.log(error);
39+
});
40+
};
41+
42+
const uploadFile = (image) => {
43+
var formData = new FormData();
44+
formData.append("image", image);
45+
let config = {
46+
onUploadProgress: (progressEvent) => {
47+
console.log(
48+
"progress event:: ",
49+
Math.round((progressEvent.loaded * 100) / progressEvent.total)
50+
);
51+
setProgress(
52+
Math.round((progressEvent.loaded * 100) / progressEvent.total)
53+
);
54+
},
55+
};
56+
axios
57+
.put("http://localhost:8080/save/image", formData, config)
58+
.then((response) => {
59+
loadImages();
60+
setProgress(0);
61+
})
62+
.catch((error) => {
63+
console.log(error);
64+
});
65+
};
66+
67+
return (
68+
<div>
69+
<Head>
70+
<title>Digital Ocean gallery</title>
71+
<link
72+
rel="stylesheet"
73+
type="text/css"
74+
href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
75+
/>
76+
</Head>
77+
<div className="container">
78+
<div className="my-3"></div>
79+
<div className="row">
80+
<div style={{ margin: "0 auto", width: "500px" }}>
81+
<div className="custom-file mb-3">
82+
<input
83+
type="file"
84+
className="custom-file-input"
85+
onChange={(e) => uploadFile(e.target.files[0])}
86+
id="customFile"
87+
name="filename"
88+
/>
89+
<label className="custom-file-label" htmlFor="customFile">
90+
Choose file
91+
</label>
92+
</div>
93+
</div>
94+
</div>
95+
<div className="row">
96+
{progress != 0 && (
97+
<div style={{ width: "100%" }}>
98+
<div className="progress" style={{ height: "20px" }}>
99+
<div
100+
className="progress-bar bg-success progress-bar-striped progress-bar-animated"
101+
role="progressbar"
102+
aria-valuenow={progress}
103+
aria-valuemin="0"
104+
aria-valuemax="100"
105+
style={{ width: `${progress}%` }}
106+
>
107+
{progress}%
108+
</div>
109+
</div>
110+
</div>
111+
)}
112+
</div>
113+
<div>
114+
{loading ? (
115+
<div className="h-50 d-flex justify-content-center align-items-center">
116+
<div
117+
className="spinner-border text-primary"
118+
style={{ width: "3rem", height: "3rem" }}
119+
role="status"
120+
>
121+
<span className="sr-only">Loading...</span>
122+
</div>
123+
</div>
124+
) : (
125+
<div>
126+
{images.length == 0 ? (
127+
<div className="h-50 d-flex justify-content-center align-items-center">
128+
<h4>Gallery is Empty</h4>
129+
</div>
130+
) : (
131+
<div className="row ">
132+
{images.map((image, key) => (
133+
<div key={key} className="col-md-4 image-container">
134+
<button
135+
className="btn btn-danger btn-sm image-delete"
136+
onClick={() => deleteImage(image.id)}
137+
>
138+
<img
139+
src="delete.png"
140+
style={{ width: "18px", height: "18px" }}
141+
/>
142+
</button>
143+
<img
144+
src={`${CDN_URL}${image.name}.${image.ext}`}
145+
alt={image.name}
146+
className="image"
147+
/>
148+
<div className="image-caption">
149+
<span>{image.name}</span>
150+
</div>
151+
</div>
152+
))}
153+
</div>
154+
)}
155+
</div>
156+
)}
157+
</div>
158+
</div>
159+
</div>
160+
);
161+
};
162+
163+
export default Gallery;

‎ui/delete.png‎ renamed to ‎demo/public/delete.png‎

File renamed without changes.

‎demo/public/favicon.ico‎

14.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)