react-dropzoneを使用しようとしていますが、ゾーンにドラッグされたフォルダーのすべての画像を読み取ろうとしています。
彼らには例があるようです。
const { getDroppedOrSelectedFiles } = require('html5-file-selector')
class FolderDropzone extends React.Component {
constructor() {
super()
this.state = { files: [] }
}
onDrop(files) {
this.setState({
files
})
}
render() {
return (
<section>
<div className="dropzone">
<Dropzone
getDataTransferItems={evt => getDroppedOrSelectedFiles(evt).then(files => files)}
onDrop={this.onDrop.bind(this)}
>
<p>Drop a folder with files here.</p>
</Dropzone>
</div>
<aside>
<h2>Dropped files and folders</h2>
<ul>
{this.state.files.map(f => (
<li key={f.name}>
{f.fullPath} - {f.size} bytes
</li>
))}
</ul>
</aside>
</section>
)
}
}
しかし、動作しているようには見えず、どのサードパーティのプラグインが使用されているかもわかりません。
私のローカルコピーはこのエラーを受け取ります
index.js:249 Failed to generate preview for file {fileObject: File(180093), fullPath: "1.jpeg", lastModified: 1538421964806, lastModifiedDate: Mon Oct 01 2018 12:26:04 GMT-0700 (Pacific Daylight Time), name: "1.jpeg", …} TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at index.js:246
at Array.forEach (<anonymous>)
at index.js:243
fileList.forEach(function (file) {
if (!disablePreview) {
try {
file.preview = window.URL.createObjectURL(file); // eslint-disable-line no-param-reassign
} catch (err) {
if (process.env.NODE_ENV !== 'production') {
console.error('Failed to generate preview for file', file, err); // eslint-disable-line no-console
}
}
}