141 lines
4.2 KiB
JavaScript
141 lines
4.2 KiB
JavaScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
|
|
export default function QnaFileUploader({ uploadFiles, setUploadFiles, qnaData, setQnaData }) {
|
|
const fileInputRef = useRef(null)
|
|
const { getMessage } = useMessage()
|
|
|
|
const { swalFire } = useSwal()
|
|
|
|
const handleButtonClick = (e) => {
|
|
e.preventDefault()
|
|
fileInputRef.current.click()
|
|
}
|
|
|
|
const onChangeFiles = async (e) => {
|
|
if (e.target.files.length <= 0) {
|
|
return
|
|
}
|
|
|
|
const fileList = []
|
|
let passFlag = true
|
|
const allowedFileTypes = [
|
|
'image/',
|
|
'application/pdf',
|
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
'application/vnd.ms-excel',
|
|
'application/vnd.openxmlformats-officedocument.presentationml.presentation', // PPTX 형식
|
|
'application/vnd.ms-powerpoint', // PPT 형식
|
|
]
|
|
Array.from(e.target.files).forEach((file) => {
|
|
//엑셀, pdf, 이미지
|
|
const fileType = file.type
|
|
if (!allowedFileTypes.some((type) => fileType.includes(type))) {
|
|
passFlag = false
|
|
} else {
|
|
fileList.push({ data: file, id: uuidv4() })
|
|
}
|
|
})
|
|
|
|
if (!passFlag) {
|
|
swalFire({ text: getMessage('estimate.detail.fileList.extCheck'), type: 'alert', icon: 'error' })
|
|
}
|
|
|
|
setUploadFiles([...uploadFiles, ...fileList])
|
|
setQnaData({...qnaData, files:[...uploadFiles, ...fileList]})
|
|
e.target.value = ''
|
|
}
|
|
|
|
const deleteFile = (id) => {
|
|
setUploadFiles(uploadFiles.filter((file) => file.id !== id))
|
|
setQnaData({...qnaData, files:uploadFiles.filter((file) => file.id !== id)})
|
|
}
|
|
|
|
const handleDrop = (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
const fileList = []
|
|
let passFlag = true
|
|
const allowedFileTypes = [
|
|
'image/',
|
|
'application/pdf',
|
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
'application/vnd.ms-excel',
|
|
'application/vnd.openxmlformats-officedocument.presentationml.presentation', // PPTX 형식
|
|
'application/vnd.ms-powerpoint', // PPT 형식
|
|
]
|
|
|
|
Array.from(e.dataTransfer.files).forEach((file) => {
|
|
//엑셀, pdf, 이미지
|
|
let fileType = file.type
|
|
if (!allowedFileTypes.some((type) => fileType.includes(type))) {
|
|
passFlag = false
|
|
} else {
|
|
fileList.push({ data: file, id: uuidv4() })
|
|
}
|
|
})
|
|
|
|
if (!passFlag) {
|
|
swalFire({ text: getMessage('estimate.detail.fileList.extCheck'), type: 'alert', icon: 'error' })
|
|
}
|
|
|
|
setUploadFiles([...uploadFiles, ...fileList])
|
|
setQnaData({...qnaData, files:[...uploadFiles, ...fileList]})
|
|
}
|
|
|
|
const handleDragOver = (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
const handleDragEnd = (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
const handleDragLeave = (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return (
|
|
|
|
<div className="design-request-grid mt15">
|
|
<div className="design-request-count">
|
|
<div className="design-request-grid-tit">{getMessage("qna.reg.header.fileList")}</div>
|
|
<div className="btn-area one-on-one">
|
|
<label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
|
|
Attach File
|
|
</label>
|
|
<input type="file" multiple name="file" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
|
|
</div>
|
|
</div>
|
|
<div className="drag-file-box one-on-one">
|
|
<div className="drag-file-area"
|
|
draggable
|
|
onDrop={(e) => handleDrop(e)}
|
|
onDragOver={(e) => handleDragOver(e)}
|
|
onDragEnd={(e) => handleDragEnd(e)}
|
|
onDragLeave={(e) => handleDragLeave(e)}>
|
|
<p>Drag file here</p>
|
|
<ul className="file-list">
|
|
{uploadFiles.length > 0 &&
|
|
uploadFiles.map((file) => (
|
|
<li className="file-item" key={file.id}>
|
|
<span>
|
|
{file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
}
|