BLOB'ы будем делать из картинок.
<!doctype html><meta charset='utf-8'><title>BLOB</title>
<div id='BOX'></div>
<input id='FI' type='file' multiple>
<style>
#BOX{display:flex;flex-wrap:wrap}
img{width:300px;padding:10px}
</style>
<script>
let IMAGES = new Set;
function Store(b, img=new Image){ console.log(b);
if(IMAGES.has(b)){ return };
img.src = URL.createObjectURL(b);
BOX.append(img);
IMAGES.add(b);
console.log(IMAGES)
};
FI.onchange=e=>{
let i, n=e.target.files, r;
for(i of n){
r=new FileReader;
r.readAsDataURL(i);
r.onload=e=>fetch(e.target.result)
.then(i=>i.blob())
.then(i=>Store(i))
}
}
</script>
Добавьте
2 раза одинаковую картинку, чтобы понять в чем проблема.
Как запретить добавление одинаковых картинок в данном случае?
P.S.: Почему-то Set не помогает (