I am trying to upload files in ReactJs . I need to implement a Little file Preview where a user can see the file he is about to upload Unfortunately, this preview is not working because I do not get the relative path of the file from the users computer from my file Array. Here is my Code for the file add function
onFilesAdded(files) {
console.log(files);
this.setState(prevState => ({
files: prevState.files.concat(files)
}));
}
here is my render with my dropzone with the idea of attaching my files
return (
<Card className="space-above">
<CardBody>
<form name="form" onSubmit={this.handleSubmit}>
<div className="Upload">
<span className="Title">Change Profile Picture</span>
<div className="Content">
<div>
<Dropzone
onFilesAdded={this.onFilesAdded}
/>
</div>
<div className="Files">
<Fragment>
{this.state.files.map(file => {
return (
<div key={file.name} className="Row">
<img
alt="Preview"
key={file.name}
src={file.name}
style={previewStyle}
/>
{console.log(file)}
<span className="Filename">{file.name}</span>
{this.renderProgress(file)}
</div>
);
})}
</Fragment>
</div>
</div>
</div>
With the preview section.
Secondly, when I submit this files to my PHP Server, I am not able to receive the files. It returns no files found as the file value is an empty array.
Here is my code for the entire process. Any Help on this will be greatly appreciated or pointers.
import React, { Component,Fragment } from 'react';
import {Button, Card, CardBody} from 'mdbreact';
import request from 'superagent';
import Dropzone from "./dropzone/Dropzone";
import { Line } from 'rc-progress';
import Progress from "./progress/Progress";
import { Trans} from '@lingui/macro';
import { apiConstants } from '../_constants';
import { connect } from 'react-redux';
//this component is to upload a file into my server
class Muzikolupload extends Component {
constructor(props) {
super(props);
this.state = {
files: [],
uploading: false,
uploadProgress: {},
successfullUploaded: false
};
this.onFilesAdded = this.onFilesAdded.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
onFilesAdded(files) {
console.log(files);
this.setState(prevState => ({
files: prevState.files.concat(files)
}));
}
//Handling Submision
handleSubmit(event) {
event.preventDefault();
const {user} = this.props;
let authKey = user.auth_key;
const {files} = this.state;
if (files.length>0) {
this.setState({ submitted: true,nofile:false });
//sent to my server now using
let req = request.post(apiConstants.API_GENERAL_URL+'changepbackpic?access-token='+authKey);
req.on('progress', event => {
let percent = Math.floor(event.percent);
if (percent >= 100) {
this.setState({ percent: 100 });
} else {
this.setState({ percent: percent });
}
});
const that = this;
req.send(this.state);
req.end((err, res) => {
if(err){
console.log('error occured during file uploading', err);
this.setState({
completed:true,
message:'Field During Upload',
submitted:false,
files:[]
})
}
if(res){
console.log('successfullUploaded', res);
this.setState({
completed:true,
message:'File succesfully uploaded',
submitted:false,
files:[]
})
}
});
}
else{
this.setState({ nofile: true, submitted: false });
}
}
renderProgress(file) {
const uploadProgress = this.state.uploadProgress[file.name];
if (this.state.uploading || this.state.successfullUploaded) {
return (
<div className="ProgressWrapper text-center">
<Progress progress={uploadProgress ? uploadProgress.percentage : 0} />
Drag and Drop or open to Change Picture
</div>
);
}
}
render() {
const previewStyle = {
display: 'inline',
width: 100,
height: 100,
};
return (
<Card className="space-above">
<CardBody>
<form name="form" onSubmit={this.handleSubmit}>
<div className="Upload">
<span className="Title">Change Profile Picture</span>
<div className="Content">
<div>
<Dropzone
onFilesAdded={this.onFilesAdded}
/>
</div>
<div className="Files">
<Fragment>
{this.state.files.map(file => {
return (
<div key={file.name} className="Row">
<img
alt="Preview"
key={file.name}
src={file.name}
style={previewStyle}
/>
{console.log(file)}
<span className="Filename">{file.name}</span>
{this.renderProgress(file)}
</div>
);
})}
</Fragment>
</div>
</div>
</div>
{this.state.submitted &&
<Line percent={this.state.percent} strokeWidth='1' strokeColor='#2db7f5' strokeLinecap='square' />
}
{this.state.completed &&
<div className="help-block">
{this.state.message}
</div>
}
{this.state.nofile &&
<div className="help-block">
Please Attach a Picture
</div>
}
<div >
<Button type="submit" onClick={this.handleSubmit} className=" site-secondary-back btn-block" ><Trans>Submit</Trans></Button>
</div>
</form>
</CardBody>
</Card>
);
}
}
function mapStateToProps(state) {
const {user} = state.authentication;
return {
user,
};
}
export default connect(
mapStateToProps,
)(Muzikolupload)
