Drag & Drop sort files by their name in JavaScript

Question

I want to sort files by their name and then process the next code. Here are the file names I'm uploading: DSC08703-3.jpg, DSC08701-2.jpg, DSC08704-4.jpg

One trick I mentioned below too.

$('#file').change(function () {
        var pic1="";
        var count=1;
        var Allowedimages=0;
        var uploadedcount=0;    
        filesup = event.target.files;
        if (this.files.length > 0) {
            haveToUpload=this.files.length;
            $.each(filenames, function (i, v) {
                var reader = new FileReader();
                remainToUpload = parseInt(haveToUpload)-parseInt(i);
                var proceedImg = remainToUpload;
                reader.onload = function (e) {
                    var img = new Image();
                    img.src = e.target.result;
                    img.onload = function () {
                    var canvas = document.createElement("canvas");
                    var value = 100;
                    var newsize=0;                    

                        var ctx = canvas.getContext("2d");
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        canvas.width = img.width;
                        canvas.height = img.height;
                        ctx.drawImage(img, 0, 0, img.width, img.height);
                        var pic1=canvas.toDataURL("image/jpeg",0.80);
                        var x=1;
                        
                        while (x <= 60) {
                            var filebd=$('#fileBD'+x).val();
                            if(filebd==NoImageSrc) {
                               break;
                            }
                            x++;
                        }
                        
                        $('#ima'+x).attr('src', BASEURL+'/images/bx_loader.gif');                            
                        $('#fileBD'+(x)).val(pic1); 
                        var imagesize=$('#oldimagesvalue').val();
                        $('#oldimagesvalue').val(parseInt(imagesize)+1);
                    }
                };
                reader.readAsDataURL(this);
            });
        }
    });

I tried below solution but not working.

var filenames = [];
filenames.push(this.files);
filenames.sort();
for(var i=0; i<filenames.length; i++){
for(var j=0; j<filenames[i].length; j++){
     //REST CODE HERE
 }
}

Answer 1

Fetch the number from the image name and use the number as box value.

$.each(this.files, function (i, v) {
 var tno = 0;
 var parts = v.name.split("-");
 var result = parts[parts.length - 1];
 var tno = result.toString().split(".")[0];
    var x=1;//parseInt(count)+parseInt(i)+parseInt(1);
    var xx = 1;
    if(tno>0)  x = tno;
    else x = xx;

    x++;
    xx++;
]);