feat: file upload via web link

frontend/src/components/FilesUploader/FilesUploader.vue

@@ -8,6 +8,7 @@
   >
     <template #body-content>
       <FilesUploaderArea
+        ref="filesUploaderArea"
         v-model="files"
         :doctype="doctype"
         :options="options"
@@ -23,6 +24,15 @@
             :disabled="fileUploadStarted"
             @click="removeAllFiles"
           />
+          <Button
+            v-if="filesUploaderArea?.showWebLink"
+            :label="__('Back to file upload')"
+            @click="filesUploaderArea.showWebLink = false"
+          >
+            <template #prefix>
+              <FeatherIcon name="arrow-left" class="size-4" />
+            </template>
+          </Button>
         </div>
         <div class="flex gap-2">
           <Button
@@ -41,10 +51,10 @@
           />
           <Button
             variant="solid"
-            :loading="fileUploadStarted"
-            :disabled="!files.length"
-            @click="attachFiles"
             :label="__('Attach')"
+            :loading="fileUploadStarted"
+            :disabled="disableAttachButton"
+            @click="attachFiles"
           />
         </div>
       </div>
@@ -55,6 +65,7 @@
 <script setup>
 import FilesUploaderArea from '@/components/FilesUploader/FilesUploaderArea.vue'
 import FilesUploadHandler from './filesUploaderHandler'
+import { createToast } from '@/utils'
 import { ref, computed } from 'vue'
 
 const props = defineProps({
@@ -75,6 +86,8 @@ const props = defineProps({
 })
 
 const show = defineModel()
+
+const filesUploaderArea = ref(null)
 const files = ref([])
 
 const isAllPrivate = computed(() => files.value.every((a) => a.private))
@@ -91,10 +104,38 @@ function removeAllFiles() {
   files.value = []
 }
 
+const disableAttachButton = computed(() => {
+  if (filesUploaderArea.value?.showWebLink) {
+    return !filesUploaderArea.value.webLink
+  }
+  return !files.value.length
+})
+
 function attachFiles() {
+  if (filesUploaderArea.value.showWebLink) {
+    return uploadViaWebLink()
+  }
   files.value.forEach((file, i) => attachFile(file, i))
 }
 
+function uploadViaWebLink() {
+  let fileUrl = filesUploaderArea.value.webLink
+  if (!fileUrl) {
+    createToast({
+      title: __('Error'),
+      title: __('Please enter a valid URL'),
+      icon: 'x',
+      iconClasses: 'text-red-600',
+    })
+    return
+  }
+  fileUrl = decodeURI(fileUrl)
+  show.value = false
+  return attachFile({
+    fileUrl,
+  })
+}
+
 const uploader = ref(null)
 const fileUploadStarted = ref(false)
 

frontend/src/components/FilesUploader/FilesUploaderArea.vue

@@ -1,109 +1,114 @@
 <template>
-  <div
+  <div v-if="showWebLink">
-    class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-gray-600"
+    <TextInput v-model="webLink" placeholder="https://example.com" />
-    @dragover.prevent="dragover"
-    @dragleave.prevent="dragleave"
-    @drop.prevent="dropfiles"
-    v-show="files.length === 0"
-  >
-    <div v-if="!isDragging" class="flex flex-col gap-3">
-      <div class="text-center text-gray-600">
-        {{ __('Drag and drop files here or upload from') }}
-      </div>
-      <div
-        class="grid grid-flow-col justify-center gap-4 text-center text-base"
-      >
-        <input
-          type="file"
-          class="hidden"
-          ref="fileInput"
-          @change="onFileInput"
-          :multiple="allowMultiple"
-          :accept="(restrictions.allowedFileTypes || []).join(', ')"
-        />
-        <div>
-          <Button icon="monitor" size="md" @click="browseFiles" />
-          <div class="mt-1">{{ __('Device') }}</div>
-        </div>
-        <div v-if="!disableFileBrowser">
-          <Button icon="folder" size="md" @click="showFileBrowser = true" />
-          <div class="mt-1">{{ __('Library') }}</div>
-        </div>
-        <div v-if="allowWebLink">
-          <Button icon="link" size="md" @click="showWebLink = true" />
-          <div class="mt-1">{{ __('Link') }}</div>
-        </div>
-        <div v-if="allowTakePhoto">
-          <Button icon="camera" size="md" @click="captureImage" />
-          <div class="mt-1">{{ __('Camera') }}</div>
-        </div>
-      </div>
-    </div>
-    <div v-else>
-      {{ __('Drop files here') }}
-    </div>
   </div>
-  <div v-show="files.length" class="flex flex-col divide-y">
+  <div v-else>
     <div
-      v-for="file in files"
+      class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-gray-600"
-      :key="file.name"
+      @dragover.prevent="dragover"
-      class="flex items-center justify-between py-3"
+      @dragleave.prevent="dragleave"
+      @drop.prevent="dropfiles"
+      v-show="files.length === 0"
     >
-      <div class="flex items-center gap-4">
+      <div v-if="!isDragging" class="flex flex-col gap-3">
-        <div
+        <div class="text-center text-gray-600">
-          class="size-11 rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
+          {{ __('Drag and drop files here or upload from') }}
-          :class="{ border: !file.type?.startsWith('image') }"
-        >
-          <img
-            v-if="file.type?.startsWith('image')"
-            class="size-full object-cover"
-            :src="file.src"
-            :alt="file.name"
-          />
-          <component v-else class="size-4" :is="fileIcon(file.type)" />
         </div>
-        <div class="flex flex-col gap-1 text-sm text-gray-600">
+        <div
-          <div class="text-base text-gray-800">
+          class="grid grid-flow-col justify-center gap-4 text-center text-base"
-            {{ file.name }}
+        >
-          </div>
+          <input
-          <div class="mb-1">
+            type="file"
-            {{ convertSize(file.fileObj.size) }}
+            class="hidden"
-          </div>
+            ref="fileInput"
-          <FormControl
+            @change="onFileInput"
-            v-model="file.private"
+            :multiple="allowMultiple"
-            type="checkbox"
+            :accept="(restrictions.allowedFileTypes || []).join(', ')"
-            class="[&>label]:text-sm [&>label]:text-gray-600"
-            :label="__('Private')"
-          />
-          <ErrorMessage
-            class="mt-2"
-            v-if="file.errorMessage"
-            :message="file.errorMessage"
           />
+          <div>
+            <Button icon="monitor" size="md" @click="browseFiles" />
+            <div class="mt-1">{{ __('Device') }}</div>
+          </div>
+          <div v-if="!disableFileBrowser">
+            <Button icon="folder" size="md" @click="showFileBrowser = true" />
+            <div class="mt-1">{{ __('Library') }}</div>
+          </div>
+          <div v-if="allowWebLink">
+            <Button icon="link" size="md" @click="showWebLink = true" />
+            <div class="mt-1">{{ __('Link') }}</div>
+          </div>
+          <div v-if="allowTakePhoto">
+            <Button icon="camera" size="md" @click="captureImage" />
+            <div class="mt-1">{{ __('Camera') }}</div>
+          </div>
         </div>
       </div>
-      <div>
+      <div v-else>
-        <CircularProgressBar
+        {{ __('Drop files here') }}
-          v-if="file.uploading || file.uploaded == file.total"
+      </div>
-          :class="{
+    </div>
-            'text-green-500': file.uploaded == file.total,
+    <div v-show="files.length" class="flex flex-col divide-y">
-          }"
+      <div
-          :theme="{
+        v-for="file in files"
-            primary: '#22C55E',
+        :key="file.name"
-            secondary: 'lightgray',
+        class="flex items-center justify-between py-3"
-          }"
+      >
-          :step="file.uploaded || 1"
+        <div class="flex items-center gap-4">
-          :totalSteps="file.total || 100"
+          <div
-          size="xs"
+            class="size-11 rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
-          variant="outline"
+            :class="{ border: !file.type?.startsWith('image') }"
-          :showPercentage="file.uploading"
+          >
-        />
+            <img
-        <Button
+              v-if="file.type?.startsWith('image')"
-          v-else
+              class="size-full object-cover"
-          variant="ghost"
+              :src="file.src"
-          icon="trash-2"
+              :alt="file.name"
-          @click="removeFile(file.name)"
+            />
-        />
+            <component v-else class="size-4" :is="fileIcon(file.type)" />
+          </div>
+          <div class="flex flex-col gap-1 text-sm text-gray-600">
+            <div class="text-base text-gray-800">
+              {{ file.name }}
+            </div>
+            <div class="mb-1">
+              {{ convertSize(file.fileObj.size) }}
+            </div>
+            <FormControl
+              v-model="file.private"
+              type="checkbox"
+              class="[&>label]:text-sm [&>label]:text-gray-600"
+              :label="__('Private')"
+            />
+            <ErrorMessage
+              class="mt-2"
+              v-if="file.errorMessage"
+              :message="file.errorMessage"
+            />
+          </div>
+        </div>
+        <div>
+          <CircularProgressBar
+            v-if="file.uploading || file.uploaded == file.total"
+            :class="{
+              'text-green-500': file.uploaded == file.total,
+            }"
+            :theme="{
+              primary: '#22C55E',
+              secondary: 'lightgray',
+            }"
+            :step="file.uploaded || 1"
+            :totalSteps="file.total || 100"
+            size="xs"
+            variant="outline"
+            :showPercentage="file.uploading"
+          />
+          <Button
+            v-else
+            variant="ghost"
+            icon="trash-2"
+            @click="removeFile(file.name)"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -131,8 +136,10 @@ const files = defineModel()
 
 const fileInput = ref(null)
 const isDragging = ref(false)
-const showWebLink = ref(true)
+const showWebLink = ref(false)
-const showFileBrowser = ref(true)
+const showFileBrowser = ref(false)
+
+const webLink = ref('')
 
 const allowMultiple = ref(props.options.allowMultiple == false ? false : true)
 const disableFileBrowser = ref(props.options.disableFileBrowser || false)
@@ -318,4 +325,10 @@ function fileIcon(type) {
   }
   return FileTextIcon
 }
+
+defineExpose({
+  showFileBrowser,
+  showWebLink,
+  webLink,
+})
 </script>

frontend/src/components/FilesUploader/filesUploaderHandler.ts

@@ -99,7 +99,7 @@ class FilesUploadHandler {
 
       let formData = new FormData()
 
-      if (options.file && file) {
+      if (options.file && file?.name) {
         formData.append('file', options.file, file.name)
       }
       formData.append('is_private', options.private || false ? '1' : '0')