reactjs - redux form and material ui framework — drag and drop file uploader

Question

I am building a nested form framework that uses the redux form and material ui framework -- I've built the components here to date - https://codesandbox.io/s/busy-darkness-npg7w?file=/src/Home.js

what I would like to do - is add an upload field - I've seen this example. How to enable file upload on React's Material UI simple input?

<Button
  variant="contained"
  component="label"
>
  Upload File
  <input
    type="file"
    style={{ display: "none" }}
  />
</Button>

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.

https://www.npmjs.com/package/material-ui-dropzone

https://codesandbox.io/s/vj1q68zm25?file=/src/ImageUpload.js

--- old code

http://jsfiddle.net/5rbqehz3/1/

---- 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.

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.

-- latest code 17th November 2020 https://codesandbox.io/s/pensive-darwin-dpdwj

22nd November - 2020

normal

on drag - the pink box appears and the dotted line animates inward

I need help getting the styles right -- and cleaning up this code base

--- my current attempt -- https://codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js

I can't seem to get the file upload to register in the redux form when I submit - I think its cause I've not spread the operator in the field? - but it malfunctions because of setting the value? - codesandbox.io/s/pedantic-bash-5p07i — The Old County
– The Old County, Commented Nov 6, 2020 at 4:36
--- my current attempt -- codesandbox.io/s/weathered-water-fpx38?file=/src/Home.js — The Old County
– The Old County, Commented Nov 22, 2020 at 16:15
In the last codesandbox it seems like you achieved what you wanted. The box changes it's color when you are about to drop the file. So what's the status of this question? — Tom
– Tom, Commented Nov 23, 2020 at 23:16

Dharman · Accepted Answer · 2020-11-04 15:34:46Z

1

There isn't a out of the box solution for this. You can, as you suggested, add some packages that can be modified style wise, or make custom implementation. If you decide to go with custom implementation here is a useful article how to do it.

edited Nov 4, 2020 at 15:34

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 4, 2020 at 15:28

Milan Milicevic

1245 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

The Old County Over a year ago

Thank you - I will check it out - one of the issues I was having was a failure to set the input - possibly because its just a regular html5 input and not part of the redux or material ui parts - I wasn't sure how to just get something basic going

Milan Milicevic Over a year ago

You can catch onChnage event of input element and manipulate data in the way you need it. Also I think it does not meter if it is regular input tag or part of a material, it should work in both cases.

The Old County Over a year ago

It was coming up with some error when I tried to get this working codesandbox.io/s/frosty-ishizaka-7wfr0 -- "Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string."

The Old County Over a year ago

I've tried to get a basic file upload field to work - but its not getting picked up at all when I hit the submit button - codesandbox.io/s/pedantic-bash-5p07i w3schools.com/howto/howto_html_file_upload_button.asp

The Old County Over a year ago

but @Milan Milicevic I need to change the input -- not just pickup the onChange event from the input itself -- so when the user drags/drops a file - I want to change the input - programmatically

|

user3651521 · Accepted Answer · 2020-11-18 15:29:33Z

0

This solution is an easy solution to what you want to achieve, it has both the auto submit and submit on click and it doesn't force style.

answered Nov 18, 2020 at 15:29

user3651521

9 Comments

The Old County Over a year ago

no it needs to be part of the form framework I've built -- I need something like this "$form.find('input[type="file"]').prop('files', droppedFiles);" -- but it says it won't work -- and I am trying to isolate the field with a ref

The Old County Over a year ago

So @AKC - this means I can't use my form framework to house a draganddrop? It has to be a standalone component that uploads via ajax only - because you can't programmatically change the value of an input field?

user3651521 Over a year ago

@TheOldCounty this solution uses only html CSS and plain JavaScript, you can make it a standalone

user3651521 Over a year ago

@TheOldCounty also this solution has a guide on using ajax only

The Old County Over a year ago

Yeah but it can't be used with my form framework right - I can't have the drag and drop change the input value

|

Collectives™ on Stack Overflow

reactjs - redux form and material ui framework — drag and drop file uploader

I need help getting the styles right -- and cleaning up this code base

2 Answers 2

7 Comments

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

I need help getting the styles right -- and cleaning up this code base

2 Answers 2

7 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related