The links below, with href="/user?user=sandra123"work. However, it
seems like my this.form.submit() will always submit the first input with the name filejohn123 and I don't know why
I am using the nodejs Formidable module to get the form submission data
I am trying to make so when I click UPLOAD next to the sarah123 user, that it sends to my nodejs handler the key=filesarah123.
Instead it always returns the file with key=filejohn123
<div style="display: flex; flex-direction: row; padding-bottom: 50px; padding-top: 10px; background-color: white; width: 20%; margin: 20px; padding-left: 20px; border-radius: 25px;">
<image style="border-radius: 50%; width: 70px; height: 70px;" src="/photos/john123/profile.jpeg " />
<div style="padding-left: 10px;">
<form action='/upload' method="post" enctype="multipart/form-data">
<input id='form-upload' type="file" name="filejohn123" onchange="this.form.submit()" hidden />
<label for="form-upload" class="btn btn-dark">UPLOAD</label>
</form>
<button type="button" class="btn btn-dark"><a style="text-decoration: none; color: white;" href="/user?user=john123">john123 </a></button>
</div>
</div>
<div style="display: flex; flex-direction: row; padding-bottom: 50px; padding-top: 10px; background-color: white; width: 20%; margin: 20px; padding-left: 20px; border-radius: 25px;">
<image style="border-radius: 50%; width: 70px; height: 70px;" src="/photos/sandra123/profile.jpeg " />
<div style="padding-left: 10px;">
<form action='/upload' method="post" enctype="multipart/form-data">
<input id='form-upload' type="file" name="filesandra123" onchange="this.form.submit()" hidden />
<label for="form-upload" class="btn btn-dark">UPLOAD</label>
</form>
<button type="button" class="btn btn-dark"><a style="text-decoration: none; color: white;" href="/user?user=sandra123">sandra123 </a></button>
</div>
</div>--
This question is closed because of duplicates, but the links are not correct. Because I cannot give an answer anymore, I'm using the edit function.
The problem here is that both inputs have the same id ('form-upload'), and when you click the second label, it is the first input that is used to upload the file. You should change the input id (and corresponding label) to make them unique.
