index.coffee 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. if globalThis.stylFns and globalThis.stylFns['app/components/Admin/FileUpload/index.styl']
  2. styleElement = document.createElement('style')
  3. styleElement.type = 'text/css'
  4. styleElement.textContent = globalThis.stylFns['app/components/Admin/FileUpload/index.styl']
  5. document.head.appendChild(styleElement)
  6. module.exports =
  7. name: 'file-upload'
  8. props:
  9. accept:
  10. type: String
  11. default: '.csv,.xlsx,.xls'
  12. multiple:
  13. type: Boolean
  14. default: false
  15. maxSize:
  16. type: Number
  17. default: 10485760 # 10MB
  18. data: ->
  19. {
  20. isDragging: false
  21. selectedFiles: []
  22. uploadProgress: 0
  23. isUploading: false
  24. }
  25. methods:
  26. onDragOver: (event) ->
  27. event.preventDefault()
  28. @isDragging = true
  29. onDragLeave: (event) ->
  30. event.preventDefault()
  31. @isDragging = false
  32. onDrop: (event) ->
  33. event.preventDefault()
  34. @isDragging = false
  35. files = Array.from(event.dataTransfer.files)
  36. @handleFiles(files)
  37. onFileSelect: (event) ->
  38. files = Array.from(event.target.files)
  39. @handleFiles(files)
  40. handleFiles: (files) ->
  41. validFiles = files.filter (file) =>
  42. if file.size > @maxSize
  43. @$emit('error', `Файл ${file.name} слишком большой. Максимальный размер: ${@maxSize / 1048576}MB`)
  44. return false
  45. if @accept and !@isFileTypeAccepted(file)
  46. @$emit('error', `Файл ${file.name} имеет недопустимый тип`)
  47. return false
  48. return true
  49. if @multiple
  50. @selectedFiles = [...@selectedFiles, ...validFiles]
  51. else
  52. @selectedFiles = validFiles.slice(0, 1)
  53. @$emit('select', @selectedFiles)
  54. isFileTypeAccepted: (file) ->
  55. acceptTypes = @accept.split(',').map (type) -> type.trim()
  56. return acceptTypes.some (type) =>
  57. if type.startsWith('.')
  58. return file.name.toLowerCase().endsWith(type.toLowerCase())
  59. else
  60. return file.type.match(type)
  61. removeFile: (index) ->
  62. @selectedFiles.splice(index, 1)
  63. @$emit('select', @selectedFiles)
  64. uploadFiles: ->
  65. if @selectedFiles.length == 0
  66. @$emit('error', 'Нет файлов для загрузки')
  67. return
  68. @isUploading = true
  69. @uploadProgress = 0
  70. # Имитация загрузки
  71. interval = setInterval (=>
  72. @uploadProgress += 10
  73. if @uploadProgress >= 100
  74. clearInterval(interval)
  75. @isUploading = false
  76. @$emit('upload', @selectedFiles)
  77. @selectedFiles = []
  78. ), 100
  79. getFileIcon: (file) ->
  80. if file.type.includes('spreadsheet') or file.name.includes('.csv')
  81. return '📊'
  82. else if file.type.includes('image')
  83. return '🖼️'
  84. else
  85. return '📄'
  86. render: (new Function '_ctx', '_cache', globalThis.renderFns['app/components/Admin/FileUpload/index.pug'])()