I've created form that lets user to drop some images and preview them. Now I want to send these images to my database. I'm using axios for sending all my data to php file. Here is my component that collects images:
import React from 'react';
import Dropzone from 'react-dropzone';
import {ImagePreview} from './ImagePreview';
export const ImageInput = (props) => {
const imagePreviews = props.images.map(image => {
return <ImagePreview key={image.id} image={image} onDelete={props.deleteImage}/>
})
return (
<div>
<Dropzone
className="dropzone"
multiple={true}
accept="image/*"
onDrop={props.addImage}>
<p>drop here</p>
</Dropzone>
<ul>
{imagePreviews}
</ul>
</div>
)
}
I'm storing them in state inside parent component using this function:
addImage = (images) => {
const { recipe } = this.state;
images.map(image => {
let img = {id:Math.random().toString(36).substr(2, 9),image:image}
recipe.images = [...recipe.images,img]
})
this.setState({ recipe });
}
and here is how I'm displaying them to user:
import React,{Component} from 'react';
export class ImagePreview extends React.Component {
constructor() {
super();
this.state= {imagePreviewUrl: ''}
}
componentWillMount() {
let reader = new FileReader();
reader.readAsDataURL(this.props.image.image)
reader.onloadend = () => {
this.setState({imagePreviewUrl: reader.result})
}
}
render(){
return (
<li className="">
<img className="image-preview" src={this.state.imagePreviewUrl} />
<button onClick={()=>this.props.onDelete(this.props.image.id)}>delete </button>
</li>
)
}
}
How should I send them to my php file?