Payment record

<style>.file-upload-container {display: flex;align-items: center;}.file-name {margin-left: 10px;font-style: italic;}</style>
<div class="product-form__input">
<label class="form__label">Please upload your payment record here (screenshot or photo))</label>
<div class="file-upload-container">
<input id="file-please-upload-your-payment-record-here-(screenshot-or-photo))" form="{{ 'product-form-' | append: section.id }}"
name="properties[Please upload your payment record here (screenshot or photo))]" style="display: none;" type="file" required />
<button id="button-please-upload-your-payment-record-here-(screenshot-or-photo))" class="button">Upload File</button>
<p id="fileName-please-upload-your-payment-record-here-(screenshot-or-photo))" class="file-name">No file chosen</p>
</div>
<p id="errorMessage" class="error-message" style="display: none;margin-top:0;color:red">Please upload your file(s).</p>
</div>
<script>
document.getElementById('file-please-upload-your-payment-record-here-(screenshot-or-photo))').addEventListener('change', function(event) {
const files = event.target.files;
let fileName;
if (files.length === 0) {fileName = 'No file chosen';}
else if (files.length === 1) {fileName = files[0].name;document.getElementById('errorMessage').style.display = 'none'; }
else {fileName = files.length + ' files';document.getElementById('errorMessage').style.display = 'none';}
document.getElementById('fileName-please-upload-your-payment-record-here-(screenshot-or-photo))').textContent = fileName;
});
document.getElementById('button-please-upload-your-payment-record-here-(screenshot-or-photo))').addEventListener('click', function() {
document.getElementById('file-please-upload-your-payment-record-here-(screenshot-or-photo))').click();
});
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.product-form__submit').addEventListener('click', function(event) {
const inputFile = document.getElementById('file-please-upload-your-payment-record-here-(screenshot-or-photo))');
if (!inputFile.files.length && inputFile.required) {
document.getElementById('errorMessage').style.display = 'block';
}
});})</script>


<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>