Ndtyjky

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.