I'm trying to upload a file in the header and after clicking submit, the uploaded file will be assigned to other file uploads but when I click the (X) button, all of the file upload associated will be removed as well. The sample image is uploaded here.
As much as possible, please limit the solution to JavaScript/jQuery only. Thanks.
Sample code below:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<p>Click on the "Choose File" button to upload a file:</p>
<input type="file" id="myFile" name="filename">
<br />
<br />
<input type="submit" onclick="test(event)">
<br />
<br />
<input type="button" value="X" onclick="removeFile('#myFile1')"><input type="file" id="myFile1" name="filename">
<input type="button" value="X" onclick="removeFile('#myFile2')"><input type="file" id="myFile2" name="filename">
<input type="button" value="X" onclick="removeFile('#myFile3')"><input type="file" id="myFile3" name="filename">
<script>
function test(e)
{
e.preventDefault();
$("#myFile1")[0].files = $("#myFile")[0].files;
$("#myFile2")[0].files = $("#myFile")[0].files;
$("#myFile3")[0].files = $("#myFile")[0].files;
}
function removeFile(value)
{
$(value).val('');
}
</script>
</body>
</html>