Я выполнил задачу перетаскивания файла. Теперь я хочу изменить положение предварительного просмотра файла путем перетаскивания файла. Как мне это сделать? Я звоню OnFileLoad на onDrop. Я беру файл ввода с тегом ввода. Это нормально работает для onDrag onDrop и Preview. Но я хочу изменить предварительный просмотр и изменить его положение. Спасибо
export class Core extends React.Component{
constructor(props){
super(props)
//Setting the state
this.state = {
loadedFiles:[],
};
};
onFileLoad(e) {
const file = e.currentTarget.files[0];
let fileReader = new FileReader();
fileReader.onload = () => {
console.log("Image Loaded: ", fileReader.result);
const file = {
data: fileReader.result,
isUploading:false
}
this.addLoadedFile(file);
}
fileReader.onabort = () => {
alert("Reading Aborted");
}
fileReader.onerror = () => {
alert("Error in Reading")
}
fileReader.readAsDataURL(file);
}
addLoadedFile(file){
this.setState((prevState) => ({ loadedFiles: [...prevState.loadedFiles, file]}));
}
removeLoadedFile(file){
this.setState((prevState) => {
let loadedFiles = prevState.loadedFiles;
let newLoadedFiles = _.filter(loadedFiles, (ldFile) => {
return ldFile!=file;
});
return { loadedFiles : newLoadedFiles }
});
}
removeAllLoadedFile(){
this.setState({loadedFiles : []});
}
render(){
const { loadedFiles } = this.state;
return(
<div>
<div className="header">
</div>
<div className="function">
<div className="tools">
<button className="button"
onClick={()=>this.fileInput.click()}
>
Components
</button>
</div>
<div className="grid">
<input
type="file"
id="file-browser-input"
name="file-browser-input"
ref ={input=>this.fileInput=input}
onDragOver={(e)=>{
e.preventDefault();
e.stopPropagation();
}
}
onDrop={this.onFileLoad.bind(this)}
onChange={this.onFileLoad.bind(this)}
/>
<div className="files-preview-container">
{loadedFiles.map((file,idx) => {
return <div
className="file"
key={idx}
>
<img src = {file.data}/>
<div className="container">
<span className="progress-bar">
{file.isUploading && <ProgressBar/>}
</span>
</div>
</div>
})}
</div>
</div>
<div className="ui">
</div>
</div>
<div className="footer">
</div>
</div>
)
}
}