javascript - Set order of uploaded images (JS, PHP)

one text

Solution:

After long time I have returned to this project and made further research. So I would like to share my solution.

So I have decided that a convenient option will be to have only one input for multiple images. The user clicks it and chooses the needed images. If he needs to add more images after this, he clicks the same input again and the new images are added to the list. All images immediately appear as previews with the "delete" button. So if the user needs to replace one image, he can delete it, upload a new image and move it to the needed place.

The PHP code from my post does not require any changes. The work is done in Javascript. There are lots of lines of code, but a big part of them is simply for dynamic generating of previews. Please see the snippet.

// DataTransfer allows updating files in input
var dataTransfer = new DataTransfer()

const form = document.querySelector('#form')
const input = document.querySelector('#input')

input.addEventListener('change', () => {

  let files = input.files

  for (let i = 0; i < files.length; i++) {
    // A new upload must not replace images but be added
    dataTransfer.items.add(files[i])

    // Generate previews using FileReader
    let reader, preview, previewImage
    reader = new FileReader()

    preview = document.createElement('div')
    previewImage = document.createElement('img')
    deleteButton = document.createElement('button')
    orderInput = document.createElement('input')

    preview.classList.add('preview')
    document.querySelector('#preview-parent').appendChild(preview)
    deleteButton.setAttribute('data-index', i)
    deleteButton.setAttribute('onclick', 'deleteImage(this)')
    deleteButton.innerText = 'Delete'
    orderInput.type = 'hidden'
    orderInput.name = 'images_order[' + files[i].name + ']'

    preview.appendChild(previewImage)
    preview.appendChild(deleteButton)
    preview.appendChild(orderInput)

    reader.readAsDataURL(files[i])
    reader.onloadend = () => {
      previewImage.src = reader.result
    }
  }

  // Update order values for all images
  updateOrder()
  // Finally update input files that will be sumbitted
  input.files = dataTransfer.files
})

const updateOrder = () => {
  let orderInputs = document.querySelectorAll('input[name^="images_order"]')
  let deleteButtons = document.querySelectorAll('button[data-index]')
  for (let i = 0; i < orderInputs.length; i++) {
    orderInputs[i].value = [i]
    deleteButtons[i].dataset.index = [i]
    
    // Just to show that order is always correct I add index here
    deleteButtons[i].innerText = 'Delete (index ' + i + ')'
  }
}

const deleteImage = (item) => {
  // Remove image from DataTransfer and update input
  dataTransfer.items.remove(item.dataset.index)
  input.files = dataTransfer.files
  // Delete element from DOM and update order
  item.parentNode.remove()
  updateOrder()
}

// I make the images sortable by means of SortableJS
const el = document.getElementById('preview-parent')
new Sortable(el, {
  animation: 150,

  // Update order values every time a change is made
  onEnd: (event) => {
    updateOrder()
  }
})

#preview-parent {
  display: flex;
}
.preview {
  display: flex;
  flex-direction: column;
  margin: 1rem;
}
img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<form method="post" enctype="multipart/form-data" id="form">
    <input type="file" name="images[]" id="input" multiple>
    <button type="submit">Save</button>
</form>

<!-- This <div> will be made sortable with SortableJS -->
<div id="preview-parent">
  <!-- After upload Javascript will generate previews with this pattern
  <div class="preview">
    <img src="...">
    <button data-index=0>Delete</button>
    <input type="hidden" name="images_order['name']" value=0>
  </div>
  -->
</div>

Source