title: Handling File Upload state in React with hooks
body: <p>I am making a form that contains a couple text inputs and one file upload input. I am uncertain how to set the state reflecting an array of what photos have been uploaded. And then how to use the value of said state to make a POST request. In theory, I want to be able to upload a few photos, capture the value of these and set it as the files state and then post the array of info to the endpoint.</p>
  
  <pre><code>function NewItem(props) {
  
  
  const history = useHistory();
    const { classes } = props;
    const { isDarkMode } = useContext(ThemeContext);
    const { token } = useContext(LoggedInContext);
  
    const [itemNameValue, handleItemNameChange, resetItemName] = InputState("");
    const [itemPriceValue, handlePriceChange, resetPriceUrl] = InputState("");
    const [
      itemDescriptionValue,
      handleItemDescriptionChange,
      resetItemDescription
    ] = InputState("");
  
    const [fileState, setFileState] = useState([]);
  
    const handleFileUpload = e =&gt; {
      setFileState(e.target.files[0]);
    };
  
    const handleNewItemSubmit = e =&gt; {
      e.preventDefault();
      fetch("http://localhost:8181/items", {
        body: JSON.stringify({
          title: itemNameValue,
          price: itemPriceValue,
          description: itemDescriptionValue,
          photos: fileState
        }),
        headers: {
          "Content-Type": "application/json",
          Token: token
        },
        method: "POST"
      })
        .then(res =&gt; res.json())
        .then(data =&gt; {
          console.log(data);
          handleSnackbarClick();
        });
    };
    return (
      &lt;PageContent&gt;
        &lt;Navbar /&gt;
        &lt;h1 className={classes.heading} style={{ color: isDarkMode &amp;&amp; "white" }}&gt;
          New Item
        &lt;/h1&gt;
        &lt;form
          className={classes.newForm}
          noValidate
          autoComplete="off"
          onSubmit={handleNewItemSubmit}
        &gt;
  
          &lt;TextField
            id="outlined-desc"
            label="Facebook Item Description"
            variant="outlined"
            multiline={true}
            rows={4}
            rowsMax={8}
            onChange={handleItemDescriptionChange}
            value={itemDescriptionValue}
            InputLabelProps={{
              classes: {
                root: isDarkMode &amp;&amp; classes.cssLabel,
                focused: classes.cssFocused
              }
            }}
            InputProps={{
              classes: {
                root: isDarkMode &amp;&amp; classes.cssOutlinedInput,
                focused: classes.cssFocused,
                notchedOutline: isDarkMode &amp;&amp; classes.notchedOutline,
                input: isDarkMode &amp;&amp; classes.multilineColor
              }
            }}
          /&gt;
          &lt;div className={classes.photo_groups}&gt;
            &lt;input
              accept="image/*"
              className={classes.input}
              style={{ display: "none" }}
              id="raised-button-file"
              multiple
              type="file"
              onChange={handleFileUpload}
            /&gt;
            &lt;label htmlFor="raised-button-file"&gt;
              &lt;Button
                variant="raised"
                component="span"
                className={classes.button}
              &gt;
                Photo Upload
              &lt;/Button&gt;
            &lt;/label&gt;
            &lt;GroupCheckbox /&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/PageContent&gt;
    );
  }
  </code></pre>