diff --git a/crm/api/__init__.py b/crm/api/__init__.py
index 141da446a..58739de0d 100644
--- a/crm/api/__init__.py
+++ b/crm/api/__init__.py
@@ -3,6 +3,7 @@
 from frappe.translate import get_all_translations
 from frappe.utils import validate_email_address, split_emails, cstr
 from frappe.utils.telemetry import POSTHOG_HOST_FIELD, POSTHOG_PROJECT_FIELD
+from frappe.core.api.file import get_max_file_size
 
 
 @frappe.whitelist(allow_guest=True)
@@ -107,3 +108,20 @@ def invite_by_email(emails: str, role: str):
 
 	for email in to_invite:
 		frappe.get_doc(doctype="CRM Invitation", email=email, role=role).insert(ignore_permissions=True)
+
+
+@frappe.whitelist()
+def get_file_uploader_defaults(doctype: str):
+	max_number_of_files = None
+	make_attachments_public = False
+	if doctype:
+		meta = frappe.get_meta(doctype)
+		max_number_of_files = meta.get("max_attachments")
+		make_attachments_public = meta.get("make_attachments_public")
+
+	return {
+		'allowed_file_types': frappe.get_system_settings("allowed_file_extensions"),
+		'max_file_size': get_max_file_size(),
+		'max_number_of_files': max_number_of_files,
+		'make_attachments_public': bool(make_attachments_public),
+	}
\ No newline at end of file
diff --git a/frontend/src/components/FilesUploader/FilesUploader.vue b/frontend/src/components/FilesUploader/FilesUploader.vue
new file mode 100644
index 000000000..df20d1459
--- /dev/null
+++ b/frontend/src/components/FilesUploader/FilesUploader.vue
@@ -0,0 +1,152 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      title: __('Attach'),
+      size: 'xl',
+    }"
+  >
+    <template #body-content>
+      <FilesUploaderArea
+        v-model="files"
+        :doctype="doctype"
+        :options="options"
+      />
+    </template>
+    <template #actions>
+      <div class="flex justify-between">
+        <div>
+          <Button
+            v-if="files.length"
+            variant="subtle"
+            :label="__('Remove all')"
+            :disabled="fileUploadStarted"
+            @click="removeAllFiles"
+          />
+        </div>
+        <div class="flex gap-2">
+          <Button
+            v-if="isAllPrivate && files.length"
+            variant="subtle"
+            :label="__('Set all as public')"
+            :disabled="fileUploadStarted"
+            @click="setAllPublic"
+          />
+          <Button
+            v-else-if="files.length"
+            variant="subtle"
+            :label="__('Set all as private')"
+            :disabled="fileUploadStarted"
+            @click="setAllPrivate"
+          />
+          <Button
+            variant="solid"
+            :loading="fileUploadStarted"
+            :disabled="!files.length"
+            @click="attachFiles"
+            :label="__('Attach')"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import FilesUploaderArea from '@/components/FilesUploader/FilesUploaderArea.vue'
+import FilesUploadHandler from './filesUploaderHandler'
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+  docname: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      folder: 'Home/Attachments',
+    }),
+  },
+})
+
+const show = defineModel()
+const files = ref([])
+
+const isAllPrivate = computed(() => files.value.every((a) => a.private))
+
+function setAllPrivate() {
+  files.value.forEach((file) => (file.private = true))
+}
+
+function setAllPublic() {
+  files.value.forEach((file) => (file.private = false))
+}
+
+function removeAllFiles() {
+  files.value = []
+}
+
+function attachFiles() {
+  files.value.forEach((file, i) => attachFile(file, i))
+}
+
+const uploader = ref(null)
+const fileUploadStarted = ref(false)
+
+function attachFile(file, i) {
+  const args = {
+    file: file?.fileObj || {},
+    type: file.type,
+    private: file.private,
+    fileUrl: file.fileUrl,
+    folder: props.options.folder,
+    doctype: props.doctype,
+    docname: props.docname,
+  }
+
+  uploader.value = new FilesUploadHandler()
+
+  uploader.value.on('start', () => {
+    file.uploading = true
+    fileUploadStarted.value = true
+  })
+  uploader.value.on('progress', (data) => {
+    file.uploaded = data.uploaded
+    file.total = data.total
+  })
+  uploader.value.on('error', (error) => {
+    file.uploading = false
+    file.errorMessage = error || 'Error Uploading File'
+  })
+  uploader.value.on('finish', () => {
+    file.uploading = false
+  })
+
+  uploader.value
+    .upload(file, args || {})
+    .then(() => {
+      if (i === files.value.length - 1) {
+        files.value = []
+        show.value = false
+        fileUploadStarted.value = false
+      }
+    })
+    .catch((error) => {
+      file.uploading = false
+      let errorMessage = 'Error Uploading File'
+      if (error?._server_messages) {
+        errorMessage = JSON.parse(JSON.parse(error._server_messages)[0]).message
+      } else if (error?.exc) {
+        errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
+      } else if (typeof error === 'string') {
+        errorMessage = error
+      }
+      file.errorMessage = errorMessage
+    })
+}
+</script>
diff --git a/frontend/src/components/FilesUploader/FilesUploaderArea.vue b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
new file mode 100644
index 000000000..5d301254d
--- /dev/null
+++ b/frontend/src/components/FilesUploader/FilesUploaderArea.vue
@@ -0,0 +1,321 @@
+<template>
+  <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"
+    @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-for="file in files"
+      :key="file.name"
+      class="flex items-center justify-between py-3"
+    >
+      <div class="flex items-center gap-4">
+        <div
+          class="size-11 rounded overflow-hidden flex-shrink-0 flex justify-center items-center"
+          :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 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>
+</template>
+<script setup>
+import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
+import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
+import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
+import { createToast } from '@/utils'
+import { FormControl, CircularProgressBar, createResource } from 'frappe-ui'
+import { ref, onMounted } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const files = defineModel()
+
+const fileInput = ref(null)
+const isDragging = ref(false)
+const showWebLink = ref(true)
+const showFileBrowser = ref(true)
+
+const allowMultiple = ref(props.options.allowMultiple == false ? false : true)
+const disableFileBrowser = ref(props.options.disableFileBrowser || false)
+const allowWebLink = ref(props.options.allowWebLink == false ? false : true)
+const allowTakePhoto = ref(props.options.allowTakePhoto || false)
+const restrictions = ref(props.options.restrictions || {})
+const makeAttachmentsPublic = ref(props.options.makeAttachmentsPublic || false)
+
+onMounted(() => {
+  createResource({
+    url: 'crm.api.get_file_uploader_defaults',
+    params: { doctype: props.doctype },
+    cache: ['file_uploader_defaults', props.doctype],
+    auto: true,
+    transform: (data) => {
+      restrictions.value = {
+        allowedFileTypes: data.allowed_file_types
+          ? data.allowed_file_types.split('\n').map((ext) => `.${ext}`)
+          : [],
+        maxFileSize: data.max_file_size,
+        maxNumberOfFiles: data.max_number_of_files,
+      }
+      makeAttachmentsPublic.value = Boolean(data.make_attachments_public)
+    },
+  })
+})
+
+function dragover() {
+  isDragging.value = true
+}
+function dragleave() {
+  isDragging.value = false
+}
+function dropfiles(e) {
+  isDragging.value = false
+  addFiles(e.dataTransfer.files)
+}
+
+function browseFiles() {
+  fileInput.value.click()
+}
+
+function onFileInput(event) {
+  addFiles(fileInput.value.files)
+}
+
+function captureImage() {
+  //
+}
+
+function addFiles(fileArray) {
+  let _files = Array.from(fileArray)
+    .filter(checkRestrictions)
+    .map((file, i) => {
+      let isImage = file.type.startsWith('image')
+      let sizeKb = file.size / 1024
+      return {
+        index: i,
+        src: isImage ? URL.createObjectURL(file) : null,
+        fileObj: file,
+        cropperFile: file,
+        cropBoxData: null,
+        type: file.type,
+        optimize: sizeKb > 200 && isImage && !file.type.includes('svg'),
+        name: file.name,
+        doc: null,
+        progress: 0,
+        total: 0,
+        failed: false,
+        requestSucceeded: false,
+        errorMessage: null,
+        uploading: false,
+        private: !makeAttachmentsPublic.value,
+      }
+    })
+
+  // pop extra files as per FileUploader.restrictions.maxNumberOfFiles
+  let maxNumberOfFiles = restrictions.value.maxNumberOfFiles
+  if (maxNumberOfFiles && _files.length > maxNumberOfFiles) {
+    _files.slice(maxNumberOfFiles).forEach((file) => {
+      showMaxFilesNumberWarning(file, maxNumberOfFiles)
+    })
+
+    _files = _files.slice(0, maxNumberOfFiles)
+  }
+
+  files.value = files.value.concat(_files)
+}
+
+function checkRestrictions(file) {
+  let { maxFileSize, allowedFileTypes = [] } = restrictions.value
+
+  let isCorrectType = true
+  let validFileSize = true
+
+  if (allowedFileTypes && allowedFileTypes.length) {
+    isCorrectType = allowedFileTypes.some((type) => {
+      // is this is a mime-type
+      if (type.includes('/')) {
+        if (!file.type) return false
+        return file.type.match(type)
+      }
+
+      // otherwise this is likely an extension
+      if (type[0] === '.') {
+        return file.name.toLowerCase().endsWith(type.toLowerCase())
+      }
+      return false
+    })
+  }
+
+  if (maxFileSize && file.size != null) {
+    validFileSize = file.size < maxFileSize
+  }
+
+  if (!isCorrectType) {
+    console.warn('File skipped because of invalid file type', file)
+    createToast({
+      title: __('File "{0}" was skipped because of invalid file type', [
+        file.name,
+      ]),
+      icon: 'alert-circle',
+      iconClasses: 'text-orange-600',
+    })
+  }
+  if (!validFileSize) {
+    console.warn('File skipped because of invalid file size', file.size, file)
+    createToast({
+      title: __('File "{0}" was skipped because size exceeds {1} MB', [
+        file.name,
+        maxFileSize / (1024 * 1024),
+      ]),
+      icon: 'alert-circle',
+      iconClasses: 'text-orange-600',
+    })
+  }
+
+  return isCorrectType && validFileSize
+}
+
+function showMaxFilesNumberWarning(file, maxNumberOfFiles) {
+  console.warn(
+    `File skipped because it exceeds the allowed specified limit of ${maxNumberOfFiles} uploads`,
+    file,
+  )
+  let message = __(
+    'File "{0}" was skipped because only {1} uploads are allowed',
+    [file.name, maxNumberOfFiles],
+  )
+  if (props.doctype) {
+    message = __(
+      'File "{0}" was skipped because only {1} uploads are allowed for DocType "{2}"',
+      [file.name, maxNumberOfFiles, props.doctype],
+    )
+  }
+
+  createToast({
+    title: message,
+    icon: 'alert-circle',
+    iconClasses: 'text-orange-600',
+  })
+}
+
+function removeFile(name) {
+  files.value = files.value.filter((file) => file.name !== name)
+}
+
+function convertSize(size) {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let unitIndex = 0
+  while (size > 1024) {
+    size /= 1024
+    unitIndex++
+  }
+  return `${size.toFixed(2)} ${units[unitIndex]}`
+}
+
+function fileIcon(type) {
+  if (type.startsWith('audio')) {
+    return FileAudioIcon
+  } else if (type.startsWith('video')) {
+    return FileVideoIcon
+  }
+  return FileTextIcon
+}
+</script>
diff --git a/frontend/src/components/FilesUploader/filesUploaderHandler.ts b/frontend/src/components/FilesUploader/filesUploaderHandler.ts
new file mode 100644
index 000000000..59253b9de
--- /dev/null
+++ b/frontend/src/components/FilesUploader/filesUploaderHandler.ts
@@ -0,0 +1,129 @@
+interface UploadOptions {
+  file?: File
+  private?: boolean
+  fileUrl?: string
+  folder?: string
+  doctype?: string
+  docname?: string
+  type?: string
+}
+
+type EventListenerOption = 'start' | 'progress' | 'finish' | 'error'
+
+declare global {
+  interface Window {
+    csrf_token?: string
+  }
+}
+
+class FilesUploadHandler {
+  listeners: { [event: string]: Function[] }
+  failed: boolean
+
+  constructor() {
+    this.listeners = {}
+    this.failed = false
+  }
+
+  on(event: EventListenerOption, handler: Function) {
+    this.listeners[event] = this.listeners[event] || []
+    this.listeners[event].push(handler)
+  }
+
+  trigger(event: string, data?: any) {
+    let handlers = this.listeners[event] || []
+    handlers.forEach((handler) => {
+      handler.call(this, data)
+    })
+  }
+
+  upload(file: File | null, options: UploadOptions): Promise<any> {
+    return new Promise((resolve, reject) => {
+      let xhr = new XMLHttpRequest()
+      xhr.upload.addEventListener('loadstart', () => {
+        this.trigger('start')
+      })
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          this.trigger('progress', {
+            uploaded: e.loaded,
+            total: e.total,
+          })
+        }
+      })
+      xhr.upload.addEventListener('load', () => {
+        this.trigger('finish')
+      })
+      xhr.addEventListener('error', () => {
+        this.trigger('error')
+        reject()
+      })
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState == XMLHttpRequest.DONE) {
+          let error: any = null
+          if (xhr.status === 200) {
+            let r: any = null
+            try {
+              r = JSON.parse(xhr.responseText)
+            } catch (e) {
+              r = xhr.responseText
+            }
+            let out = r.message || r
+            resolve(out)
+          } else if (xhr.status === 403) {
+            error = JSON.parse(xhr.responseText)
+          } else if (xhr.status === 413) {
+            this.failed = true
+            error = 'Size exceeds the maximum allowed file size.'
+          } else {
+            this.failed = true
+            try {
+              error = JSON.parse(xhr.responseText)
+            } catch (e) {
+              // pass
+            }
+          }
+          if (error && error.exc) {
+            console.error(JSON.parse(error.exc)[0])
+          }
+          reject(error)
+        }
+      }
+
+      xhr.open('POST', '/api/method/upload_file', true)
+      xhr.setRequestHeader('Accept', 'application/json')
+
+      if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
+        xhr.setRequestHeader('X-Frappe-CSRF-Token', window.csrf_token)
+      }
+
+      let formData = new FormData()
+
+      if (options.file && file) {
+        formData.append('file', options.file, file.name)
+      }
+      formData.append('is_private', options.private || false ? '1' : '0')
+      formData.append('folder', options.folder || 'Home')
+
+      if (options.fileUrl) {
+        formData.append('file_url', options.fileUrl)
+      }
+
+      if (options.doctype) {
+        formData.append('doctype', options.doctype)
+      }
+
+      if (options.docname) {
+        formData.append('docname', options.docname)
+      }
+
+      if (options.type) {
+        formData.append('type', options.type)
+      }
+
+      xhr.send(formData)
+    })
+  }
+}
+
+export default FilesUploadHandler
diff --git a/frontend/src/components/Icons/FileAudioIcon.vue b/frontend/src/components/Icons/FileAudioIcon.vue
new file mode 100644
index 000000000..c93d8ca5f
--- /dev/null
+++ b/frontend/src/components/Icons/FileAudioIcon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-file-audio-2"
+  >
+    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v2" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    <circle cx="3" cy="17" r="1" />
+    <path d="M2 17v-3a4 4 0 0 1 8 0v3" />
+    <circle cx="9" cy="17" r="1" />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/FileVideoIcon.vue b/frontend/src/components/Icons/FileVideoIcon.vue
new file mode 100644
index 000000000..36b4fb2a8
--- /dev/null
+++ b/frontend/src/components/Icons/FileVideoIcon.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-file-video-2"
+  >
+    <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+    <rect width="8" height="6" x="2" y="12" rx="1" />
+    <path d="m10 15.5 4 2.5v-6l-4 2.5" />
+  </svg>
+</template>