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,4 +1,8 @@
 <template>
+  <div v-if="showWebLink">
+    <TextInput v-model="webLink" placeholder="https://example.com" />
+  </div>
+  <div v-else>
     <div
       class="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed min-h-64 text-gray-600"
       @dragover.prevent="dragover"
@@ -107,6 +111,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script setup>
 import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
@@ -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')