@cloudron/pankow 4.1.9 → 4.1.10

package/components/FileUploader.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="pankow-file-uploader" v-show="uploadInProgress">
     <div class="pankow-file-uploader-label-and-speed-container"><div class="pankow-file-uploader-label">{{ tr('filemanager.uploader.uploading') }} {{ activeFile ? activeFile.name : '' }}</div><div class="pankow-file-uploader-speed">{{ prettyUploadSpeed }}</div></div>
-    <div style="display: flex;">
-      <ProgressBar :value="parseInt((this.uploadedSize * 100) / this.size) || 0" style="flex-grow: 1"></ProgressBar>
+    <div class="pankow-file-uploader-progress-container">
+      <ProgressBar :value="parseInt((uploadedSize * 100) / size) || 0" style="flex-grow: 1"></ProgressBar>
       <Button danger small tool @click="onCancelUpload" icon="fa-solid fa-xmark"></Button>
     </div>
 
@@ -13,175 +13,181 @@
   </div>
 </template>
 
-<script>
+<script setup>
+
+import { ref, computed, onMounted, useTemplateRef } from 'vue';
 
 import ProgressBar from './ProgressBar.vue';
 import Button from './Button.vue';
-import Icon from './Icon.vue';
 import InputDialog from './InputDialog.vue';
 
 import { translation } from '../utils.js';
 
-export default {
-  name: 'FileUploader',
-  components: {
-    ProgressBar,
-    Button,
-    Icon,
-    InputDialog
+const emit = defineEmits([ 'finished' ]);
+
+const props = defineProps({
+  uploadHandler: {
+    type: Function,
+    default() { console.warn('Missing uploadHandler for FileUploader'); }
   },
-  emits: [ 'finished' ],
-  props: {
-    uploadHandler: {
-      type: Function,
-      default() { console.warn('Missing uploadHandler for FileUploader'); }
-    },
-    cancelHandler: {
-      type: Function,
-      default() { console.warn('Missing cancelHandler for FileUploader'); }
-    },
-    jobPreFlightCheckHandler: {
-      type: Function,
-      default(job) { console.warn('Missing jobPreFlightCheckHandler for FileUploader'); return true; }
-    },
-    tr: {
-      type: Function,
-      default(id) { console.warn('Missing tr for FileUploader, using fallback.'); return translation(id); }
-    },
+  cancelHandler: {
+    type: Function,
+    default() { console.warn('Missing cancelHandler for FileUploader'); }
   },
-  data() {
-    return {
-      activeTargetFolder: '/', // keep folder state for upload dialogs
-      uploadInProgress: false,
-      activeJob: null,
-      activeFile: {},
-      pendingJobs: [],
-      size: 0,
-      uploadedSize: 0,
-      uploadSpeed: 0
-    };
+  jobPreFlightCheckHandler: {
+    type: Function,
+    default(job) { console.warn('Missing jobPreFlightCheckHandler for FileUploader'); return true; }
   },
-  computed: {
-    prettyUploadSpeed() {
-      if (this.uploadSpeed < 1024) return this.uploadSpeed + ' Kb/s';
-      else return (this.uploadSpeed/1024).toFixed(2) + ' Mb/s';
-    }
+  tr: {
+    type: Function,
+    default(id) { console.warn('Missing tr for FileUploader, using fallback.'); return translation(id); }
   },
-  methods: {
-    beforeUnloadListener(event) {
-      event.preventDefault();
-      return window.confirm(this.tr('filemanager.uploader.exitWarning'));
-    },
-    onUploadFile(targetFolder) {
-      this.activeTargetFolder = targetFolder;
-      this.$refs.uploadFileInput.click();
-    },
-    onUploadFolder(targetFolder) {
-      this.activeTargetFolder = targetFolder;
-      this.$refs.uploadFolderInput.click();
-    },
-    async onCancelUpload() {
-      const confirmed = await this.$refs.inputDialog.confirm({
-        message: `Really cancel upload?`,
-        confirmStyle: 'danger',
-        confirmLabel: 'Yes',
-        rejectLabel: 'No'
-      });
-
-      if (!confirmed) return;
-
-      this.cancelHandler();
-      this.uploadFinished();
-    },
-    uploadFinished() {
-      this.progess = 0;
-      this.size = 0;
-      this.uploadedSize = 0;
-      this.activeFile = {};
-      this.activeJob = null;
-      this.uploadInProgress = false;
-
-      window.removeEventListener('beforeunload', this.beforeUnloadListener, { capture: true });
-
-      this.$emit('finished');
-    },
-    async uploadNextJob() {
-      if (this.pendingJobs.length === 0) return this.uploadFinished();
-
-      this.activeJob = this.pendingJobs.pop();
-
-      if (!(await this.jobPreFlightCheckHandler(this.activeJob))) return this.uploadNextJob();
-
-      this.uploadNextFile();
-    },
-    async uploadNextFile() {
-      if (!this.activeJob || this.activeJob.pendingFiles.length === 0) return this.uploadNextJob();
-
-      this.activeFile = this.activeJob.pendingFiles.pop();
-
-      try {
-        let uploadedSoFar = 0;
-        let lastTimestamp = Date.now();
-
-        await this.uploadHandler(this.activeJob.targetFolder, this.activeFile, (event) => {
-          if (event.direction === 'upload') {
-            const timeDiff = Date.now() - lastTimestamp;
-            const loadedDiff = event.loaded - uploadedSoFar;
-
-            this.uploadedSize += loadedDiff;
-            this.uploadSpeed = parseInt(loadedDiff / (timeDiff / 1024) / 1024);
-
-            uploadedSoFar = event.loaded;
-            lastTimestamp = Date.now();
-          }
-        });
-      } catch (e) {
-        console.error(`Failed to upload ${this.activeFile.name}`, e);
-      }
+});
+
+const uploadFileInput = useTemplateRef('uploadFileInput');
+const uploadFolderInput = useTemplateRef('uploadFolderInput');
+const inputDialog = useTemplateRef('inputDialog');
+
+const activeTargetFolder = ref('/');
+const uploadInProgress = ref(false);
+const activeJob = ref(null);
+const activeFile = ref({});
+const pendingJobs = ref([]);
+const size = ref(0);
+const uploadedSize = ref(0);
+const uploadSpeed = ref(0);
+
+const prettyUploadSpeed = computed(() => {
+  if (uploadSpeed.value < 1024) return uploadSpeed.value + ' Kb/s';
+  else return (uploadSpeed.value / 1024).toFixed(2) + ' Mb/s';
+});
+
+function beforeUnloadListener(event) {
+  event.preventDefault();
+  return window.confirm(props.tr('filemanager.uploader.exitWarning'));
+}
 
-      this.uploadNextFile();
-    },
-    startUpload() {
-      if (this.uploadInProgress) return;
-      this.uploadInProgress = true;
+function onUploadFile(targetFolder) {
+  activeTargetFolder.value = targetFolder;
+  uploadFileInput.value?.click();
+}
 
-      window.addEventListener('beforeunload', this.beforeUnloadListener, { capture: true });
+function onUploadFolder(targetFolder) {
+  activeTargetFolder.value = targetFolder;
+  uploadFolderInput.value?.click();
+}
 
-      this.uploadNextJob();
-    },
-    addFiles(files, targetFolder) {
-      if (!files || !files.length) return;
+async function onCancelUpload() {
+  const confirmed = await inputDialog.value.confirm({
+    message: `Really cancel upload?`,
+    confirmStyle: 'danger',
+    confirmLabel: 'Yes',
+    rejectLabel: 'No'
+  });
 
-      let folder = files[0].webkitRelativePath ? files[0].webkitRelativePath : null;
-      if (folder && folder.indexOf('/') !== -1) folder = folder.split('/')[0];
+  if (!confirmed) return;
 
-      const job = {
-        folder,
-        targetFolder,
-        pendingFiles: []
-      };
+  props.cancelHandler();
+  uploadFinished();
+}
 
-      // update overall size and convert to real Array
-      for (let i = 0; i < files.length; ++i) {
-        this.size += files[i].size;
-        job.pendingFiles.push(files[i]);
-      }
+function uploadFinished() {
+  size.value = 0;
+  uploadedSize.value = 0;
+  activeFile.value = {};
+  activeJob.value = null;
+  uploadInProgress.value = false;
 
-      this.pendingJobs.push(job);
+  window.removeEventListener('beforeunload', beforeUnloadListener, { capture: true });
 
-      this.startUpload();
-    }
-  },
-  mounted() {
-    this.$refs.uploadFileInput.addEventListener('change', (e) => {
-      this.addFiles(e.target.files || [], this.activeTargetFolder);
-    });
+  emit('finished');
+}
 
-    this.$refs.uploadFolderInput.addEventListener('change', (e) => {
-      this.addFiles(e.target.files || [], this.activeTargetFolder);
+async function uploadNextJob() {
+  if (pendingJobs.value.length === 0) return uploadFinished();
+
+  activeJob.value = pendingJobs.value.pop();
+
+  if (!(await props.jobPreFlightCheckHandler(activeJob.value))) return uploadNextJob();
+
+  uploadNextFile();
+}
+
+async function uploadNextFile() {
+  console.log('next file')
+  if (!activeJob.value || activeJob.value.pendingFiles.length === 0) return uploadNextJob();
+
+  activeFile.value = activeJob.value.pendingFiles.pop();
+
+  try {
+    let uploadedSoFar = 0;
+    let lastTimestamp = Date.now();
+
+    await props.uploadHandler(activeJob.value.targetFolder, activeFile.value, (event) => {
+      if (event.direction === 'upload') {
+        const timeDiff = Date.now() - lastTimestamp;
+        const loadedDiff = event.loaded - uploadedSoFar;
+
+        uploadedSize.value += loadedDiff;
+        uploadSpeed.value = parseInt(loadedDiff / (timeDiff / 1024) / 1024);
+
+        uploadedSoFar = event.loaded;
+        lastTimestamp = Date.now();
+      }
     });
+  } catch (e) {
+    console.error(`Failed to upload ${activeFile.value.name}`, e);
   }
-};
+
+  uploadNextFile();
+}
+
+function startUpload() {
+  if (uploadInProgress.value) return;
+  uploadInProgress.value = true;
+
+  window.addEventListener('beforeunload', beforeUnloadListener, { capture: true });
+
+  uploadNextJob();
+}
+
+function addFiles(files, targetFolder) {
+  if (!files || !files.length) return;
+
+  let folder = files[0].webkitRelativePath ? files[0].webkitRelativePath : null;
+  if (folder && folder.indexOf('/') !== -1) folder = folder.split('/')[0];
+
+  const job = {
+    folder,
+    targetFolder,
+    pendingFiles: []
+  };
+
+  for (let i = 0; i < files.length; ++i) {
+    size.value += files[i].size;
+    job.pendingFiles.push(files[i]);
+  }
+
+  pendingJobs.value.push(job);
+
+  startUpload();
+}
+
+onMounted(() => {
+  uploadFileInput.value?.addEventListener('change', (e) => {
+    addFiles(e.target.files || [], activeTargetFolder.value);
+  });
+
+  uploadFolderInput.value?.addEventListener('change', (e) => {
+    addFiles(e.target.files || [], activeTargetFolder.value);
+  });
+});
+
+defineExpose({
+  addFiles,
+  onUploadFile,
+  onUploadFolder
+});
 
 </script>
 
@@ -218,4 +224,9 @@ export default {
   white-space: nowrap;
 }
 
-</style>
+.pankow-file-uploader-progress-container {
+  display: flex;
+  gap: 10px;
+}
+
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.1.9",
+  "version": "4.1.10",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -33,7 +33,7 @@
     "@vitejs/plugin-vue": "^6.0.5",
     "highlight.js": "^11.11.1",
     "typescript": "^6.0.2",
-    "vite": "^8.0.6",
+    "vite": "^8.0.8",
     "vue": "^3.5.32",
     "vue-router": "^5.0.4"
   }