0

I have thumbnail previews of a users selected images prior to upload. It will also allow a user to re-arrange the order of the images using jQuery UI. I want to track the order of the images by adding a unique ID to each thumbnails containing div, but I am not able to generate a unique ID. See Code below. Ideally I would like the div ID to match the image name, so then after the form post I use it to match to the filename in the IEnumerable<HttpPostedFileBase>. For example, if the uploaded image is called pic1.jpg, the div containing the thumbnail would be <div id = "pic1">. The line in question would seem to be div.id = File.name, but I am unable to generate a unique ID of any kind?

CODE

//jQuery UI sort
$(function () {
  $("#upload-thumbnails").sortable();
  $("#upload-thumbnails").disableSelection();
});
//Thumbnail preview
jQuery(function ($) {
  var filesInput = document.getElementById("ImageUploads");

  filesInput.addEventListener("change", function (event) {

var files = event.target.files; //FileList object
var output = document.getElementById("upload-thumbnails");

for (var i = 0; i < files.length; i++) {
  var file = files[i];

  var picReader = new FileReader();

  picReader.addEventListener("load", function (event) {

    var picFile = event.target;

    var div = document.createElement("div");
    div.id = File.name;
    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
      "title='" + picFile.name + "'/><a href='#' class='remove_pict'>Remove</a>";

    output.insertBefore(div, null);
    div.children[1].addEventListener("click", function (event) {
      div.parentNode.removeChild(div);
    });

  });

  //Read the image
  picReader.readAsDataURL(file);
}

}); });

PixelPaul
  • 2,609
  • 4
  • 39
  • 70

2 Answers2

0

In most cases while we uploading images we rename them as the time stamp because of the uniqueness. But for searching, dealing with time stamp is much harder, then add a class name of the div as the file name.

...
var div = document.createElement("div");
div.id = Date.now();
div.className += ' ' + File.name;
...

I am sure this will be help full. Thanks

Viran Malaka
  • 417
  • 4
  • 10
0

Not sure I get the question :)

Try instead: 

$(div).attr('id', 'yourIDHere')

Or you never use your defined var file , could it not be?

div.id = file.name;

You can generate UUIDs via JS see here

Community
  • 1
  • 1
Mazaz
  • 108
  • 3
  • Basically I need to add a unique ID to the div that contains the thumbnail, but it needs to be some value so that I can match it to the actual file when I post the form. – PixelPaul Feb 21 '17 at 13:33