Support multiple file upload, rename Dav password

components/files/MainFiles.tsx

@@ -54,39 +54,43 @@ export default function MainFiles({ initialDirectories, initialFiles, initialPat
   function onClickUploadFile() {
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
+    fileInput.multiple = true;
     fileInput.click();
 
     fileInput.onchange = async (event) => {
-      const chosenFiles = (event.target as HTMLInputElement)?.files!;
-      const chosenFile = chosenFiles[0];
+      const chosenFilesList = (event.target as HTMLInputElement)?.files!;
 
-      if (!chosenFile) {
-        return;
-      }
+      const chosenFiles = Array.from(chosenFilesList);
 
       isUploading.value = true;
 
-      areNewOptionsOption.value = false;
-
-      const requestBody = new FormData();
-      requestBody.set('parent_path', path.value);
-      requestBody.set('name', chosenFile.name);
-      requestBody.set('contents', chosenFile);
-
-      try {
-        const response = await fetch(`/api/files/upload`, {
-          method: 'POST',
-          body: requestBody,
-        });
-        const result = await response.json() as UploadResponseBody;
-
-        if (!result.success) {
-          throw new Error('Failed to upload file!');
+      for (const chosenFile of chosenFiles) {
+        if (!chosenFile) {
+          continue;
         }
 
-        files.value = [...result.newFiles];
-      } catch (error) {
-        console.error(error);
+        areNewOptionsOption.value = false;
+
+        const requestBody = new FormData();
+        requestBody.set('parent_path', path.value);
+        requestBody.set('name', chosenFile.name);
+        requestBody.set('contents', chosenFile);
+
+        try {
+          const response = await fetch(`/api/files/upload`, {
+            method: 'POST',
+            body: requestBody,
+          });
+          const result = await response.json() as UploadResponseBody;
+
+          if (!result.success) {
+            throw new Error('Failed to upload file!');
+          }
+
+          files.value = [...result.newFiles];
+        } catch (error) {
+          console.error(error);
+        }
       }
 
       isUploading.value = false;

islands/Settings.tsx

@@ -24,7 +24,7 @@ export const actionWords = new Map<Action, string>([
   ['change-email', 'change email'],
   ['verify-change-email', 'change email'],
   ['change-password', 'change password'],
-  ['change-dav-password', 'change DAV password'],
+  ['change-dav-password', 'change Sync password'],
   ['delete-account', 'delete account'],
 ]);
 
@@ -83,11 +83,11 @@ function formFields(action: Action, formData: FormData) {
   } else if (action === 'change-dav-password') {
     fields.push({
       name: 'new-dav-password',
-      label: 'New DAV Password',
+      label: 'New Sync Password',
       type: 'password',
       placeholder: 'super-SECRET-passphrase',
       required: true,
-      description: 'Alternative password used for DAV access and/or HTTP Basic Auth.',
+      description: 'Alternative password used for Sync access and/or HTTP Basic Auth.',
     });
   } else if (action === 'delete-account') {
     fields.push({
@@ -148,12 +148,12 @@ export default function Settings({ formData: formDataObject, error, notice }: Se
           </section>
         </form>
 
-        <h2 class='text-2xl mb-4 text-left px-4 max-w-screen-md mx-auto lg:min-w-96'>Change your DAV password</h2>
+        <h2 class='text-2xl mb-4 text-left px-4 max-w-screen-md mx-auto lg:min-w-96'>Change your Sync password</h2>
 
         <form method='POST' class='mb-12'>
           {formFields('change-dav-password', formData).map((field) => generateFieldHtml(field, formData))}
           <section class='flex justify-end mt-8 mb-4'>
-            <button class='button-secondary' type='submit'>Change DAV password</button>
+            <button class='button-secondary' type='submit'>Change Sync password</button>
           </section>
         </form>