Odtnhj

I create react-app before, and made a form for post. And i want post can be upload image (thumbnail). All data i sent to API, which i created with Express. But if i console log the thumbnail, api got undefined result.

The 1st inside my post api, i create function to initial the store using multer:

const storage = multer.diskStorage(
 destination: "./public/uploads/",
 filename: function(req, file, cb)
 cb(null,"IMAGE-" + Date.now() + path.extname(file.originalname))
 
)

const upload = multer(
 storage: storage,
 limits:fileSize: 1000000,
).single("thumbnail")

Then i created the route for edit post (example):

router.put('/post', (req, res) => 
 if(!req.query.id)
 return res.status(400).send('Missing URL parameter: id')
 

 upload(req, res, (err) => 
 console.log(req.file)
 )
)

Then, here's my code from react-app:

import React, Component from 'react'
import Swal from 'sweetalert2'
import Alert, Button, Card, CardBody, CardHeader, Col, Form, FormGroup, Label, Input, Row from 'reactstrap'
import Editor from 'react-simplemde-editor'
import dateFormat from 'dateformat'
import 'simplemde/dist/simplemde.min.css'
import AuthService from '../../../auth'
import './EditPosts.scss'

export default class EditPosts extends Component 
 constructor(props)
 super(props)
 let now = new Date()
 this.state = 
 postId: this.props.match.params.id,
 title: '',
 content: '',
 description: '',
 thumbnail: '',
 author: '',
 updatedAt: dateFormat(now, "mmmm dS, yyyy"),
 imagePreviewUrl: '',
 editError: ''
 

 this.onTextboxChangeTitle = this.onTextboxChangeTitle.bind(this)
 this.onTextboxChangeContent = this.onTextboxChangeContent.bind(this)
 this.onTextboxChangeDescription = this.onTextboxChangeDescription.bind(this)
 this.onUploadboxChange = this.onUploadboxChange.bind(this)
 this.onEdit = this.onEdit.bind(this)
 this.Auth = new AuthService()
 
 onTextboxChangeTitle(event)
 this.setState(
 title: event.target.value
 )
 

 onTextboxChangeContent(value) 
 this.setState(
 content: value
 )
 

 onTextboxChangeDescription(event)
 this.setState(
 description: event.target.value
 )
 

 onUploadboxChange(e)
 e.preventDefault()

 let reader = new FileReader()
 let thumbnail = e.target.files[0]

 reader.onloadend = () => 
 this.setState(
 thumbnail: thumbnail,
 imagePreviewUrl: reader.result
 );
 

 reader.readAsDataURL(thumbnail)
 

 componentDidMount()
 this.getPost()
 

 getPost()
 this.Auth.post(this.state.postId)
 .then((res) => 
 this.setState(
 title: res.title,
 content: res.content,
 description: res.description,
 thumbnail: res.thumbnail,
 author: res.author
 )
 )
 

 onEdit(e)
 e.preventDefault()

 const 
 postId,
 title,
 content,
 description,
 thumbnail,
 author,
 updatedAt
 = this.state

 const formData = new FormData()
 formData.append('thumbnail', thumbnail)

 this.Auth.edit(postId, title, content, description, formData, author, updatedAt)
 .then(res => 
 if(res.status >= 200 && res.status < 300)
 Swal(
 position: 'top-end',
 type: 'success',
 title: 'Your post has been update!',
 showConfirmButton: false,
 timer: 1500
 ).then(res =>
 // window.location.href = '/posts'
 )
 
 )
 

 render()
 let imagePreviewUrl, editError, title, content, description, thumbnail = this.state
 let $imagePreview = thumbnail
 if (imagePreviewUrl) 
 $imagePreview = (<img src=imagePreviewUrl alt="" />)
 else 
 $imagePreview = (<div className="previewText">Please select an Image for Post Cover</div>);
 
 return(
 <div className="animated fadeIn">
 <Card>
 <CardHeader>Edit post</CardHeader>
 <CardBody>
 <Form onSubmit=this.onEdit>
 
 (editError) ? (
 <Alert color="danger">editError</Alert>
 ): null
 
 <Row>
 <Col md=7>
 <FormGroup>
 <Label for="title">Edit Title</Label>
 <Input type="text" autoComplete="title" placeholder="Post Title" value= (title) ? title : '' onChange=this.onTextboxChangeTitle />
 </FormGroup>
 <FormGroup>
 <Label for="description">Description</Label>
 <Input type="textarea" autoComplete="description" placeholder="Description" value= (description) ? description : '' onChange=this.onTextboxChangeDescription />
 </FormGroup>
 <FormGroup>
 <Label for="content">Content</Label>
 <Editor 
 autoComplete="content"
 value= (content) ? content : '' 
 onChange=this.onTextboxChangeContent
 options=
 spellChecker: false 
 
 />
 </FormGroup>
 </Col>
 <Col md=5>
 <FormGroup>
 <Label for="thumbnail">Image Cover</Label>
 <Input type="file" autoComplete="thumbnail" onChange=this.onUploadboxChange />
 </FormGroup>
 <div className="imgPreview">
 $imagePreview
 </div>
 </Col>
 </Row>
 <Row>
 <Col className="text-right">
 <Button color="primary" className="px-4" type="submit" value="Submit">Save</Button>
 </Col>
 </Row>
 </Form>
 </CardBody>
 </Card>
 </div>
 )
 

Here's function to connect to api:

edit(id, title, content, description, thumbnail, author, updatedAt)
 return axios.put('http://localhost:3000/post?id='+id, 
 title,
 content,
 description,
 thumbnail,
 author,
 updatedAt
 )
 .then(this._checkStatus)
 .then(res => 
 return res
 )
 .catch(err => 
 throw err;
 )
 

i always got undefined when upload the image

Did i missed something in process upload the image? If someone know, please help. Thanks.