File uploader works on computer but not mobile

I have coded into my website a file uploader and it works perfectly when used on the computer and a file is uploaded. But when i access the website on my iPhone i am not able to upload anything. The ability to pick what to upload appears but it doesn’t upload anything. Once the file is uploaded it is supposed to say ‘Uploaded!’. Does anyone know what the issue might be?

The website URL is – https://laundryday.nyc/partner.html#partnershipagreement

HTML

            <section id="partnershipagreement" class="security section container">
            <div class="security__container grid">
              <div class="security__data">
                <h2 class="section__title-center">Partnership Agreement</h2>
                <p class="security__description">
                  Download our partnership agreement and send back an executed copy via our submission portal below or through 
                  <a style="color: rgb(101, 174, 238);" href="mailto:laundrydaynyc@gmail.com">our email.</a>
                </p>
                <br/>
                <a class="button" href="#about">Download</a>
          
                <br/><br/><br/><br/>
          
                <!-- New Document Submission Form -->
                <form id="document-upload-form" enctype="multipart/form-data" action="https://formsubmit.co/laundrydaynyc@gmail.com" method="POST">
                  <label class="drop-container">
                    <span class="drop-title">click to upload</span>
                    <input type="file" name="partnership agreement" required>
                  </label>
                  <br/><br/><br/>
                  <button class="button" style="border: none; font-size: 17px; cursor: pointer;" type="submit">Submit</button>
                </form>
              </div>
          
              <img class="svg__img svg__color" src="./assets/partnerassets/img/partnershipagreementpic.png">
            </div>
          </section>

JS

                    document.addEventListener("DOMContentLoaded", function() {
                        const dropContainer = document.querySelector('.drop-container');
                        const input = document.querySelector('.drop-container input');
                        const maxFileSize = 5 * 1024 * 1024; // 5MB limit
                        const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']; // Add allowed file types

                        dropContainer.addEventListener('click', () => {
                            input.click();
                        });

                        input.addEventListener('change', () => {
                            const file = input.files[0];
                            
                            if (file) {
                                if (!allowedTypes.includes(file.type)) {
                                    alert("Invalid file type. Only JPEG, PNG, and PDF files are allowed.");
                                    input.value = ""; // Clear the input
                                    dropContainer.querySelector('.drop-title').textContent = "Click to upload";
                                    return;
                                }

                                if (file.size > maxFileSize) {
                                    alert("File size exceeds 5MB. Please upload a smaller file.");
                                    input.value = ""; // Clear the input
                                    dropContainer.querySelector('.drop-title').textContent = "Click to upload";
                                    return;
                                }

                                dropContainer.querySelector('.drop-title').textContent="Uploaded!";
                            }
                        });
                    });

CSS

          .drop-container {
            background-color: #f1f1f1;
            border: 2px dashed #7ba3b7;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            margin-top: 20px;
            width: 100%;
          }

          .drop-container input {
            display: none;
          }

          .drop-container:hover {
            background-color: #e1e1e1;
            transition: 1s;
          }

          .drop-title {
            font-size: 16px;
            text-align: center;
            color: #7ba3b7;
            font-weight: bold;
          }

You need to sign in to view this answers