cameraApp/dbScript.js at master · hpsingh546/cameraApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
let request = indexedDB.open("camera",1);//database not be same of diffrent version
let db;
request.onsuccess = function(e) {
    db = request.result;

}

request.onerror=function(){
    console.log("error");
}
request.onupgradeneeded = function() {
    db = request.result;
    db.createObjectStore("gallery", { keyPath: "nId"});//create a store like table in database where primary-key is nId
}

function addData(type,url){
    let tx=db.transaction("gallery","readwrite");
    let store=tx.objectStore("gallery");
    store.add({nId:Date.now(),type:type,url:url})
}
function getData(){
  let gallery=document.querySelector(".gallery");
  gallery.innerHTML="";
    let tx=db.transaction("gallery","readonly");
    let store=tx.objectStore("gallery");
    let req=store.openCursor()
    req.onsuccess=function(){
        let cursor=req.result;
        if(cursor)
        {
            if(cursor.value.type=="image"){
                let images=document.createElement("div");
                images.classList.add("images");
                images.innerHTML=`
                                <img src="${cursor.value.url}" alt="" >
                                <div class="button">
                                <button class="download${cursor.value.nId}">Download</button>
                                <button class="delete${cursor.value.nId}">Delete</button>
                                </div>
                               `
                               let filename=cursor.value.nId+".png";
                               let url=cursor.value.url;
                               let nId=cursor.value.nId;
                               gallery.appendChild(images)
                document.querySelector(`.download${cursor.value.nId}`).addEventListener("click",function(){
                    download(filename,url)
                });

                document.querySelector(`.delete${cursor.value.nId}`).addEventListener("click",function(){
                    deletefromgallary(nId)
                })
                }
            else{
                let video=document.createElement("div");
                video.classList.add("video");
                let videourl=URL.createObjectURL(cursor.value.url);//create video url
                video.innerHTML=`<video src=${videourl} autoplay loop></video>
                                <div class="button">
                                <button class="download${cursor.value.nId}">Download</button>
                                <button class="delete${cursor.value.nId}">Delete</button>
                                </div>
                `//each download has unique class
                gallery.appendChild(video)
                let fileName = cursor.value.nId + ".mp4";
                let nId=cursor.value.nId;
                document.querySelector(`.download${cursor.value.nId}`).addEventListener("click", function(){
                    download(fileName,videourl);
                });
                document.querySelector(`.delete${cursor.value.nId}`).addEventListener("click",function(){
                    deletefromgallary(nId)
                })
            }
            cursor.continue();
        }
        else
        {
           console.log("All Data fetched")
        }

    }
}
function download(name,url){
    let a=document.createElement("a");
  a.href=url;
  a.download=name;
  a.click();
}

function deletefromgallary(nid)
{
    let tx=db.transaction("gallery","readwrite");
    let store=tx.objectStore("gallery");
    store.delete(Number(nid));//typecast string to number
    getData();
}