0

I have a react component that uploads files asynchronously. After files are uploaded, their ID from the server is stored in a hidden field and saved as part of another form. This component is rendered inside the form that saves the IDs. I can not use the Javascript File API because of IE support.

I have this functionality working in JQuery but I'm trying to convert it to react. Once a file is selected, I need to move the file input field to another form outside of the current form so that it can be uploaded. My react component contains this file input field and onChange I use jQuery to move it. After I move it, I update my state so that my render method will be called again. When it is called, it does not render the file input field. My expectation is that it will see that the file input field is not where the render method puts it and create a new one.

I realize this probably isn't the react way to do things - any input or suggestions would be great. Thanks.

Brian
  • 3,571
  • 7
  • 44
  • 70

1 Answers1

0

React isn't going to notice someone else modifying the DOM. When you call setState another render is triggered. The result of the render is added to the Virtual DOM, and diffed against the previous Virtual DOM. The real DOM never enters the equation.

You could just clone the input[file] with jQuery, instead of moving it.

Kyeotic
  • 19,697
  • 10
  • 71
  • 128
  • I don't believe cloning will copy the value which is the file that I want to upload. – Brian Dec 22 '15 at 19:35
  • According to this answer- http://stackoverflow.com/questions/23530716/react-how-much-can-i-manipulate-the-dom-react-has-rendered - React does care. I even got an error message about it. However, I did change my approach and instead of cloning the field and using the clone to upload, I am using the clone to replace the field in the component. This seems to work. – Brian Dec 22 '15 at 19:50
  • You could manually copy the file out and put it into the cloned element; its more work than just calling `clone()`, but its very doable. About React caring, I meant about the real DOM changing. React didn't care because it thought it didn't need to make an update. There are certainly nuances to that statement. – Kyeotic Dec 22 '15 at 20:34