Add server download task creation and related UI components

frontend/src/i18n.ts

@@ -165,6 +165,8 @@ export const i18nData = {
       "Views Descending": "Views Descending",
       "Downloads Ascending": "Downloads Ascending",
       "Downloads Descending": "Downloads Descending",
+      "File Url": "File Url",
+      "Provide a file url for the server to download, and the file will be moved to the selected storage.": "Provide a file url for the server to download, and the file will be moved to the selected storage.",
     }
   },
   "zh-CN": {
@@ -333,6 +335,8 @@ export const i18nData = {
       "Views Descending": "浏览量降序",
       "Downloads Ascending": "下载量升序",
       "Downloads Descending": "下载量降序",
+      "File Url": "文件链接",
+      "Provide a file url for the server to download, and the file will be moved to the selected storage.": "提供一个文件链接供服务器下载，文件将被移动到选定的存储中。",
     }
   },
   "zh-TW": {
@@ -501,6 +505,8 @@ export const i18nData = {
       "Views Descending": "瀏覽量降序",
       "Downloads Ascending": "下載量升序",
       "Downloads Descending": "下載量降序",
+      "File Url": "檔案連結",
+      "Provide a file url for the server to download, and the file will be moved to the selected storage.": "提供一個檔案連結供伺服器下載，檔案將被移動到選定的儲存中。",
     }
   }
 }

frontend/src/network/network.ts

@@ -666,6 +666,27 @@ class Network {
     }
   }
 
+  async createServerDownloadTask(url: string, filename: string, description: string,
+                                 resourceId: number, storageId: number): Promise<Response<RFile>> {
+    try {
+      const response = await axios.post(`${this.apiBaseUrl}/files/upload/url`, {
+        url,
+        filename,
+        description,
+        resource_id: resourceId,
+        storage_id: storageId
+      });
+      return response.data;
+    }
+    catch (e: any) {
+      console.error(e);
+      return {
+        success: false,
+        message: e.toString(),
+      };
+    }
+  }
+
   async getFile(fileId: string): Promise<Response<RFile>> {
     try {
       const response = await axios.get(`${this.apiBaseUrl}/files/${fileId}`);

frontend/src/pages/resource_details_page.tsx

@@ -402,6 +402,7 @@ function Files({files, resourceID}: { files: RFile[], resourceID: number }) {
 enum FileType {
   redirect = "redirect",
   upload = "upload",
+  serverTask = "server_task"
 }
 
 function CreateFileDialog({resourceId}: { resourceId: number }) {
@@ -418,6 +419,8 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
   const [file, setFile] = useState<File | null>(null)
   const [description, setDescription] = useState<string>("")
 
+  const [fileUrl, setFileUrl] = useState<string>("")
+
   const reload = useContext(context)
 
   const [isSubmitting, setSubmitting] = useState(false)
@@ -457,7 +460,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
         setError(res.message)
         setSubmitting(false)
       }
-    } else {
+    } else if (fileType === FileType.upload) {
       if (!file || !storage) {
         setError(t("Please select a file and storage"))
         setSubmitting(false)
@@ -477,6 +480,23 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
         setError(res.message)
         setSubmitting(false)
       }
+    } else if (fileType === FileType.serverTask) {
+      if (!fileUrl || !filename || !storage) {
+        setError(t("Please fill in all fields"));
+        setSubmitting(false);
+        return;
+      }
+      const res = await network.createServerDownloadTask(fileUrl, filename, description, resourceId, storage.id);
+      if (res.success) {
+        setSubmitting(false)
+        const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
+        dialog.close()
+        showToast({message: t("File created successfully"), type: "success"})
+        reload()
+      } else {
+        setError(res.message)
+        setSubmitting(false)
+      }
     }
   }
 
@@ -527,6 +547,9 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
           <input className="btn text-sm" type="radio" name="type" aria-label={t("Upload")} onInput={() => {
             setFileType(FileType.upload);
           }}/>
+          <input className="btn text-sm" type="radio" name="type" aria-label={t("File Url")} onInput={() => {
+            setFileType(FileType.serverTask);
+          }}/>
         </form>
 
         {
@@ -581,6 +604,44 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
           </>
         }
 
+        {
+          fileType === FileType.serverTask && <>
+            <p
+              className={"text-sm p-2"}>{t("Provide a file url for the server to download, and the file will be moved to the selected storage.")}</p>
+            <select className="select select-primary w-full my-2" defaultValue={""} onChange={(e) => {
+              const id = parseInt(e.target.value)
+              if (isNaN(id)) {
+                setStorage(null)
+              } else {
+                const s = storages.current?.find((s) => s.id == id)
+                if (s) {
+                  setStorage(s)
+                }
+              }
+            }}>
+              <option value={""} disabled>{t("Select Storage")}</option>
+              {
+                storages.current?.map((s) => {
+                  return <option key={s.id}
+                                 value={s.id}>{s.name}({(s.currentSize / 1024 / 1024).toFixed(2)}/{s.maxSize / 1024 / 1024}MB)</option>
+                })
+              }
+            </select>
+
+            <input type="text" className="input w-full my-2" placeholder={t("File Name")} onChange={(e) => {
+              setFilename(e.target.value)
+            }}/>
+
+            <input type="text" className="input w-full my-2" placeholder={t("File URL")} onChange={(e) => {
+              setFileUrl(e.target.value)
+            }}/>
+
+            <input type="text" className="input w-full my-2" placeholder={t("Description")} onChange={(e) => {
+              setDescription(e.target.value)
+            }}/>
+          </>
+        }
+
         {error && <ErrorAlert className={"my-2"} message={error}/>}
 
         <div className="modal-action">