UI 모드에서 React 및 FineUploader 5.14.2-rc1을 사용합니다. 업로드는 훌륭하게 작동하지만 표시되는 미리보기 이미지는 일관성이 없습니다. 구성 요소를 클릭하고 시스템 파일 선택 대화 상자에서 파일을 선택하면 파일이 이미지의 축소판으로 표시됩니다. 그러나 동일한 파일을 드래그하여 구성 요소에 놓으면 이미지 축소판이 아닌 일반 파일 아이콘이 표시됩니다. 이 구성 문제가 있다고 가정하고 있지만 문서에서 아무것도 찾을 수 없습니다. 여기에 관련된 구성 요소는 다음과 같습니다FineUploader UI는 파일 선택시 썸네일을 표시하지만 드래그 앤 드롭은 수행하지 않습니다.
import FineUploaderS3 from 'fine-uploader-wrappers/s3'
import Gallery from 'react-fine-uploader'
export default class FileUploader extends React.Component {
constructor(props){
super(props)
this.state = {
showModal: props.showModal || false,
fileName: props.fileName,
s3Key: props.s3Key,
title: props.title,
description: props.description,
fileUrl: props.fileUrl,
success: props.success || true,
}
let uploaderInstance = null
this.uploader =() =>{
uploaderInstance = new FineUploaderS3({
options: {
chunking: {
enabled: true
},
resume: {
enabled: true
},
request: {
endpoint: 'http://ourbucketurl',
accessKey: ourAccessKeyId,
},
signature: {
endpoint: '/api/s3handler',
},
uploadSuccess: {
endpoint: '/api/s3uploadsuccess',
},
callbacks: {
onComplete: this.uploadCompleteHandler
},
}
})
return uploaderInstance
}
this.uploadCompleteHandler = (id, name, responseJSON) => {
this.setState({showModal: responseJSON.success,
s3Key: responseJSON.key,
fileName: responseJSON.name,
fileUrl: `https://ourbucketurl/${responseJSON.key}`})
}
render() {
return <div>
<Gallery uploader={this.uploader()} />
</div>
}
}
난 아무데도이 구성 요소를 넣을 수 있습니다 및 파일은 문제없이 업로드 할 수 있습니다.
브라우저에 관계없이 문제가 발생합니다. 사용자가 업로드 작업을 호출하는 방법에 관계없이 축소판을 일관되게 표시하려면 무엇을해야합니까?
여기에 파일 놓기 또는 파일 입력 요소 또는 UI를 지원하는 코드가 표시되지 않습니다. –
충분합니다. 더 많은 문맥을 포함하도록 질문을 업데이트했습니다. – damion