1

Тема: BLOB зображення у БД

Допоможіть будь ласка

Маю таку задачу
Використовуючи бібліотеку 'https://github.com/jakearchibald/idb' створіть об'єкт сховища у БД з
картинками. На сторінці розмістіть картинку та кнопки (стільки, скільки буде завантажено у БД).
У кожної картинки у сховищі має бути src (BLOB формат), alt, description, link.
Користувач може при натисканні на кнопки в розмітці вибирати потрібні картинки після
чого в розмітці динамічно змінюється зображення, а також посилання на нього для переходу в
браузері та опис (під самою картинкою).
І ось моє рішення, воно не повне і скоріш за все не вірне

<input type="file" name="" id="">
<button id="saveimg">Save in BD</button>
<div id="clickthis">
    <button id="one" data-all="1">1</button>
    <button class="two" data-all="2">2</button>
    <button class="three" data-all="3">3</button>
</div>
<img src="" alt=''>
<script src='./IDB.js'></script>
<script>
    let count=0;
    let db=idb.open("Gallery",1,(upgradeDB)=>{
    let photo=upgradeDB.createObjectStore("Nature")
        photo.createIndex('Tel', 'tel', {
            unique: true
        });
        photo.createIndex('Sex', 'sex', {
            unique: false
        });
    })
    .then((db)=>{
        document.querySelector("#saveimg").addEventListener("click",function(){
            count++;
            let File = document.querySelector('input').files[0]
            let transaction=db.transaction("Nature","readwrite")
            let store=transaction.objectStore("Nature") 
            let blobUpload = new Blob([file], {type: 'image/jpg'},)
            console.log(blobUpload)
            store.put(blobUpload, count);
        })
    })
    document.querySelector("#clickthis").addEventListener("click",function(e){
        let bs=idb.open("Gallery",1)
        .then((db)=>{
            let order=Number(e.target.getAttribute("data-all"))
            let transaction=db.transaction("Nature","readonly");
            let store=transaction.objectStore("Nature");
            console.log(order)
            return store.get(order)
        })
        .then((pic)=> {
            let blobObj=pic;
            console.log(blobObj)
            let imgUrl=URL.createObjectURL(blobObj);
            document.querySelector("img").setAttribute("src",imgUrl)
            console.log(imgUrl)
        })
    })

Я хотів добавити картинку через

let img=new Image();
image.src="cars1.jpg"

але справа в тому що таким методом картинка не записується, в blob файлі її після такого немає - тобто як в коді внести картинку в БД вручну а не переносячи файл в input?Ну і ізза цього нюансу я не розумію тоді як внести туди , alt, description, link.  Допомжіть з вирішення завдання