How to reorder upload files in JavaScript
<p>I am using AngularJS and <code>ui-sortable</code> to reorder images to be uploaded via HTML using the following input:</p>

<pre><code>&lt;input name="userfile[]" type="file" id="userfile" ng-if="charSelected" onchange="angular.element(this).scope().filesLoaded(this.files)" multiple&gt;
</code></pre>

<p>I display the images grabbed from file upload as follows:</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;&lt;span ng-if="charSelected &amp;&amp; type == 'Image'"&gt;Preview (Drag to Reorder)&lt;/span&gt;&lt;/tr&gt;
    &lt;tr ng-model="images" ui-sortable="reorderFiles"&gt;
        &lt;td ng-repeat="image in images track by $index" ng-if="charSelected &amp;&amp; type == 'Image'"&gt;&lt;img ng-src="{{image}}" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>I can drag and drop to reorder the images just fine. However, the problem is, I don't know how to change the order of the files when a user reorders them. I tried the following:</p>

<pre><code>// Sortable change event
$scope.reorderFiles = {
    update: function(e, ui) {
        var originalPos = ui.item.index();
        var newPos = ui.item.sortable.dropindex;
        // Swap the files
        var t1 = document.getElementById('userfile').files[originalPos];
        console.log("orig: " + document.getElementById('userfile').files[originalPos].name);
        document.getElementById('userfile').files[originalPos] = document.getElementById('userfile').files[newPos];
        document.getElementById('userfile').files[newPos] = t1;
        console.log("new: " + document.getElementById('userfile').files[originalPos].name);
    }
}
</code></pre>

<p>But it seems the object returned by document.getElementById is immutable, because console.log just returns the same name even after I swap files[originalPos] with files[newPos].</p>

<p>How can I change the order of the files the user wants to upload?</p>