release: 0.20.1

* New translations en-us.ts (French)

* New translations en-us.ts (Spanish)

* New translations en-us.ts (Danish)

* New translations en-us.ts (German)

* New translations en-us.ts (Finnish)

* New translations en-us.ts (Japanese)

* New translations en-us.ts (Polish)

* New translations en-us.ts (Russian)

* New translations en-us.ts (Serbian (Cyrillic))

* New translations en-us.ts (Portuguese, Brazilian)

* New translations en-us.ts (Thai)

* New translations en-us.ts (Dutch, Belgium)

* New translations en-us.ts (Polish)

* New translations en-us.ts (Portuguese, Brazilian)

* New translations en-us.ts (German)

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [0.20.1](https://github.com/stonith404/pingvin-share/compare/v0.20.0...v0.20.1) (2023-11-05)
+
+
+### Bug Fixes
+
+* share information text color in light mode ([1138cd0](https://github.com/stonith404/pingvin-share/commit/1138cd02b0b6ac1d71c4dbc2808110c672237190))
+
+## [0.20.0](https://github.com/stonith404/pingvin-share/compare/v0.19.2...v0.20.0) (2023-11-04)
+
+
+### Features
+
+* ability to add and delete files of existing share ([#306](https://github.com/stonith404/pingvin-share/issues/306)) ([98380e2](https://github.com/stonith404/pingvin-share/commit/98380e2d48cc8ffa831d9b69cf5c0e8a40e28862))
+
 ## [0.19.2](https://github.com/stonith404/pingvin-share/compare/v0.19.1...v0.19.2) (2023-11-03)
 
 

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pingvin-share-backend",
-  "version": "0.19.2",
+  "version": "0.20.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pingvin-share-backend",
-      "version": "0.19.2",
+      "version": "0.20.1",
       "dependencies": {
         "@nestjs/cache-manager": "^2.1.0",
         "@nestjs/common": "^10.1.2",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingvin-share-backend",
-  "version": "0.19.2",
+  "version": "0.20.1",
   "scripts": {
     "build": "nest build",
     "dev": "cross-env NODE_ENV=development nest start --watch",

backend/src/file/file.controller.ts

@@ -1,6 +1,7 @@
 import {
   Body,
   Controller,
+  Delete,
   Get,
   Param,
   Post,
@@ -81,4 +82,14 @@ export class FileController {
 
     return new StreamableFile(file.file);
   }
+
+  @Delete(":fileId")
+  @SkipThrottle()
+  @UseGuards(ShareOwnerGuard)
+  async remove(
+    @Param("fileId") fileId: string,
+    @Param("shareId") shareId: string,
+  ) {
+    await this.fileService.remove(shareId, fileId);
+  }
 }

backend/src/file/file.service.ts

@@ -124,6 +124,18 @@ export class FileService {
     };
   }
 
+  async remove(shareId: string, fileId: string) {
+    const fileMetaData = await this.prisma.file.findUnique({
+      where: { id: fileId },
+    });
+
+    if (!fileMetaData) throw new NotFoundException("File not found");
+
+    fs.unlinkSync(`${SHARE_DIRECTORY}/${shareId}/${fileId}`);
+
+    await this.prisma.file.delete({ where: { id: fileId } });
+  }
+
   async deleteAllFiles(shareId: string) {
     await fs.promises.rm(`${SHARE_DIRECTORY}/${shareId}`, {
       recursive: true,

backend/src/share/guard/shareOwner.guard.ts

@@ -1,5 +1,4 @@
 import {
-  CanActivate,
   ExecutionContext,
   Injectable,
   NotFoundException,
@@ -7,12 +6,21 @@ import {
 import { User } from "@prisma/client";
 import { Request } from "express";
 import { PrismaService } from "src/prisma/prisma.service";
+import { JwtGuard } from "../../auth/guard/jwt.guard";
+import { ConfigService } from "src/config/config.service";
 
 @Injectable()
-export class ShareOwnerGuard implements CanActivate {
+export class ShareOwnerGuard extends JwtGuard {
-  constructor(private prisma: PrismaService) {}
+  constructor(
+    configService: ConfigService,
+    private prisma: PrismaService,
+  ) {
+    super(configService);
+  }
 
   async canActivate(context: ExecutionContext) {
+    if (!(await super.canActivate(context))) return false;
+
     const request: Request = context.switchToHttp().getRequest();
     const shareId = Object.prototype.hasOwnProperty.call(
       request.params,

backend/src/share/share.controller.ts

@@ -43,6 +43,12 @@ export class ShareController {
     return new ShareDTO().from(await this.shareService.get(id));
   }
 
+  @Get(":id/from-owner")
+  @UseGuards(ShareOwnerGuard)
+  async getFromOwner(@Param("id") id: string) {
+    return new ShareDTO().from(await this.shareService.get(id));
+  }
+
   @Get(":id/metaData")
   @UseGuards(ShareSecurityGuard)
   async getMetaData(@Param("id") id: string) {
@@ -62,12 +68,6 @@ export class ShareController {
     );
   }
 
-  @Delete(":id")
-  @UseGuards(JwtGuard, ShareOwnerGuard)
-  async remove(@Param("id") id: string) {
-    await this.shareService.remove(id);
-  }
-
   @Post(":id/complete")
   @HttpCode(202)
   @UseGuards(CreateShareGuard, ShareOwnerGuard)
@@ -78,6 +78,18 @@ export class ShareController {
     );
   }
 
+  @Delete(":id/complete")
+  @UseGuards(ShareOwnerGuard)
+  async revertComplete(@Param("id") id: string) {
+    return new ShareDTO().from(await this.shareService.revertComplete(id));
+  }
+
+  @Delete(":id")
+  @UseGuards(ShareOwnerGuard)
+  async remove(@Param("id") id: string) {
+    await this.shareService.remove(id);
+  }
+
   @Throttle(10, 60)
   @Get("isShareIdAvailable/:id")
   async isShareIdAvailable(@Param("id") id: string) {

backend/src/share/share.service.ts

@@ -182,6 +182,13 @@ export class ShareService {
     });
   }
 
+  async revertComplete(id: string) {
+    return this.prisma.share.update({
+      where: { id },
+      data: { uploadLocked: false, isZipReady: false },
+    });
+  }
+
   async getSharesByUser(userId: string) {
     const shares = await this.prisma.share.findMany({
       where: {

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pingvin-share-frontend",
-  "version": "0.19.2",
+  "version": "0.20.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "pingvin-share-frontend",
-      "version": "0.19.2",
+      "version": "0.20.1",
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/server": "^11.11.0",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingvin-share-frontend",
-  "version": "0.19.2",
+  "version": "0.20.1",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

frontend/src/components/account/showShareInformationsModal.tsx

@@ -12,7 +12,7 @@ const showShareInformationsModal = (
   modals: ModalsContextProps,
   share: MyShare,
   appUrl: string,
-  maxShareSize: number,
+  maxShareSize: number
 ) => {
   const t = translateOutsideContext();
   const link = `${appUrl}/s/${share.id}`;
@@ -36,28 +36,28 @@ const showShareInformationsModal = (
 
     children: (
       <Stack align="stretch" spacing="md">
-        <Text size="sm" color="lightgray">
+        <Text size="sm">
           <b>
             <FormattedMessage id="account.shares.table.id" />:{" "}
           </b>
           {share.id}
         </Text>
 
-        <Text size="sm" color="lightgray">
+        <Text size="sm">
           <b>
             <FormattedMessage id="account.shares.table.description" />:{" "}
           </b>
           {share.description || "No description"}
         </Text>
 
-        <Text size="sm" color="lightgray">
+        <Text size="sm">
           <b>
             <FormattedMessage id="account.shares.table.createdAt" />:{" "}
           </b>
           {formattedCreatedAt}
         </Text>
 
-        <Text size="sm" color="lightgray">
+        <Text size="sm">
           <b>
             <FormattedMessage id="account.shares.table.expiresAt" />:{" "}
           </b>
@@ -66,7 +66,7 @@ const showShareInformationsModal = (
         <Divider />
         <CopyTextField link={link} />
         <Divider />
-        <Text size="sm" color="lightgray">
+        <Text size="sm">
           <b>
             <FormattedMessage id="account.shares.table.size" />:{" "}
           </b>
@@ -76,7 +76,7 @@ const showShareInformationsModal = (
 
         <Flex align="center" justify="center">
           {shareSize / maxShareSize < 0.1 && (
-            <Text size="xs" color="lightgray" style={{ marginRight: "4px" }}>
+            <Text size="xs" style={{ marginRight: "4px" }}>
               {formattedShareSize}
             </Text>
           )}
@@ -87,7 +87,7 @@ const showShareInformationsModal = (
             size="xl"
             radius="xl"
           />
-          <Text size="xs" color="lightgray" style={{ marginLeft: "4px" }}>
+          <Text size="xs" style={{ marginLeft: "4px" }}>
             {formattedMaxShareSize}
           </Text>
         </Flex>

frontend/src/components/upload/Dropzone.tsx

@@ -33,10 +33,12 @@ const useStyles = createStyles((theme) => ({
 }));
 
 const Dropzone = ({
+  title,
   isUploading,
   maxShareSize,
   showCreateUploadModalCallback,
 }: {
+  title?: string;
   isUploading: boolean;
   maxShareSize: number;
   showCreateUploadModalCallback: (files: FileUpload[]) => void;
@@ -78,7 +80,7 @@ const Dropzone = ({
             <TbCloudUpload size={50} />
           </Group>
           <Text align="center" weight={700} size="lg" mt="xl">
-            <FormattedMessage id="upload.dropzone.title" />
+            {title || <FormattedMessage id="upload.dropzone.title" />}
           </Text>
           <Text align="center" size="sm" mt="xs" color="dimmed">
             <FormattedMessage

frontend/src/components/upload/EditableUpload.tsx

@@ -0,0 +1,238 @@
+import { Button, Group } from "@mantine/core";
+import { useModals } from "@mantine/modals";
+import { cleanNotifications } from "@mantine/notifications";
+import { AxiosError } from "axios";
+import pLimit from "p-limit";
+import { useEffect, useMemo, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import Dropzone from "../../components/upload/Dropzone";
+import FileList from "../../components/upload/FileList";
+import showCompletedUploadModal from "../../components/upload/modals/showCompletedUploadModal";
+import useConfig from "../../hooks/config.hook";
+import useTranslate from "../../hooks/useTranslate.hook";
+import shareService from "../../services/share.service";
+import { FileListItem, FileMetaData, FileUpload } from "../../types/File.type";
+import toast from "../../utils/toast.util";
+import { useRouter } from "next/router";
+
+const promiseLimit = pLimit(3);
+const chunkSize = 10 * 1024 * 1024; // 10MB
+let errorToastShown = false;
+
+const EditableUpload = ({
+  maxShareSize,
+  shareId,
+  files: savedFiles = [],
+}: {
+  maxShareSize?: number;
+  isReverseShare?: boolean;
+  shareId: string;
+  files?: FileMetaData[];
+}) => {
+  const t = useTranslate();
+  const router = useRouter();
+  const config = useConfig();
+
+  const [existingFiles, setExistingFiles] =
+    useState<Array<FileMetaData & { deleted?: boolean }>>(savedFiles);
+  const [uploadingFiles, setUploadingFiles] = useState<FileUpload[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const existingAndUploadedFiles: FileListItem[] = useMemo(
+    () => [...uploadingFiles, ...existingFiles],
+    [existingFiles, uploadingFiles],
+  );
+  const dirty = useMemo(() => {
+    return (
+      existingFiles.some((file) => !!file.deleted) || !!uploadingFiles.length
+    );
+  }, [existingFiles, uploadingFiles]);
+
+  const setFiles = (files: FileListItem[]) => {
+    const _uploadFiles = files.filter(
+      (file) => "uploadingProgress" in file,
+    ) as FileUpload[];
+    const _existingFiles = files.filter(
+      (file) => !("uploadingProgress" in file),
+    ) as FileMetaData[];
+
+    setUploadingFiles(_uploadFiles);
+    setExistingFiles(_existingFiles);
+  };
+
+  maxShareSize ??= parseInt(config.get("share.maxSize"));
+
+  const uploadFiles = async (files: FileUpload[]) => {
+    const fileUploadPromises = files.map(async (file, fileIndex) =>
+      // Limit the number of concurrent uploads to 3
+      promiseLimit(async () => {
+        let fileId: string;
+
+        const setFileProgress = (progress: number) => {
+          setUploadingFiles((files) =>
+            files.map((file, callbackIndex) => {
+              if (fileIndex == callbackIndex) {
+                file.uploadingProgress = progress;
+              }
+              return file;
+            }),
+          );
+        };
+
+        setFileProgress(1);
+
+        let chunks = Math.ceil(file.size / chunkSize);
+
+        // If the file is 0 bytes, we still need to upload 1 chunk
+        if (chunks == 0) chunks++;
+
+        for (let chunkIndex = 0; chunkIndex < chunks; chunkIndex++) {
+          const from = chunkIndex * chunkSize;
+          const to = from + chunkSize;
+          const blob = file.slice(from, to);
+          try {
+            await new Promise((resolve, reject) => {
+              const reader = new FileReader();
+              reader.onload = async (event) =>
+                await shareService
+                  .uploadFile(
+                    shareId,
+                    event,
+                    {
+                      id: fileId,
+                      name: file.name,
+                    },
+                    chunkIndex,
+                    chunks,
+                  )
+                  .then((response) => {
+                    fileId = response.id;
+                    resolve(response);
+                  })
+                  .catch(reject);
+
+              reader.readAsDataURL(blob);
+            });
+
+            setFileProgress(((chunkIndex + 1) / chunks) * 100);
+          } catch (e) {
+            if (
+              e instanceof AxiosError &&
+              e.response?.data.error == "unexpected_chunk_index"
+            ) {
+              // Retry with the expected chunk index
+              chunkIndex = e.response!.data!.expectedChunkIndex - 1;
+              continue;
+            } else {
+              setFileProgress(-1);
+              // Retry after 5 seconds
+              await new Promise((resolve) => setTimeout(resolve, 5000));
+              chunkIndex = -1;
+
+              continue;
+            }
+          }
+        }
+      }),
+    );
+
+    await Promise.all(fileUploadPromises);
+  };
+
+  const removeFiles = async () => {
+    const removedFiles = existingFiles.filter((file) => !!file.deleted);
+
+    if (removedFiles.length > 0) {
+      await Promise.all(
+        removedFiles.map(async (file) => {
+          await shareService.removeFile(shareId, file.id);
+        }),
+      );
+
+      setExistingFiles(existingFiles.filter((file) => !file.deleted));
+    }
+  };
+
+  const revertComplete = async () => {
+    await shareService.revertComplete(shareId).then();
+  };
+
+  const completeShare = async () => {
+    return await shareService.completeShare(shareId);
+  };
+
+  const save = async () => {
+    setIsUploading(true);
+
+    try {
+      await revertComplete();
+      await uploadFiles(uploadingFiles);
+
+      const hasFailed = uploadingFiles.some(
+        (file) => file.uploadingProgress == -1,
+      );
+
+      if (!hasFailed) {
+        await removeFiles();
+      }
+
+      await completeShare();
+
+      if (!hasFailed) {
+        toast.success(t("share.edit.notify.save-success"));
+        router.back();
+      }
+    } catch {
+      toast.error(t("share.edit.notify.generic-error"));
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const appendFiles = (appendingFiles: FileUpload[]) => {
+    setUploadingFiles([...appendingFiles, ...uploadingFiles]);
+  };
+
+  useEffect(() => {
+    // Check if there are any files that failed to upload
+    const fileErrorCount = uploadingFiles.filter(
+      (file) => file.uploadingProgress == -1,
+    ).length;
+
+    if (fileErrorCount > 0) {
+      if (!errorToastShown) {
+        toast.error(
+          t("upload.notify.count-failed", { count: fileErrorCount }),
+          {
+            withCloseButton: false,
+            autoClose: false,
+          },
+        );
+      }
+      errorToastShown = true;
+    } else {
+      cleanNotifications();
+      errorToastShown = false;
+    }
+  }, [uploadingFiles]);
+
+  return (
+    <>
+      <Group position="right" mb={20}>
+        <Button loading={isUploading} disabled={!dirty} onClick={() => save()}>
+          <FormattedMessage id="common.button.save" />
+        </Button>
+      </Group>
+      <Dropzone
+        title={t("share.edit.append-upload")}
+        maxShareSize={maxShareSize}
+        showCreateUploadModalCallback={appendFiles}
+        isUploading={isUploading}
+      />
+      {existingAndUploadedFiles.length > 0 && (
+        <FileList files={existingAndUploadedFiles} setFiles={setFiles} />
+      )}
+    </>
+  );
+};
+export default EditableUpload;

frontend/src/components/upload/FileList.tsx

@@ -1,41 +1,106 @@
 import { ActionIcon, Table } from "@mantine/core";
-import { Dispatch, SetStateAction } from "react";
 import { TbTrash } from "react-icons/tb";
-import { FileUpload } from "../../types/File.type";
+import { GrUndo } from "react-icons/gr";
+import { FileListItem } from "../../types/File.type";
 import { byteToHumanSizeString } from "../../utils/fileSize.util";
 import UploadProgressIndicator from "./UploadProgressIndicator";
 import { FormattedMessage } from "react-intl";
 
-const FileList = ({
+const FileListRow = ({
-  files,
+  file,
-  setFiles,
+  onRemove,
+  onRestore,
 }: {
-  files: FileUpload[];
+  file: FileListItem;
-  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
+  onRemove?: () => void;
+  onRestore?: () => void;
 }) => {
-  const remove = (index: number) => {
+  {
-    files.splice(index, 1);
+    const uploadable = "uploadingProgress" in file;
-    setFiles([...files]);
+    const uploading = uploadable && file.uploadingProgress !== 0;
-  };
+    const removable = uploadable
-  const rows = files.map((file, i) => (
+      ? file.uploadingProgress === 0
-    <tr key={i}>
+      : onRemove && !file.deleted;
+    const restorable = onRestore && !uploadable && !!file.deleted; // maybe undefined, force boolean
+    const deleted = !uploadable && !!file.deleted;
+
+    return (
+      <tr
+        style={{
+          color: deleted ? "rgba(120, 120, 120, 0.5)" : "inherit",
+          textDecoration: deleted ? "line-through" : "none",
+        }}
+      >
         <td>{file.name}</td>
-      <td>{byteToHumanSizeString(file.size)}</td>
+        <td>{byteToHumanSizeString(+file.size)}</td>
         <td>
-        {file.uploadingProgress == 0 ? (
+          {removable && (
             <ActionIcon
               color="red"
               variant="light"
               size={25}
-            onClick={() => remove(i)}
+              onClick={onRemove}
             >
               <TbTrash />
             </ActionIcon>
-        ) : (
+          )}
+          {uploading && (
             <UploadProgressIndicator progress={file.uploadingProgress} />
           )}
+          {restorable && (
+            <ActionIcon
+              color="primary"
+              variant="light"
+              size={25}
+              onClick={onRestore}
+            >
+              <GrUndo />
+            </ActionIcon>
+          )}
         </td>
       </tr>
+    );
+  }
+};
+
+const FileList = <T extends FileListItem = FileListItem>({
+  files,
+  setFiles,
+}: {
+  files: T[];
+  setFiles: (files: T[]) => void;
+}) => {
+  const remove = (index: number) => {
+    const file = files[index];
+
+    if ("uploadingProgress" in file) {
+      files.splice(index, 1);
+    } else {
+      files[index] = { ...file, deleted: true };
+    }
+
+    setFiles([...files]);
+  };
+
+  const restore = (index: number) => {
+    const file = files[index];
+
+    if ("uploadingProgress" in file) {
+      return;
+    } else {
+      files[index] = { ...file, deleted: false };
+    }
+
+    setFiles([...files]);
+  };
+
+  const rows = files.map((file, i) => (
+    <FileListRow
+      key={i}
+      file={file}
+      onRemove={() => remove(i)}
+      onRestore={() => restore(i)}
+    />
   ));
 
   return (

frontend/src/i18n/translations/da-DK.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Forhåndsvisning ikke understøttet",
   "share.modal.file-preview.error.not-supported.description": "En forhåndsvisning for thise filtype er ikke understøttet. Download venligst filen for at se den.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Konfiguration",
   "admin.config.category.general": "Generelt",

frontend/src/i18n/translations/de-DE.ts

@@ -115,7 +115,7 @@ export default {
   "account.shares.title.empty": "Es ist so leer hier 👀",
   "account.shares.description.empty": "Du hast keine Freigaben erstellt.",
   "account.shares.button.create": "Erstelle eine",
-  "account.shares.info.title": "Teile deine Information",
+  "account.shares.info.title": "Freigabe Informationen",
   "account.shares.table.id": "ID",
   "account.shares.table.name": "Name",
   "account.shares.table.description": "Beschreibung",
@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Vorschau wird nicht unterstützt",
   "share.modal.file-preview.error.not-supported.description": "Eine Vorschau für diesen Dateityp wird nicht unterstützt. Bitte lade die Datei herunter, um sie anzuzeigen.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Einstellungen",
   "admin.config.category.general": "Allgemein",

frontend/src/i18n/translations/en-US.ts

@@ -358,6 +358,13 @@ export default {
 
   // END /share/[id]
 
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
+
   // /admin/config
   "admin.config.title": "Configuration",
   "admin.config.category.general": "General",

frontend/src/i18n/translations/es-ES.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Vista previa no disponible",
   "share.modal.file-preview.error.not-supported.description": "La vista previa para este tipo de archivo no está disponible. Por favor descargue el archivo para verlo.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Configuración",
   "admin.config.category.general": "General",

frontend/src/i18n/translations/fi-FI.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Esikatselua ei tuettu",
   "share.modal.file-preview.error.not-supported.description": "Esikatselua thise tiedostotyypille ei tueta. Ole hyvä ja lataa tiedosto nähdäksesi sen.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Asetukset",
   "admin.config.category.general": "Yleiset",

frontend/src/i18n/translations/fr-FR.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Aperçu non supporté",
   "share.modal.file-preview.error.not-supported.description": "Un aperçu pour ce type de fichier n'est pas pris en charge. Veuillez télécharger le fichier pour le voir.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Paramètres",
   "admin.config.category.general": "Général",

frontend/src/i18n/translations/ja-JP.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "プレビューに対応していません",
   "share.modal.file-preview.error.not-supported.description": "これらのファイルのプレビューには対応していません。ファイルをダウンロードして、直接確認してください。",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "設定",
   "admin.config.category.general": "一般",

frontend/src/i18n/translations/nl-BE.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Voorbeeld niet ondersteund",
   "share.modal.file-preview.error.not-supported.description": "Een voorbeeld voor dit bestandstype wordt niet ondersteund. Download het bestand om het te bekijken.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Configuratie",
   "admin.config.category.general": "Algemeen",

frontend/src/i18n/translations/pl-PL.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Podgląd nie jest obsługiwany",
   "share.modal.file-preview.error.not-supported.description": "Podgląd dla tego typu pliku nie jest obsługiwany. Pobierz plik, aby go zobaczyć.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edytuj {shareId}",
+  "share.edit.append-upload": "Dołącz plik",
+  "share.edit.notify.generic-error": "W trakcie zakańczania tworzenia udziału wystąpił błąd.",
+  "share.edit.notify.save-success": "Udział zaktualizowany pomyślnie",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Konfiguracja",
   "admin.config.category.general": "Ogólne",

frontend/src/i18n/translations/pt-BR.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Visualização não suportada",
   "share.modal.file-preview.error.not-supported.description": "Uma visualização para este tipo de arquivo não é suportada. Faça o download do arquivo para visualizá-lo.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Editar {shareId}",
+  "share.edit.append-upload": "Anexar arquivo",
+  "share.edit.notify.generic-error": "Ocorreu um erro ao terminar seu compartilhamento.",
+  "share.edit.notify.save-success": "Compartilhamento atualizado com sucesso",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Configuração",
   "admin.config.category.general": "Geral",

frontend/src/i18n/translations/ru-RU.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Предпросмотр не поддерживается",
   "share.modal.file-preview.error.not-supported.description": "Предварительный просмотр этого типа файла не поддерживается. Пожалуйста, скачайте файл для его просмотра.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Конфигурация",
   "admin.config.category.general": "Общее",

frontend/src/i18n/translations/sr-SP.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "Преглед није подржан",
   "share.modal.file-preview.error.not-supported.description": "Преглед за овај тип датотеке није подржан. Преузмите датотеку да бисте је видели.",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "Конфигурација",
   "admin.config.category.general": "Опште",

frontend/src/i18n/translations/th-TH.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "ไม่รองรับการแสดงตัวอย่าง",
   "share.modal.file-preview.error.not-supported.description": "ไม่รองรับการแสดงตัวอย่างสำหรับไฟล์ประเภทนี้ โปรดดาวน์โหลดไฟล์เพื่อดู",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "Edit {shareId}",
+  "share.edit.append-upload": "Append file",
+  "share.edit.notify.generic-error": "An error occurred while finishing your share.",
+  "share.edit.notify.save-success": "Share updated successfully",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "การตั้งค่า",
   "admin.config.category.general": "ทั่วไป",

frontend/src/i18n/translations/zh-CN.ts

@@ -264,6 +264,12 @@ export default {
   "share.modal.file-preview.error.not-supported.title": "该文件类型不支持预览",
   "share.modal.file-preview.error.not-supported.description": "该文件类型不支持预览，请下载后打开查看",
   // END /share/[id]
+  // /share/[id]/edit
+  "share.edit.title": "编辑 {shareId}",
+  "share.edit.append-upload": "追加文件",
+  "share.edit.notify.generic-error": "保存共享的过程中发生了错误",
+  "share.edit.notify.save-success": "共享已更新成功",
+  // END /share/[id]/edit
   // /admin/config
   "admin.config.title": "配置管理",
   "admin.config.category.general": "通用",

frontend/src/pages/account/shares.tsx

@@ -16,7 +16,7 @@ import { useModals } from "@mantine/modals";
 import moment from "moment";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { TbInfoCircle, TbLink, TbTrash } from "react-icons/tb";
+import { TbEdit, TbInfoCircle, TbLink, TbTrash } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 import Meta from "../../components/Meta";
 import showShareInformationsModal from "../../components/account/showShareInformationsModal";
@@ -110,6 +110,11 @@ const MyShares = () => {
                   </td>
                   <td>
                     <Group position="right">
+                      <Link href={`/share/${share.id}/edit`}>
+                        <ActionIcon color="orange" variant="light" size={25}>
+                          <TbEdit />
+                        </ActionIcon>
+                      </Link>
                       <ActionIcon
                         color="blue"
                         variant="light"

frontend/src/pages/share/[shareId]/edit.tsx

@@ -0,0 +1,65 @@
+import { LoadingOverlay } from "@mantine/core";
+import { useModals } from "@mantine/modals";
+import { GetServerSidePropsContext } from "next";
+import { useEffect, useState } from "react";
+import showErrorModal from "../../../components/share/showErrorModal";
+import shareService from "../../../services/share.service";
+import { Share as ShareType } from "../../../types/share.type";
+import useTranslate from "../../../hooks/useTranslate.hook";
+import EditableUpload from "../../../components/upload/EditableUpload";
+import Meta from "../../../components/Meta";
+
+export function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: { shareId: context.params!.shareId },
+  };
+}
+
+const Share = ({ shareId }: { shareId: string }) => {
+  const t = useTranslate();
+  const modals = useModals();
+  const [isLoading, setIsLoading] = useState(true);
+  const [share, setShare] = useState<ShareType>();
+
+  useEffect(() => {
+    shareService
+      .getFromOwner(shareId)
+      .then((share) => {
+        setShare(share);
+      })
+      .catch((e) => {
+        const { error } = e.response.data;
+        if (e.response.status == 404) {
+          if (error == "share_removed") {
+            showErrorModal(
+              modals,
+              t("share.error.removed.title"),
+              e.response.data.message,
+            );
+          } else {
+            showErrorModal(
+              modals,
+              t("share.error.not-found.title"),
+              t("share.error.not-found.description"),
+            );
+          }
+        } else {
+          showErrorModal(modals, t("common.error"), t("common.error.unknown"));
+        }
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  if (isLoading) return <LoadingOverlay visible />;
+
+  return (
+    <>
+      <Meta title={t("share.edit.title", { shareId })} />
+      <EditableUpload shareId={shareId} files={share?.files || []} />
+    </>
+  );
+};
+
+export default Share;

frontend/src/pages/upload/index.tsx

@@ -202,7 +202,9 @@ const Upload = ({
         showCreateUploadModalCallback={showCreateUploadModalCallback}
         isUploading={isUploading}
       />
-      {files.length > 0 && <FileList files={files} setFiles={setFiles} />}
+      {files.length > 0 && (
+        <FileList<FileUpload> files={files} setFiles={setFiles} />
+      )}
     </>
   );
 };

frontend/src/services/share.service.ts

@@ -19,10 +19,18 @@ const completeShare = async (id: string) => {
   return (await api.post(`shares/${id}/complete`)).data;
 };
 
+const revertComplete = async (id: string) => {
+  return (await api.delete(`shares/${id}/complete`)).data;
+};
+
 const get = async (id: string): Promise<Share> => {
   return (await api.get(`shares/${id}`)).data;
 };
 
+const getFromOwner = async (id: string): Promise<Share> => {
+  return (await api.get(`shares/${id}/from-owner`)).data;
+};
+
 const getMetaData = async (id: string): Promise<ShareMetaData> => {
   return (await api.get(`shares/${id}/metaData`)).data;
 };
@@ -63,6 +71,10 @@ const downloadFile = async (shareId: string, fileId: string) => {
   window.location.href = `${window.location.origin}/api/shares/${shareId}/files/${fileId}`;
 };
 
+const removeFile = async (shareId: string, fileId: string) => {
+  await api.delete(`shares/${shareId}/files/${fileId}`);
+};
+
 const uploadFile = async (
   shareId: string,
   readerEvent: ProgressEvent<FileReader>,
@@ -121,14 +133,17 @@ const removeReverseShare = async (id: string) => {
 export default {
   create,
   completeShare,
+  revertComplete,
   getShareToken,
   get,
+  getFromOwner,
   remove,
   getMetaData,
   doesFileSupportPreview,
   getMyShares,
   isShareIdAvailable,
   downloadFile,
+  removeFile,
   uploadFile,
   setReverseShare,
   createReverseShare,

frontend/src/types/File.type.ts

@@ -7,3 +7,5 @@ export type FileMetaData = {
   name: string;
   size: string;
 };
+
+export type FileListItem = FileUpload | (FileMetaData & { deleted?: boolean });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pingvin-share",
-  "version": "0.19.2",
+  "version": "0.20.1",
   "scripts": {
     "format": "cd frontend && npm run format && cd ../backend && npm run format",
     "lint": "cd frontend && npm run lint && cd ../backend && npm run lint",