2

I am using AngularJS and ui-sortable to reorder images to be uploaded via HTML using the following input:

<input name="userfile[]" type="file" id="userfile" ng-if="charSelected" onchange="angular.element(this).scope().filesLoaded(this.files)" multiple>

I display the images grabbed from file upload as follows:

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

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:

// 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);
    }
}

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].

How can I change the order of the files the user wants to upload?

Improve this question
4
  • You cannot set the file attribute for security reasons. support.microsoft.com/en-us/kb/266087 Commented Mar 11, 2016 at 21:01
  • I see. So I'd probably need to do something like make an array of indices to pass in the POST data so the server-side can handle it? Commented Mar 11, 2016 at 21:03
  • Well, accessing the array of files from javascript (i believe) only returns you the string of the filename. I don't think it actually returns you the file. Your best bet is to just send it as is, and then do the necessary ordering/shuffling on the server side Commented Mar 11, 2016 at 21:06
  • Edit: Misread your comment. Yes, that would be the solution Commented Mar 11, 2016 at 21:08
Related questions
12225
How can I remove a specific item from an array in JavaScript?
7610
How do JavaScript closures work?
7580
How do I remove a property from a JavaScript object?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.