Issue with Uploading Multiple Images Captured via Mobile Camera

I am working on a web application that allows users to capture and upload images using their mobile devices. The application includes a file input element that accepts multiple image files (PNG, JPEG, JPG) and displays them in a gallery for preview. Users can also remove images from the gallery and view them in fullscreen mode.

The issue arises when users take multiple pictures using the camera directly from the file input. The application successfully uploads images selected from the gallery, but when capturing images directly, the server only receives one image instead of the multiple images that were captured. This problem occurs specifically on mobile devices.

<input id="file-input" type="file" name="images[]"
style="display:none" accept="image/png, image/jpeg, image/jpg"
multiple data-role="none" capture="camera" id="photo"
 onchange="preview()" />

 <div id="gallery-foto" class="gallery"></div>

let images = [];
function preview() {
    const fileInput = document.getElementById('file-input');
    const gallery = document.getElementById('gallery-foto');
    for (let i = 0; i < fileInput.files.length; i++) {
        const file = fileInput.files[i];
        const reader = new FileReader();
        reader.onload = function (e) {
            const imgContainer = document.createElement('div');
            imgContainer.style.position = 'relative';
            const img = document.createElement('img');
            img.src = e.target.result;
            img.onclick = () => openFullscreen(img.src);
            const removeBtn = document.createElement('button');
            removeBtn.classList.add('remove-btn');
            const img5 = document.createElement('img');
            img5.src = "/css/external/Icone/Delete.svg";
            img5.id = "delete";
            img5.alt = "Rimuovi";
            removeBtn.appendChild(img5);
            removeBtn.onclick = (event) => {
                event.stopPropagation();
                gallery.removeChild(imgContainer);
                images.splice(images.indexOf(file), 1);
            };
            imgContainer.appendChild(img);
            imgContainer.appendChild(removeBtn);
            gallery.appendChild(imgContainer);
            images.push(file);
        }
        reader.readAsDataURL(file);
    }
}
function openFullscreen(src) {
    const fullscreenDiv = document.createElement('div');
    fullscreenDiv.classList.add('fullscreen');
    const img = document.createElement('img');
    img.src = src;

    img.onclick = () => {
        document.body.removeChild(fullscreenDiv);
    };
    fullscreenDiv.appendChild(img);
    document.body.appendChild(fullscreenDiv);
}
$request->validate([
'images.*' => 'required|image|mimes:jpg,jpeg,png|max:8000',
'videos.*' => 'nullable|file|mimes:mp4,x-flv,x-mpegURL,MP2T,3gpp,quicktime,x-msvideo,x-ms-wmv|max:20000',
'audios.*' => 'nullable|file|mimes:ogg,mp3,m4a,mp4,mpeg,mpga,wav,aac,webm',
'pdfs.*' => 'nullable|file|mimes:pdf'
]);
if ($request->hasFile('images')) {
 foreach ($request->file('images') as $image) {
  $imageName = $image->hashName();
   $image->storeAs('images', $imageName, 'private');
    Foto::create([
    'attivita_id' => $attività_id,
     'step_id' => $step_id,
      'foto' => htmlspecialchars($imageName, ENT_QUOTES, 'UTF-8')
      ]);
      }
  }

Additionally, I have validation on the server-side to check the uploaded images, but the problem persists only when images are captured directly with the camera on mobile devices.
The same issue also occurs with videos and PDFs.
What could be the problem? Nginx seems to work correctly because everything functions properly from the PC browser.

You need to sign in to view this answers

Related Post