Перетаскивание файла в React - PullRequest
0 голосов
/ 06 февраля 2020

Я выполнил задачу перетаскивания файла. Теперь я хочу изменить положение предварительного просмотра файла путем перетаскивания файла. Как мне это сделать? Я звоню 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>
        )
    }
}



Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...