Как удалить дубликаты из массива JavaScript?

Question

[busidoway]

Делаю загрузку изображений на сервер. На стороне клиента собираю данные о загружаемых файлах в массив и отправляю этот массив на сервер. Как удалить дубликаты из массива, в случае когда пользователь повторно загрузил некоторые файлы изображений? Или же заранее собирать только уникальные данные в массиве.

// загрузка изображения
var file_upload = $('#file_upload');
var arr_files = [];

file_upload.on('change', function(){
	
	if((file_upload[0].files).length !=0){
		$.each(file_upload[0].files, function(i, file){
			
			//добавление в массив
			arr_files.push(file);

		});
	}
		
	// Далее отправка через ajax 
	//......
	//......
			
});

Массив файлов выглядит примерно так:


Нашел в интернете такое решение:

let set = new Set(arr_files.map(JSON.stringify));
let arr_files_uniq = Array.from(set).map(JSON.parse);

Но почему-то удаляет из массива все элементы, кроме первого.

Comments

[sinneren]

https://stackoverflow.com/questions/1960473/get-al...

[Георгий Еремеев]

https://api.jquery.com/jquery.inarray/

[Георгий Еремеев]

if($.inArray(file, arr_files) == -1){
  arr_files.push(file);
}

[Вадим]

Использовать для этого подходящую структуру данных и не изобретать велосипед?
Например, объект?
Свойствами которого будут названия файлов, а их значениями сам объект файла, так как в файловой системе все названия файлов уникальные.
А отправлять Object.values(files)

UPD: под названиями файлов имелся в виду полный путь до файла, а доступа к этому нет. Поэтому не совсем уникально.

[Георгий Еремеев]

Вадим, уникальные в пределах одной директории или я вас не понял

[Вадим]

Георгий Еремеев, Ну да, поплыл немного. Когда писал имел в виду полный путь до файла.
А доступа к этому нет, поэтому да, не совсем уникально.

[Вадим]

Георгий Еремеев, busidoway, Чтож, потратил больше времени на вопрос и вот какой итог:
Каждый раз, когда Вы выбираете файл через инпут - создаётся новый объект File. Поэтому простое сравнение, а так же indexOf, includes и любые другие методы не сработают, так как объекты сравниваются по ссылке.

Можно было бы пробовать сравнивать по значению всех ключей, но ни JSON.stringify, ни Object.values ни любой другой метод не дают результата. (Дают пустой результат).

У объектов есть методы arrayBuffer и text, которым можно воспользоваться. Но они асинхронные.
Можно считать файл как base64 c помощью FileReader и сравнивать результат. Но там будут длинные строки и он тоже асинхронный. То есть нужно будет предусмотреть состояние блокировки. Хоть это и происходит очень быстре, тем не менее - лишнее дело.

Таким образом, воспользуемся мои первым комментарием, однако, в качестве ключа объекта можно брать конкатинированную строку file.name + file.size + file.type -> даёт почти максимальную гарантию уникальности файла.

[busidoway]

Вадим, да, с объектами действительно сработало. Спасибо.

Ну, по крайней мере, понял, почему не срабатывали методы удаления дубликатов из массива.

UPD: под названиями файлов имелся в виду полный путь до файла, а доступа к этому нет. Поэтому не совсем уникально.

[busidoway]

Вадим, До этого не знал, что при добавлении файла в объект добавляется еще и путь к файлу. Поэтому долго копался с этой проблемой, перебрав разные способы.

Итоговый код получился примерно такой:

// загрузка изображения
var file_upload = $('#file_upload');
var files_obj= {};

file_upload.on('change', function(){
  
  if((file_upload[0].files).length !=0){
    $.each(file_upload[0].files, function(i, file){
      
      //добавляем данные в созданный объект
      files_obj[file.name] = file;

    });
  }
    
  let arr_files = Object.values(files_obj);

  // Далее отправка через ajax 
  //......
  //......
      
});

Answer 1

[busidoway]

Задача решена. Спасибо комментариям Вадим

// загрузка изображения
var file_upload = $('#file_upload');
var files_obj= {};

file_upload.on('change', function(){
  
  if((file_upload[0].files).length !=0){
    $.each(file_upload[0].files, function(i, file){
      
      //добавляем данные в созданный объект
      files_obj[file.name] = file;

    });
  }
    
  let arr_files = Object.values(files_obj);

  // Далее отправка через ajax 
  //......
  //......
      
});

Answer 2

[VitalyChaikin]

См.
https://stackoverflow.com/questions/15125920/how-t...