khairul169/garage-webui
1
0
Fork 0
mirror of https://github.com/khairul169/garage-webui.git synced 2025-04-27 22:39:31 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: show thumbnails in browser listing, fix object actions overflow

Browse Source
This commit is contained in:
Khairul Hidayat 2024-10-14 00:14:34 +00:00
parent 37027396ca
commit 1b1b815443
8 changed files with 87 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
backend/go.mod
View File

@ -8,6 +8,7 @@ require (
github.com/aws/aws-sdk-go-v2/service/s3 v1.59.0
github.com/aws/smithy-go v1.20.4
github.com/joho/godotenv v1.5.1
github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646
github.com/pelletier/go-toml/v2 v2.2.2
)

2
backend/go.sum
View File

@ -27,6 +27,8 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646 h1:zYyBkD/k9seD2A7fsi6Oo2LfFZAehjjQMERAvZLEDnQ=
github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646/go.mod h1:jpp1/29i3P1S/RLdc7JQKbRpFeM1dOBd8T9ki5s+AY8=
github.com/pelletier/go-toml/v2 v2.2.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=

66
backend/router/browse.go
View File

@ -73,8 +73,7 @@ func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
ObjectKey: &key,
LastModified: object.LastModified,
Size: object.Size,
ViewUrl: fmt.Sprintf("/browse/%s/%s?view=1", bucket, *object.Key),
DownloadUrl: fmt.Sprintf("/browse/%s/%s?dl=1", bucket, *object.Key),
Url: fmt.Sprintf("/browse/%s/%s", bucket, *object.Key),
})
}
@ -84,8 +83,10 @@ func (b *Browse) GetObjects(w http.ResponseWriter, r *http.Request) {
func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
bucket := r.PathValue("bucket")
key := r.PathValue("key")
view := r.URL.Query().Get("view") == "1"
download := r.URL.Query().Get("dl") == "1"
queryParams := r.URL.Query()
view := queryParams.Get("view") == "1"
thumbnail := queryParams.Get("thumb") == "1"
download := queryParams.Get("dl") == "1"
client, err := getS3Client(bucket)
if err != nil {
@ -93,6 +94,18 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
return
}
if !view && !download && !thumbnail {
object, err := client.HeadObject(context.Background(), &s3.HeadObjectInput{
Bucket: aws.String(bucket),
Key: aws.String(key),
})
if err != nil {
utils.ResponseError(w, err)
}
utils.ResponseSuccess(w, object)
return
}
object, err := client.GetObject(context.Background(), &s3.GetObjectInput{
Bucket: aws.String(bucket),
Key: aws.String(key),
@ -109,31 +122,42 @@ func (b *Browse) GetOneObject(w http.ResponseWriter, r *http.Request) {
return
}
if view || download {
defer object.Body.Close()
keys := strings.Split(key, "/")
w.Header().Set("Content-Type", *object.ContentType)
w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
w.Header().Set("Cache-Control", "max-age=86400")
w.Header().Set("Last-Modified", object.LastModified.Format(time.RFC1123))
w.Header().Set("Etag", *object.ETag)
if download {
w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", keys[len(keys)-1]))
}
w.WriteHeader(http.StatusOK)
_, err = io.Copy(w, object.Body)
defer object.Body.Close()
keys := strings.Split(key, "/")
if download {
w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%s", keys[len(keys)-1]))
} else if thumbnail {
body, err := io.ReadAll(object.Body)
if err != nil {
utils.ResponseError(w, err)
return
}
thumb, err := utils.CreateThumbnailImage(body, 64, 64)
if err != nil {
utils.ResponseError(w, err)
return
}
w.Header().Set("Content-Type", "image/png")
w.Write(thumb)
return
}
utils.ResponseSuccess(w, object)
w.Header().Set("Content-Type", *object.ContentType)
w.Header().Set("Content-Length", strconv.FormatInt(*object.ContentLength, 10))
w.Header().Set("Cache-Control", "max-age=86400")
w.Header().Set("Last-Modified", object.LastModified.Format(time.RFC1123))
w.Header().Set("Etag", *object.ETag)
_, err = io.Copy(w, object.Body)
if err != nil {
utils.ResponseError(w, err)
return
}
}
func (b *Browse) PutObject(w http.ResponseWriter, r *http.Request) {

3
backend/schema/browse.go
View File

@ -13,6 +13,5 @@ type BrowserObject struct {
ObjectKey *string `json:"objectKey"`
LastModified *time.Time `json:"lastModified"`
Size *int64 `json:"size"`
ViewUrl string `json:"viewUrl"`
DownloadUrl string `json:"downloadUrl"`
Url string `json:"url"`
}

26
backend/utils/image.go Normal file
View File

@ -0,0 +1,26 @@
package utils
import (
"bytes"
"image"
_ "image/gif"
"image/jpeg"
_ "image/png"
"github.com/nfnt/resize"
)
func CreateThumbnailImage(buffer []byte, width uint, height uint) ([]byte, error) {
img, _, err := image.Decode(bytes.NewReader(buffer))
if err != nil {
return nil, err
}
thumb := resize.Thumbnail(width, height, img, resize.NearestNeighbor)
buf := new(bytes.Buffer)
if err := jpeg.Encode(buf, thumb, nil); err != nil {
return nil, err
}
return buf.Bytes(), nil
}

4
src/pages/buckets/manage/browse/object-actions.tsx
View File

@ -12,7 +12,7 @@ import { shareDialog } from "./share-dialog";
type Props = {
prefix?: string;
object: Pick<Object, "objectKey" | "downloadUrl">;
object: Pick<Object, "objectKey" | "url">;
end?: boolean;
};
@ -30,7 +30,7 @@ const ObjectActions = ({ prefix = "", object, end }: Props) => {
});
const onDownload = () => {
window.open(API_URL + object.downloadUrl, "_blank");
window.open(API_URL + object.url + "?dl=1", "_blank");
};
const onDelete = () => {

15
src/pages/buckets/manage/browse/object-list.tsx
View File

@ -28,11 +28,11 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
});
const onObjectClick = (object: Object) => {
window.open(API_URL + object.viewUrl, "_blank");
window.open(API_URL + object.url + "?view=1", "_blank");
};
return (
<div className="overflow-x-auto overflow-y-hidden">
<div className="overflow-x-auto min-h-[400px]">
<Table>
<Table.Head>
<span>Name</span>
@ -44,7 +44,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
{isLoading ? (
<tr>
<td colSpan={3}>
<div className="h-[250px] flex items-center justify-center">
<div className="h-[320px] flex items-center justify-center">
<Loading />
</div>
</td>
@ -84,7 +84,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
</span>
</td>
<td colSpan={2} />
<ObjectActions object={{ objectKey: prefix, downloadUrl: "" }} />
<ObjectActions object={{ objectKey: prefix, url: "" }} />
</tr>
))}
@ -121,7 +121,9 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
<ObjectActions
prefix={data.prefix}
object={object}
end={idx >= data.objects.length - 2}
end={
idx >= data.objects.length - 2 && data.objects.length > 5
}
/>
</tr>
);
@ -150,9 +152,10 @@ const FilePreview = ({ ext, object }: FilePreviewProps) => {
}
if (type === "image") {
const thumbnailSupport = ["jpg", "jpeg", "png", "gif"].includes(ext || "");
return (
<img
src={API_URL + object.viewUrl}
src={API_URL + object.url + (thumbnailSupport ? "?thumb=1" : "?view=1")}
alt={object.objectKey}
className="size-5 object-cover overflow-hidden mr-2"
/>

3
src/pages/buckets/manage/browse/types.ts
View File

@ -15,8 +15,7 @@ export type Object = {
objectKey: string;
lastModified: Date;
size: number;
viewUrl: string;
downloadUrl: string;
url: string;
};
export type PutObjectPayload = {