Fix #2040 - Inaccurate rendering during file upload

[lindapaiste]

Fixes #2040

The bug is caused by these lines (which I actually called out in #2174):

p5.js-web-editor/client/modules/IDE/actions/uploader.js

Line 111 in 1c05241

let inputHidden = '<input type="hidden" name="attachments[]" value="';

p5.js-web-editor/client/modules/IDE/actions/uploader.js

Lines 121 to 122 in 1c05241

	inputHidden += `${window.btoa(jsonStr)}" />`;
	document.getElementById('uploader').innerHTML += inputHidden;

Our intention is to insert an additional input into the form. But the way that we are implementing it is by replacing the entire content of the uploader with new elements parsed from the modified HTML string.

The Dropzone library stores a reference to the previewElement associated with each file and modifies the CSS classes on this element at various points in the code. When our bad code gets executed for the first file all of the file.previewElement elements get removed from the DOM. Any subsequent changes to these elements will not change the HTML that we actually see.

As a result, only the first file will get the "success" styles applied. The second file gets stuck on "processing" and the rest of the files never even get to the "processing" style.

Changes:
I removed the modification of innerHTML. Instead I am creating the input with document.createElement and inserting it with appendChild. This keeps the DOM intact.

I had to dig way deep into this code in order to track down the cause of the bug and now that I understand it I do have some further improvements which I can make in future PRs. I think it would be cleaner to render these hidden inputs via React in the FileUploader component, by storing the data to component state. I think we might not need the hidden inputs at all?

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[lindapaiste]

This is no longer needed after #2244, where we removed the hidden inputs entirely.