3

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

enter image description here

--- 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 enter image description here

on drag - the pink box appears and the dotted line animates inward enter image description here

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

The Old County
  • 89
  • 13
  • 59
  • 129

2 Answers2

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Milan Milicevic
  • 124
  • 5
  • 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 – The Old County Nov 04 '20 at 16:02
  • 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. – Milan Milicevic Nov 05 '20 at 08:21
  • It was coming up with some error when I tried to get this working https://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 Nov 05 '20 at 08:25
  • 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 - https://codesandbox.io/s/pedantic-bash-5p07i https://www.w3schools.com/howto/howto_html_file_upload_button.asp – The Old County Nov 06 '20 at 04:35
  • 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 – The Old County Nov 20 '20 at 02:03
  • You can always set value property of an input. You can detect when user drag/drop something, handle with your logic, and set value of an input after that. – Milan Milicevic Nov 21 '20 at 22:29
  • no - I don't think I am able to use my form framework - to change the file input -- I think its got to be stand alone -- cause its hooked in with the redux forms -- so I can't set it or attach the files to that field – The Old County Nov 22 '20 at 16:09
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.

  • 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 Nov 18 '20 at 19:06
  • 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? – The Old County Nov 20 '20 at 02:09
  • @TheOldCounty this solution uses only html CSS and plain JavaScript, you can make it a standalone –  Nov 21 '20 at 08:23
  • @TheOldCounty also this solution has a guide on using ajax only –  Nov 21 '20 at 08:24
  • Yeah but it can't be used with my form framework right - I can't have the drag and drop change the input value – The Old County Nov 21 '20 at 21:29
  • @TheOldCounty that is something you need to code, take the input as a blob –  Nov 21 '20 at 21:32
  • I don't think it will take hold in the redux forms - I am trying something standalone – The Old County Nov 22 '20 at 16:10
  • @TheOldCounty it is very easy bro, just add whatever blob you want to add to `window.RANDOM_VARIABLE_NAME_YOU_CHOOSE` and you can easily access that variable from anywhere in any js file, so for example `windows.form_blob = someblob` now u can access it from anywhere, you don't have to store everything in redux, easy! –  Nov 23 '20 at 11:11
  • No I can't integrate the variable into the redux form framework that way – The Old County Nov 23 '20 at 13:57