Allow multiple file/image upload

[ss-joy]

How to upload multiple images with wheelform.

Description: Currently we can drag and drop a "file type" form field in the craftcms admin dashboard. Then we can use that field on the client-side to upload a single image and view the image on the admin dashboard.

Example Code for handling file upload:

{% case "file" %}
<div class="form-group tempAndEventsFieldContainer" style="gap: 12px">
  <label class="tempAndEventsFormLabels">{{ field.label }}</label>
  <div
    class="form-control grafittiRemovalFormInputs"
    style="background-color: #fff; gap: 12px"
  >
    <div class="grafittiRemovalFileUploadContainer">
      <img
        src="{{siteUrl}}assets\logo\circle-xmark-regular.svg"
        alt=""
        class="remove-image-icon"
      />
      <img
        src="{{siteUrl}}\assets\logo\file-upload.png"
        class="customFilePickerIcon"
      />
      <img class="filePreviewer" />
      <p>Upload Picture</p>
      <input
        type="file"
        name="{{ field.name }}"
        id="{{ field.name }}"
        style="opacity: 1; display: inline"
      />
    </div>
  </div>
</div>

Now in order to allow the browser to pick multiple files/images we can add the multiple attribute:

{% case "file" %}
<div class="form-group tempAndEventsFieldContainer" style="gap: 12px">
  <label class="tempAndEventsFormLabels">{{ field.label }}</label>
  <div
    class="form-control grafittiRemovalFormInputs"
    style="background-color: #fff; gap: 12px"
  >
    <div class="grafittiRemovalFileUploadContainer">
      <img
        src="{{siteUrl}}assets\logo\circle-xmark-regular.svg"
        alt=""
        class="remove-image-icon"
      />
      <img
        src="{{siteUrl}}\assets\logo\file-upload.png"
        class="customFilePickerIcon"
      />
      <img class="filePreviewer" />
      <p>Upload Picture</p>
      <input
        type="file"
        name="{{ field.name }}"
        id="{{ field.name }}"
        style="opacity: 1; display: inline"
        multiple
      />
    </div>
  </div>
</div>

Then if we pick multiple images and submit the form, the dashboard shows no image at all. Sometimes it shows a single image but randomly. It does not show the first image from the image list but randomly shows an image.