Cannot rearrange files uploaded by clicking upload icons.

[koxu1996]

Steps to reproduce the issue

1. Select images
2. Upload by clicking upload icon under each thumbnail
3. You cannot rearrange image, although drag icon is avaliable.

Cause

sortable.js is looking for $(".file-preview-thumbnails .file-initial-thumbs"), but single uploaded images are in $(".file-preview-thumbnails .file-initial-thumbs"). I think they should be moved to div.file-initial-thumbs.

[kartik-v]

Yes the problem will be that all such images need to be in ONE single container with file-initial-thumbs class for sortable plugin to drag and drop within that for any rearrangement.

It will however cause some UI problems. This means with the above change when clicking the single upload button in the thumbnail, the uploaded images derived in initial preview will move to one container and that will cause a UI problem as if you have 5 thumbnails and you upload IMAGE_1 and IMAGE_5 via single upload button, then IMAGE_1 and IMAGE_5 will be moved to beginning within file-initial-thumbs with init preview, while IMAGE_2, IMAGE_3, and IMAGE_4 will appear after that as not uploaded. This may not be user friendly as user will perceive IMAGE_5 to have moved before IMAGE_2.

I suggest that it remain the way that the sortable for such case should not be enabled until someone refreshes the page and the initial preview is derived based on the batch sent by server (for sortable to be then used effectively to rearrange).

[kartik-v]

I think I will solve this with another workaround code. Will update.