Image slots form upload with drag sorting

Inspect the full details and code of a selected snippet

<form method="POST" action="" enctype="multipart/form-data">
        <div id="images" class="uk-grid uk-grid-small uk-grid-match uk-child-width-1-3@s uk-grid-match" uk-grid uk-sortable="handle: .uk-card">
          <div class="image-slot uk-height-medium">
            <div class="uk-card uk-card-default uk-card-body uk-padding-small uk-text-center uk-position-relative">
              <img class="uk-width-1-1 uk-border-rounded uk-cover" uk-cover src="https://images.unsplash.com/photo-1746240922260-efbea47dc532?q=80&w=1024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
              <input type="hidden" name="images[]" value="https://images.unsplash.com/photo-1746240922260-efbea47dc532?q=80&w=1024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
              <div class="uk-position-bottom-right uk-padding-small">
                <button type="button" class="uk-button uk-button-primary uk-border-rounded" onclick="triggerFile(this)"><i class="fa-regular fa-upload"></i></button>
                <button type="button" class="uk-button uk-button-danger uk-border-rounded" onclick="removeImage(this)"><i class="fa-regular fa-trash-can"></i></button>
              </div>
            </div>
          </div>
          <div class="image-slot uk-height-medium">
            <div class="uk-card uk-card-default uk-card-body uk-padding-small uk-text-center uk-position-relative">
              <img class="uk-width-1-1 uk-border-rounded uk-cover" uk-cover src="https://images.unsplash.com/photo-1729280277171-71a6acd762e6?q=80&w=1024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
              <input type="hidden" name="images[]" value="https://images.unsplash.com/photo-1729280277171-71a6acd762e6?q=80&w=1024&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
              <div class="uk-position-bottom-right uk-padding-small">
                <button type="button" class="uk-button uk-button-primary uk-border-rounded" onclick="triggerFile(this)"><i class="fa-regular fa-upload"></i></button>
                <button type="button" class="uk-button uk-button-danger uk-border-rounded" onclick="removeImage(this)"><i class="fa-regular fa-trash-can"></i></button>
              </div>
            </div>
          </div>
          <div class="image-slot uk-height-medium">
            <div class="uk-card uk-card-default uk-card-body uk-padding-small uk-text-center uk-position-relative">
              <img class="uk-cover" uk-cover style="display:none;">
              <input type="file" name="images[]" accept="image/*" class="uk-hidden" onchange="handleFileChange(this)">
              <div class="uk-position-bottom-right uk-padding-small">
                <button type="button" class="uk-button uk-button-primary uk-border-rounded" onclick="triggerFile(this)"><i class="fa-regular fa-upload"></i></button>
                <button type="button" class="uk-button uk-button-danger uk-border-rounded" onclick="removeImage(this)"><i class="fa-regular fa-trash-can"></i></button>
              </div>
            </div>
          </div>
          <div class="image-slot uk-height-medium">
            <div class="uk-card uk-card-default uk-card-body uk-padding-small uk-text-center uk-position-relative">
              <img class="uk-cover" uk-cover style="display:none;">
              <input type="file" name="images[]" accept="image/*" class="uk-hidden" onchange="handleFileChange(this)">
              <div class="uk-position-bottom-right uk-padding-small">
                <button type="button" class="uk-button uk-button-primary uk-border-rounded" onclick="triggerFile(this)"><i class="fa-regular fa-upload"></i></button>
                <button type="button" class="uk-button uk-button-danger uk-border-rounded" onclick="removeImage(this)"><i class="fa-regular fa-trash-can"></i></button>
              </div>
            </div>
          </div>
          <div class="image-slot uk-height-medium">
            <div class="uk-card uk-card-default uk-card-body uk-padding-small uk-text-center uk-position-relative">
              <img class="uk-cover" uk-cover style="display:none;">
              <input type="file" name="images[]" accept="image/*" class="uk-hidden" onchange="handleFileChange(this)">
              <div class="uk-position-bottom-right uk-padding-small">
                <button type="button" class="uk-button uk-button-primary uk-border-rounded" onclick="triggerFile(this)"><i class="fa-regular fa-upload"></i></button>
                <button type="button" class="uk-button uk-button-danger uk-border-rounded" onclick="removeImage(this)"><i class="fa-regular fa-trash-can"></i></button>
              </div>
            </div>
          </div>
          <div class="image-slot uk-height-medium">
            <div class="uk-card uk-card-default uk-card-body uk-padding-small uk-text-center uk-position-relative">
              <img class="uk-cover" uk-cover style="display:none;">
              <input type="file" name="images[]" accept="image/*" class="uk-hidden" onchange="handleFileChange(this)">
              <div class="uk-position-bottom-right uk-padding-small">
                <button type="button" class="uk-button uk-button-primary uk-border-rounded" onclick="triggerFile(this)"><i class="fa-regular fa-upload"></i></button>
                <button type="button" class="uk-button uk-button-danger uk-border-rounded" onclick="removeImage(this)"><i class="fa-regular fa-trash-can"></i></button>
              </div>
            </div>
          </div>
        </div>
        <div class="uk-margin uk-text-center">
          <button type="submit" class="uk-button uk-button-primary uk-border-rounded">Submit Post</button>
        </div>
      </form>

</div>
  </div>
</div>

function triggerFile(button) {
  const slot = button.closest('.image-slot');
  let input = slot.querySelector('input[type="file"]');

// Check if an existing file or hidden input has a name
  let nameAttr = null;
  if (input && input.name) {
    nameAttr = input.name;
  } else {
    const hiddenInput = slot.querySelector('input[type="hidden"]');
    if (hiddenInput && hiddenInput.name) {
      nameAttr = hiddenInput.name;
    }
  }

// If no file input exists, create one with preserved name (or default if missing)
  if (!input) {
    input = document.createElement('input');
    input.type = 'file';
    input.name = nameAttr || 'images[]';
    input.accept = 'image/*';
    input.className = 'uk-hidden';
    input.onchange = () => handleFileChange(input);
    slot.querySelector('.uk-card').appendChild(input);
  }

input.click();
}

function handleFileChange(input) {
  const slot = input.closest('.image-slot');
  const img = slot.querySelector('img');
  const file = input.files[0];
  if (!file) return;

const reader = new FileReader();
  reader.onload = function (e) {
    img.src = e.target.result;
    img.style.display = 'block';
  };
  reader.readAsDataURL(file);
}

function removeImage(button) {
  const slot = button.closest('.image-slot');
  const card = slot.querySelector('.uk-card');
  const img = card.querySelector('img');

// Remove both hidden and file inputs, no matter their name
  const fileInput = card.querySelector('input[type="file"]');
  const hiddenInput = card.querySelector('input[type="hidden"]');

if (img) {
    img.src = '';
    img.style.display = 'none';
  }

if (fileInput) fileInput.remove();
  if (hiddenInput) hiddenInput.remove();
}

Information

Detailed overview of a selected code snippet

yaneony

17.04.2025, 00:51:00

07.05.2025, 22:00:58

uk-border, uk-button, uk-card, uk-child, uk-container, uk-cover, uk-flex, uk-grid, uk-height, uk-hidden, uk-margin, uk-padding, uk-position, uk-sortable, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!