@ditojs/admin 3.2.7 → 3.3.0

package/src/types/DitoTypeUpload.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-.dito-upload
+.dito-upload(
+  ref="dropTarget"
+  :class="{ 'dito-upload--drop-target': isDropTarget }"
+)
   //- In order to handle upload buttons in multiple possible places, depending
   //- on whether they handle single or multiple uploads, render the upload
   //- component invisibly at the root, and delegate the click events to it from
@@ -11,11 +14,12 @@
     :name="dataPath"
     :disabled="disabled"
     :postAction="uploadPath"
+    :headers="uploadOptions?.headers"
     :extensions="extensions"
     :accept="accept"
     :multiple="multiple"
     :size="maxSize"
-    :drop="$el?.closest('.dito-container')"
+    :drop="true"
     :dropDirectory="true"
     @input-filter="onInputFilter"
     @input-file="onInputFile"
@@ -41,9 +45,10 @@
       template(
         v-if="multiple || !isUploadActive"
       )
+        //- Stored files have unique keys, uploading files unique ids:
         tr(
           v-for="(file, index) in files"
-          :key="file.name"
+          :key="file.key ?? file.id ?? file.name"
         )
           td(
             v-if="render"
@@ -60,6 +65,7 @@
             )
               DitoUploadFile(
                 :file="file"
+                :upload="getUpload(file)"
                 :thumbnail="thumbnails"
                 :thumbnailUrl="thumbnailUrls[index]"
               )
@@ -68,6 +74,7 @@
           )
             DitoUploadFile(
               :file="file"
+              :upload="getUpload(file)"
               :thumbnail="thumbnails"
               :thumbnailUrl="thumbnailUrls[index]"
             )
@@ -77,57 +84,56 @@
               v-if="file.upload"
             )
               template(
-                v-if="file.upload.error"
+                v-if="file.upload.success"
               )
-                | Error: {{ file.upload.error }}
+                | Uploaded
               template(
-                v-else-if="file.upload.active"
+                v-else-if="getUpload(file)?.error"
               )
-                | Uploading...
+                | Error: {{ getUpload(file).error }}
               template(
-                v-else-if="file.upload.success"
+                v-else-if="getUpload(file)?.active"
               )
-                | Uploaded
+                | Uploading...
             template(
               v-else
             )
               | Stored
           td.dito-table__buttons
             .dito-buttons.dito-buttons--round
-              button.dito-button.dito-button--upload(
+              DitoButton.dito-button--upload(
                 v-if="!multiple"
                 :title="uploadTitle"
                 @click="onClickUpload"
               )
-              //- Firefox doesn't like <button> here, so use <a> instead:
-              a.dito-button(
+              DitoDragHandle(
                 v-if="draggable"
-                v-bind="getButtonAttributes(verbs.drag)"
+                :disabled="disabled"
+                @move="delta => moveFile(file, delta)"
               )
-              button.dito-button(
+              DitoButton(
                 v-if="deletable"
-                type="button"
-                v-bind="getButtonAttributes(verbs.delete)"
-                @click="deleteFile(file, index)"
+                :verb="verbs.delete"
+                :disabled="disabled"
+                @click="deleteFile(file)"
               )
     tfoot(
       v-if="multiple || isUploadActive || !hasFiles"
     )
       tr
         td(:colspan="4")
-          .dito-upload-footer
+          .dito-upload__footer
             progress.dito-progress(
               v-if="isUploadActive"
               :value="uploadProgress"
               max="100"
             )
             .dito-buttons.dito-buttons--round
-              button.dito-button(
+              DitoButton(
                 v-if="isUploadActive"
-                type="button"
                 @click.prevent="upload.active = false"
               ) Cancel
-              button.dito-button.dito-button--upload(
+              DitoButton.dito-button--upload(
                 v-if="multiple || !hasFiles"
                 :title="uploadTitle"
                 @click="onClickUpload"
@@ -137,25 +143,49 @@
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
+import DitoDragHandle from '../components/DitoDragHandle.vue'
+import { DitoButton } from '@ditojs/ui/src'
 import SortableMixin from '../mixins/SortableMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { formatFileSize, parseFileSize } from '../utils/units.js'
 import { appendDataPath } from '../utils/data.js'
-import { isArray, asArray } from '@ditojs/utils'
+import {
+  fetchBlob,
+  getUploadOptions,
+  resolveDownloadUrl
+} from '../utils/request.js'
+import { confirmAndRemove } from '../utils/dialogs.js'
+import { getListWithMovedItem } from '../utils/list.js'
+import { isArray, asArray, escapeHtml } from '@ditojs/utils'
 import VueUpload from 'vue-upload-component'
 
 // @vue/component
 export default DitoTypeComponent.register('upload', {
   mixins: [SortableMixin],
-  components: { VueUpload },
+  components: { VueUpload, DitoButton, DitoDragHandle },
+  inject: ['$fileDropTargets'],
 
   data() {
     return {
-      uploads: []
+      uploads: [],
+      // Removes the upload from the targets of dragged files, see
+      // `updateDropTarget()`.
+      removeDropTarget: null
     }
   },
 
   computed: {
+    fileDropTargets() {
+      return this.$fileDropTargets()
+    },
+
+    // Whether files are dragged over the admin while the upload is enabled, for
+    // which it stands out above the overlay of `DitoRoot`. The dragged files'
+    // types can't be read before the drop, so `accept` isn't checked here.
+    isDropTarget() {
+      return this.fileDropTargets.isDraggingFiles && !this.disabled
+    },
+
     upload() {
       return this.$refs.upload
     },
@@ -164,12 +194,24 @@ export default DitoTypeComponent.register('upload', {
       return this.multiple ? 'Upload Files' : 'Upload File'
     },
 
-    files() {
-      return asFiles(this.value)
+    files: {
+      get() {
+        return asFiles(this.value)
+      },
+
+      // Writes the reordered files, see `DitoDraggable` and `moveFile()`.
+      set(files) {
+        this.value = this.multiple ? files : files[0] ?? null
+      }
     },
 
     downloadUrls() {
-      return this.files.map((file, index) => this.getDownloadUrl(file, index))
+      // Resolve the URLs like `fetchBlob()` does, so that the links point to
+      // the same files that clicking them downloads:
+      return this.files.map((file, index) => {
+        const url = this.getDownloadUrl(file, index)
+        return url ? resolveDownloadUrl(this.api, url) : null
+      })
     },
 
     thumbnailUrls() {
@@ -233,6 +275,13 @@ export default DitoTypeComponent.register('upload', {
       return this.files.length > 0
     },
 
+    // The files of the upload component by their ids. It replaces a file's
+    // object on each update, so the files in the value only refer to their
+    // upload by id, see `onInputFile()` and `getUpload()`.
+    uploadsById() {
+      return new Map(this.uploads.map(upload => [upload.id, upload]))
+    },
+
     hasUploads() {
       return this.uploads.length > 0
     },
@@ -256,15 +305,27 @@ export default DitoTypeComponent.register('upload', {
     },
 
     uploadPath() {
-      return this.getResourceUrl({
-        type: 'upload',
-        method: 'post',
-        path: this.api.normalizePath(this.dataPath)
-      })
+      // Uploads are posted to the resource of the data, see
+      // `api.resources.upload()`, which views without resource don't have.
+      return this.dataComponent?.resource
+        ? this.getResourceUrl({
+            type: 'upload',
+            method: 'post',
+            path: this.api.normalizePath(this.dataPath)
+          })
+        : null
+    },
+
+    uploadOptions() {
+      return this.uploadPath
+        ? getUploadOptions(this.api, this.uploadPath)
+        : null
     }
   },
 
   watch: {
+    disabled: 'updateDropTarget',
+
     isUploadReady(ready) {
       if (ready) {
         // Auto-upload.
@@ -275,9 +336,27 @@ export default DitoTypeComponent.register('upload', {
     }
   },
 
+  mounted() {
+    this.updateDropTarget()
+  },
+
+  unmounted() {
+    this.removeDropTarget?.()
+  },
+
   methods: {
     formatFileSize,
 
+    // Adds the upload to the targets of dragged files while it's enabled.
+    // `VueUpload` handles the files dropped on its parent, which is the same
+    // element, see `:drop="true"`.
+    updateDropTarget() {
+      this.removeDropTarget?.()
+      this.removeDropTarget = this.disabled
+        ? null
+        : this.fileDropTargets.add(this.$refs.dropTarget)
+    },
+
     getFileContext(file, index) {
       return this.multiple
         ? new DitoContext(this, {
@@ -293,12 +372,18 @@ export default DitoTypeComponent.register('upload', {
       return this.render(this.getFileContext(file, index))
     },
 
+    // Returns the current file object of the upload component for a file that
+    // was added through it, or `null`.
+    getUpload(file) {
+      return file.upload ? (this.uploadsById.get(file.upload.id) ?? null) : null
+    },
+
     getDownloadUrl(file, index) {
       return file.url
         ? file.url
         : !file.upload || file.upload.success
           ? this.getSchemaValue('downloadUrl', {
-              type: 'String',
+              type: String,
               default: null,
               context: this.getFileContext(file, index)
             })
@@ -308,7 +393,7 @@ export default DitoTypeComponent.register('upload', {
     getThumbnailUrl(file, index) {
       return !file.upload || file.upload.success
         ? this.getSchemaValue('thumbnailUrl', {
-            type: 'String',
+            type: String,
             default: null,
             context: this.getFileContext(file, index)
           }) || (
@@ -319,29 +404,40 @@ export default DitoTypeComponent.register('upload', {
         : null
     },
 
-    deleteFile(file, index) {
-      const { name } = file
-
-      if (
-        file &&
-        window.confirm(
-          `Do you really want to ${this.verbs.remove} ${name}?`
-        )
-      ) {
-        if (this.multiple) {
-          this.value.splice(index, 1)
-        } else {
-          this.value = null
-        }
-        if (file.upload) {
-          this.upload.remove(file.upload)
+    async deleteFile(file) {
+      if (!file) return
+      await confirmAndRemove(this, {
+        label: escapeHtml(file.name),
+        // The file is only removed from the value, which still needs the form
+        // to be saved.
+        isTransient: true,
+        remove: () => {
+          // Look up the file by identity once confirmed, as the files may have
+          // changed while the dialog was open. Stored files may not have ids,
+          // see `getFileIndex()`.
+          const index = this.files.indexOf(file)
+          if (index < 0) {
+            return false
+          }
+          if (this.multiple) {
+            this.value.splice(index, 1)
+          } else {
+            this.value = null
+          }
+          if (file.upload) {
+            this.upload.remove(file.upload.id)
+          }
+          this.onChange()
         }
+      })
+    },
+
+    // Moves the file by `delta` positions, see `DitoDragHandle`.
+    moveFile(file, delta) {
+      const files = getListWithMovedItem(this.files, file, delta)
+      if (files) {
+        this.files = files
         this.onChange()
-        this.notify({
-          type: 'info',
-          title: 'Successfully Removed',
-          text: `${name} was ${this.verbs.deleted}.`
-        })
       }
     },
 
@@ -382,10 +478,14 @@ export default DitoTypeComponent.register('upload', {
       this.replaceFile(file, null)
     },
 
+    // Files added through the upload component refer to their upload with
+    // `upload: { id, success }` in the value: `success` tells `processValue()`
+    // which files were stored, and the upload's state is read through
+    // `getUpload()`.
     onInputFile(newFile, oldFile) {
       if (newFile && !oldFile) {
         const { id, name, size } = newFile
-        this.addFile({ id, name, size, upload: newFile })
+        this.addFile({ id, name, size, upload: { id, success: false } })
       }
       if (newFile && oldFile) {
         const { success, error } = newFile
@@ -393,9 +493,9 @@ export default DitoTypeComponent.register('upload', {
           this.onChange()
           const file = newFile.response[0]
           if (file) {
-            file.upload = newFile
-            // Replace the upload file object with the file object received
-            // from the upload response.
+            file.upload = { id: newFile.id, success: true }
+            // Replace the file added for the upload with the file received
+            // in the upload response.
             this.replaceFile(newFile, file)
           } else {
             this.removeFile(newFile)
@@ -425,22 +525,32 @@ export default DitoTypeComponent.register('upload', {
     },
 
     onInputFilter(newFile /*, oldFile, prevent */) {
+      // `VueUpload` only creates the request when uploading, and has no setting
+      // for its credentials:
       const xhr = newFile?.xhr
-      if (this.api.cors?.credentials && xhr && !xhr.withCredentials) {
+      if (this.uploadOptions?.withCredentials && xhr && !xhr.withCredentials) {
         xhr.withCredentials = true
       }
     },
 
     async onClickDownload(file, index) {
       try {
-        const response = await fetch(this.downloadUrls[index])
-        const blob = await response.blob()
-        this.download({
-          filename: file.name,
-          url: URL.createObjectURL(blob)
-        })
+        const blob = await fetchBlob(this.api, this.downloadUrls[index])
+        const url = URL.createObjectURL(blob)
+        try {
+          this.download({ filename: file.name, url })
+        } finally {
+          // Release the blob once the browser started the download, which
+          // some browsers don't do synchronously when the link is clicked.
+          setTimeout(() => URL.revokeObjectURL(url), 1000)
+        }
       } catch (error) {
-        console.error(error)
+        this.notify({
+          type: 'error',
+          error,
+          title: 'File Download Error',
+          text: `Unable to download ${file.name}: ${error.message}`
+        })
       }
     },
 
@@ -470,6 +580,19 @@ function asFiles(value) {
 @import '../styles/_imports';
 
 .dito-upload {
+  // Positioned for `z-index`, to stay above the overlay of `DitoRoot` until it
+  // faded out:
+  position: relative;
+  transition:
+    filter $drag-overlay-duration,
+    z-index 0s $drag-overlay-duration;
+
+  &--drop-target {
+    z-index: $z-index-drag-overlay + 1;
+    filter: drop-shadow(0 4px 8px rgb(0, 0, 0, 0.25));
+    transition: filter $drag-overlay-duration;
+  }
+
   .dito-table {
     tr,
     .dito-table__buttons {