title: formidable error: bad content-type header, unknown content-type: text/plain;charset=UTF-8
body: <p>I'm receiving this error: <code>Error: bad content-type header, unknown content-type: text/plain;charset=UTF-8</code> when trying to upload a photo using Formidable. When I console.log <code>fields</code> and <code>files</code>, I receive two empty objects.</p>
  <p>What do I need to change to solve this and upload the photo?</p>
  <p>CreatePost.js</p>
  <pre><code>const CreatePost = () =&gt; {
    const [values, setValues] = useState({
      title: &quot;&quot;,
      body: &quot;&quot;,
      photo: &quot;&quot;,
      error: &quot;&quot;,
      createdPost: &quot;&quot;,
      formData: &quot;&quot;,
    });
    const { user, token } = isAuthenticated();
    const {
      title,
      body,
      error,
      createdPost,
      formData,
    } = values;
  
    const handleChange = (name) =&gt; (event) =&gt; {
      const value = name === &quot;photo&quot; ? event.target.files[0] : event.target.value;
      setValues({ ...values, [name]: value, formData: new FormData() });
    };
  
    const clickSubmit = (event) =&gt; {
      event.preventDefault();
      setValues({ ...values, error: &quot;&quot; });
  
      createPost(user._id, token, formData).then((data) =&gt; {
        if (data.error) {
          setValues({ ...values, error: data.error });
        } else {
          setValues({
            ...values,
            title: &quot;&quot;,
            body: &quot;&quot;,
            photo: &quot;&quot;,
            createdPost: data.title,
          });
        }
      });
    };
  
    const newPostForm = () =&gt; (
      &lt;form className=&quot;mb-3&quot; onSubmit={clickSubmit}&gt;
        &lt;h4&gt;Post Photo&lt;/h4&gt;
        &lt;div className=&quot;form-group&quot;&gt;
          &lt;label className=&quot;btn btn-secondary&quot;&gt;
            &lt;input
              onChange={handleChange(&quot;photo&quot;)}
              type=&quot;file&quot;
              name=&quot;photo&quot;
              accept=&quot;image/*&quot;
            /&gt;
          &lt;/label&gt;
        &lt;/div&gt;
  
        &lt;div className=&quot;form-group&quot;&gt;
          &lt;label className=&quot;text-muted&quot;&gt;Title&lt;/label&gt;
          &lt;input
            onChange={handleChange(&quot;title&quot;)}
            type=&quot;text&quot;
            className=&quot;form-control&quot;
            value={title}
          /&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;label&gt;Post body&lt;/label&gt;
          &lt;textarea
            onChange={handleChange(&quot;body&quot;)}
            value={body}
          /&gt;
        &lt;/div&gt;
  
        &lt;button&gt;Create Post&lt;/button&gt;
      &lt;/form&gt;
    );
    const showError = () =&gt; (
      &lt;div
        style={{ display: error ? &quot;&quot; : &quot;none&quot; }}&gt;
        {error}
      &lt;/div&gt;
    );
  
    const showSuccess = () =&gt; (
      &lt;div
        style={{ display: createdPost ? &quot;&quot; : &quot;none&quot; }}&gt;
        &lt;h2&gt;{`${createdPost} is created!`}&lt;/h2&gt;
      &lt;/div&gt;
    );
  
   
  
    return (
        &lt;div&gt;
          &lt;div&gt;
            {showSuccess()}
            {showError()}
            {newPostForm()}
          &lt;/div&gt;
        &lt;/div&gt;
    );
  };
  
  export default CreatePost;
  </code></pre>
  <p>API request (create post)</p>
  <pre><code>export const createPost = (userId, post, token) =&gt; {
      return fetch(`${API}/blog/post/${userId}`, {
          method: 'POST',
          headers: {
              Accept: 'application/json',
              Authorization: `Bearer ${token}`
          },
          body: post
      })
          .then(response =&gt; {
              return response.json();
          })
          .catch(err =&gt; {
              console.log(err);
          });
  };
  </code></pre>
  <p>controllers/posts.js</p>
  <pre><code>exports.create = (req, res) =&gt; {
    let form = new formidable()
    form.keepExtensions = true
    form.parse(req, (err, fields, files) =&gt; {
    if(err) {
      console.log(err)
        return res.status(400).json({
            error: 'Image could not be uploaded'
        })
    }
    
    const { title, body } = fields
    console.log(fields)
    if (!title || !body) {
    return res.status(400).json({
        error: &quot;All fields are required&quot;
    })
    }
    
    let post = new Post(fields)
    
    if(files.photo) {
        if (files.photo.size &gt; 1000000) {
            return res.status(400).json({
                error: &quot;Image should be less than 1MB in size.&quot;
            })
        }
        post.photo.data = fs.readFileSync(files.photo.path)
    post.photo.contentType = files.photo.type
    }
    post.save((err, result) =&gt; {
    if(err) {
    return res.status(400).json({
        error: errorHandler(err)
    })
    }
    res.json(result)
    })
    })
    }
  
  exports.photo = (req, res, next) =&gt; {
    if (req.post.photo.data) {
        res.set('Content-Type', req.post.photo.contentType)
        return res.send(req.post.photo.data)
    }
    next()
  }
  </code></pre>