1
1
# S3 Image Manager
2
2
3
- This simple S3 image manager allows you to:
3
+ S3 Image Manager allows you to:
4
4
- Optimize images with Sharp
5
5
- Change quality
6
6
- Change format
7
7
- Resize
8
8
- Clone (to create multiple versions of the same image)
9
9
- Download processed images
10
+ - View images stored in S3
10
11
- Upload images to S3
11
12
- Search images in S3
12
13
- Delete images in S3
@@ -16,15 +17,34 @@ Run it on localhost to optimize and upload images to S3. Retrieved links of uplo
16
17
## Preview
17
18
18
19
### Modification
20
+ - Change quality
21
+ - Change format
22
+ - Resize
23
+ - Clone (to create multiple versions of the same image)
24
+
19
25
![ Modify] ( assets/modify.png )
20
26
21
27
### Upload/Download
28
+ - Download processed images
29
+ - Set S3 namespace for the image
30
+ - Upload images to S3
31
+
22
32
![ Upload/Download] ( assets/upload-download.png )
23
33
24
34
### S3 for serving images
35
+ - View images stored in S3
36
+ - Upload images to S3
37
+ - Search images in S3
38
+ - Delete images in S3
39
+
25
40
![ S3 Server] ( assets/s3-server.png )
26
41
27
42
## S3 for storing images
43
+ - View images stored in S3
44
+ - Upload images to S3
45
+ - Search images in S3
46
+ - Delete images in S3
47
+
28
48
![ S3 Storage] ( assets/s3-storage.png )
29
49
30
50
## Pre-requisites
@@ -66,14 +86,14 @@ Run it on localhost to optimize and upload images to S3. Retrieved links of uplo
66
86
5 ) Open your browser and go to ` http://localhost:3010 `
67
87
68
88
## How to use
69
- 1 ) ** Run it on localhost** < small >(npm run dev)</ small >
70
- - <small ># 1 Optimization Form </small >
71
- 2 ) ** Select image from filesystem **
72
- 3 ) ** Fill in quality and size ** < small >(at least height or width has to be filled in, Sharp will calculate the other parameter automatically)</ small >
73
- 4 ) ** Click optimize ** < small >-> optimized image will be previewed in the Upload Form</ small >
74
- - < small > # 2 Upload Form</ small >
75
- 5 ) ** Fill in the new image name ** (technically S3 namespace) < small >-> it will be automatically prefixed with assets/</ small >
76
- 6 ) ** Click upload ** < small >-> image will be uploaded to S3 bucket and Cloudfront link will be returned</ small >
89
+ 1 ) ** Run it on localhost:3010 **
90
+ 2 ) ** Modify images ** <small >(change quality, format, resize, clone) </small >
91
+ 3 ) ** Upload images to S3 ** < small >(set S3 namespace for the image)</ small >
92
+ 4 ) ** Download processed images **
93
+ 5 ) ** Manage images in S3 **
94
+ - View images stored in S3
95
+ - Search images in S3
96
+ - Delete images in S3
77
97
78
98
## Notes
79
99
1 ) Animations / GIFs are not supported
0 commit comments