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