title: reactjs - redux form and material ui framework — drag and drop file uploader
body: <p>I am building a nested form framework that uses the redux form and material ui framework -- I've built the components here to date - <a href="https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js" rel="nofollow noreferrer">https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js</a></p>
  <p>what I would like to do - is add an upload field - I've seen this example.
  <a href="https://stackoverflow.com/questions/40589302/how-to-enable-file-upload-on-reacts-material-ui-simple-input">How to enable file upload on React&#39;s Material UI simple input?</a></p>
  <pre><code>&lt;Button
    variant=&quot;contained&quot;
    component=&quot;label&quot;
  &gt;
    Upload File
    &lt;input
      type=&quot;file&quot;
      style={{ display: &quot;none&quot; }}
    /&gt;
  &lt;/Button&gt;
  </code></pre>
  <p>but in particular something that's more like a dragdrop. -- is there something that could be built more bespoke and cleaner without having to install another module that maybe has forced styles.</p>
  <p><a href="https://www.npmjs.com/package/material-ui-dropzone" rel="nofollow noreferrer">https://www.npmjs.com/package/material-ui-dropzone</a></p>
  <p><a href="https://codesandbox.io/s/vj1q68zm25?file=/src/ImageUpload.js" rel="nofollow noreferrer">https://codesandbox.io/s/vj1q68zm25?file=/src/ImageUpload.js</a></p>
  <hr />
  <p><a href="https://i.stack.imgur.com/vjK7q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vjK7q.png" alt="enter image description here" /></a></p>
  <hr />
  <p>--- old code</p>
  <p><a href="http://jsfiddle.net/5rbqehz3/1/" rel="nofollow noreferrer">http://jsfiddle.net/5rbqehz3/1/</a></p>
  <p>---- using the renderDragDrop starting file here -- adapt the code so that when the user drags a file to the area -- it populates the redux form field - textarea file type with the file --- if its a case of adding multiple files to the field -- or adding fields on the fly to house each file - uploaded.</p>
  <p>its the integration part that I need to focus on -- if its a case of hiding from view the old school fields - but having them be populated in response to the drag and drop interface.</p>
  <p>-- latest code 17th November 2020
  <a href="https://codesandbox.io/s/pensive-darwin-dpdwj" rel="nofollow noreferrer">https://codesandbox.io/s/pensive-darwin-dpdwj</a></p>
  <p>22nd November - 2020</p>
  <p>normal
  <a href="https://i.stack.imgur.com/ztE7Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ztE7Z.png" alt="enter image description here" /></a></p>
  <p>on drag - the pink box appears and the dotted line animates inward
  <a href="https://i.stack.imgur.com/Jr8lN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jr8lN.png" alt="enter image description here" /></a></p>
  <h2>I need help getting the styles right -- and cleaning up this code base</h2>
  <p>--- my current attempt -- <a href="https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js" rel="nofollow noreferrer">https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js</a></p>