Mongoose / Express - Добавление ссылок и текста для загрузки нескольких изображений

Question

Я использую NodeJS / Mongoose / Express и имею схему, которая включает поле с именем 'images' и позволяет пользователю загружать несколько изображений (от 1 до 3 изображений).

let mongoose = require("mongoose");

// SCHEMA SETUP - Sliders
let sliderSchema = new mongoose.Schema({
   title: String,
   images: [ 
      {url: String, public_id: String} 
   ],
   image1Link: String,
   image2Link: String,
   image3Link: String
});

module.exports = mongoose.model("Slider", sliderSchema);

Я бы хотел, чтобы пользователь мог включать ссылку и текстовое описание рядом с каждым загружаемым им изображением (см. Образец шаблона .E JS ниже). Я попытался сделать это, включив 3 необязательных поля для ссылок, которые должны быть предоставлены (здесь показаны только поля ввода ссылок, но будут следовать той же концепции для текстовых описаний). Однако проблема, с которой я сталкиваюсь, заключается в том, что изображения не всегда загружаются в том порядке, в котором они выбраны (я предполагаю, что из-за размера файла / времени, затраченного на загрузку), поэтому ссылки / описания становятся смещенными.

Является есть ли лучший способ сделать это, чтобы ссылка / описание, предоставляемое пользователем, было напрямую привязано к соответствующему изображению? Любая помощь будет оценена. Спасибо

    <label for="images" class="standard-label">Slider Image (Max. 3 files of 10Mb file size):</label>
    <label for="images" class="custom-file-upload standard-label">
        <i class="fas fa-upload"></i> Upload Images
    </label>
    <input class="standard-input" type="file" id="images" name="images" accept="image/*" multiple>
    <div class='images-gallery'></div>
</div>
<div class="form-group">
    <label for="image1Link" class="standard-label">Image 1 Link: *</label>
    <input id="image1Link" class="standard-input" type="text" name="slider[image1Link]" autocomplete="off" maxlength="150" placeholder="Max. length 150 characters">
</div>
<div class="form-group">
    <label for="image2Link" class="standard-label">Slider Title: *</label>
    <input id="image2Link" class="standard-input" type="text" name="slider[image2Link]" autocomplete="off" maxlength="150" placeholder="Max. length 150 characters">
</div>
<div class="form-group">
    <label for="image3Link" class="standard-label">Slider Title: *</label>
    <input id="image3Link" class="standard-input" type="text" name="slider[image3Link]" autocomplete="off" maxlength="150" placeholder="Max. length 150 characters">
</div>