title: React-Dropzone not uploading File to AWS S3
body: <p>So I have downloaded the library of react-dropzone and I'm trying to use in a component that will act as a parent....</p>
  <p>This is the logic code that I have for the parent component:</p>
  <pre><code>    const [uploadPercentage, setUploaderPercentage] = useState(0); // Done
      const [ID, setID] = useState(0);
      const [file, setFile] = useState(null); // Done
      const [poster, setPoster] = useState(null);
      const [fileURL, setFileURL] = useState('');
      const [isDropzone, setIsDropzone] = useState(true); // Done
      const [isDisabled, setIsDisabled] = useState(true); // Done
  
      const onDropVideo = files =&gt; {
          setFile({ file: files[0] });
      }
  
      const onDropPoster = files =&gt; {
          setPoster({ posterFile: files[0] });
      }
  
      const handleUploadVideo = async e =&gt; {
          e.preventDefault();
          setIsDropzone(true); // Currently true because of testing purposes
          console.log(file?.file);
          await uploadObject(file?.file, setUploaderPercentage); // DOES NOT RETURN ANYTHING
          // setFileURL(getURL.uploadConfig.data.getURL);
      }
  </code></pre>
  <p>So far, everything is good. Then I'm passing props into the Dropzone like this:</p>
  <pre><code>&lt;UploadDropzone name={`video_url`} id={`video_url`} onDrop={onDropVideo} file={file} handleUpload={handleUploadVideo} /&gt;
  </code></pre>
  <p>The props are easy to understand, React-Dropzone takes a prop called onDrop, into that function, I then pass the function of onDrop video which sets the selected file into state. The file prop takes that file and uses to display some info regarding the file.</p>
  <p>So far everything looks good, then the problem comes when trying to trigger the handleUploadVideo by clicking a button. That button should then trigger said function and should take the file from state and upload it into S3. But its not returning anything at all.</p>
  <p>Now the UploadDropzone looks exactly like this:</p>
  <pre><code>const UploadDropzone = ({ name, id, multiple, accept, onDrop, file, handleUpload }) =&gt; {
  
      const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({ onDrop });
  
      return (
          &lt;div className={`dropzone-root`}&gt;
              &lt;div {...getRootProps()}&gt;
                  &lt;input {...getInputProps({ name, id, multiple, accept })} /&gt;
                  &lt;img
                      src={`https://s3-us-west-1.amazonaws.com/youtube-clone-assets/upload-background.svg`}
                      alt={`upload`}
                      className={`dropzone-image`}
                  /&gt;
                  &lt;Typography variant={`h6`} color={`inherit`}&gt;{file?.file.name}&lt;/Typography&gt;
                  &lt;br /&gt;
                  {!isDragActive &amp;&amp; (&lt;Typography variant={`h6`} color={`inherit`}&gt;Or drag and drop video files&lt;/Typography&gt;)}
                  {isDragActive &amp;&amp; !isDragReject &amp;&amp; (&lt;Typography variant={`h6`} color={`inherit`}&gt;Drop it like it's hot!&lt;/Typography&gt;)}
                  {isDragReject &amp;&amp; (&lt;Typography variant={`h6`} color={`inherit`}&gt;File type not accepted, sorry!&lt;/Typography&gt;)}
                  {file &amp;&amp; (
                      &lt;Typography variant={`body2`} color={`inherit`} style={{ marginTop: '2vh' }}&gt;File: {file?.file.name}&lt;/Typography&gt;
                  )}
              &lt;/div&gt;
              {file &amp;&amp; (
                  &lt;Button
                      type={`submit`}
                      variant={`dark`}
                      size={`sm`}
                      className={`dropzone-upload`}
                      onClick={handleUpload}
                  &gt;
                      Upload
                  &lt;/Button&gt;
              )}
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>The button that I'm talking about is by the end of the component. I click on it, then the function of hanldeUploadVideo gets triggered and displays the file selected via console.log() so that for sure is letting me know that my logic is supposed to be good, the problem is when I try to pass the file into the function uploadObject.......it does not returns anything. Here it is my function:</p>
  <pre><code>export const uploadObject = (file, setUploadPercentage) =&gt; async dispatch =&gt; {
      try {
  
        console.log(file); // I CAN NOT EVEN READ THE FILE FROM HERE.
    
        // const token = localStorage.getItem(&quot;xAuthToken&quot;);
        // api.defaults.headers.common[&quot;Authorization&quot;] = `Bearer ${token}`
    
        const uploadConfig = await api.get(`/uploads/uploadObject?name=${file.name}&amp;type=${file.type}&amp;size=${file.size}`);
        
        // delete api.defaults.headers.common['Authorization'];
    
        await api.put(uploadConfig.data.postURL, file, {
          headers: {
            'Content-Type': file.type
          },
          onUploadProgress: ProgressEvent =&gt; {
            setUploadPercentage(
              parseInt(Math.round(ProgressEvent.loaded * 100) / ProgressEvent.total)
            );
            // Clear percentage
            setTimeout(() =&gt; setUploadPercentage(0), 10000);
          }
        });
    
        // api.defaults.headers.common[&quot;Authorization&quot;] = `Bearer ${token}`;
  
        return uploadConfig;
    
      //   dispatch({
      //     type: ADD_POST,
      //     payload: res.data
      //   });
    
      //   dispatch(setAlert('Video Created', 'success'));
      } catch (err) {
        const errors = err.response.data.errors;
    
        if (errors) {
          errors.forEach(error =&gt; dispatch(setAlert(error.msg, 'danger')));
        }
    
      //   dispatch({
      //     type: POST_ERROR,
      //     payload: { msg: err.response &amp;&amp; err.response.statusText, status: err.response &amp;&amp; err.response.status }
      //   });
      }
    };
  </code></pre>
  <p>Thank you!!.</p>
  <p>UPDATE:</p>
  <p>There was nothing wrong with the logic, its jsut that I have forgotten to declare the function in the component propTypes xD:</p>
  <pre><code>Add.propTypes = {
      addVideo: PropTypes.func.isRequired,
      uploadObject: PropTypes.func.isRequired
  }
  
  const mapStateToProps = state =&gt; ({});
    
  export default connect(mapStateToProps, { addVideo, uploadObject })(withRouter(Add));
  </code></pre>
  <p>Thanks xD.</p>