steffeng5.github.io/jsupl.html at master · Steffeng5/steffeng5.github.io · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!doctype html>
<html lang="en">
<head>
    <title>Filereader</title>
    <style>
        div {
            font-family: "Helvetica Neue";
            line-height: 22px;
            font-size: 15px;
            margin: 10px 0;
            color: #333;
        }

        em {
            padding: 2px 4px;
            background-color: #efefef;
            font-style: normal;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clappr/0.4.3/clappr.min.js" type="text/javascript"></script>
</head>

<body>

<input type="file" id="file-selector" multiple>
<div id="player"></div>

<div id="files"></div>
<script>

    const uploads = []

    const fileSelector = document.getElementById('file-selector')
    fileSelector.addEventListener('change', (event) => {
        console.time('FileOpen')
        const file = event.target.files[0]

        const filereader = new FileReader()

        filereader.onloadend = function (evt) {
            if (evt.target.readyState === FileReader.DONE) {
                const uint = new Uint8Array(evt.target.result)
                let bytes = []
                uint.forEach((byte) => {
                    bytes.push(byte.toString(16))
                })
                const hex = bytes.join('').toUpperCase()

                uploads.push({
                    filename: file.name,
                    filesize: file.size,
                    filetype: file.type ? file.type : 'Unknown/Extension missing',
                    binaryFileType: getMimetype(hex),
                    hex: hex
                })

                let url = URL.createObjectURL(file);
                console.log(url)

                let player = new Clappr.Player({
                    source: url,
                    mimeType: file.type,
                    parentId: "#player"});
                render()
            }

            console.timeEnd('FileOpen')
        }


        const blob = file.slice(0, 4);
        filereader.readAsArrayBuffer(blob);


    })

    const render = () => {
        const container = document.getElementById('files')

        const uploadedFiles = uploads.map((file) => {
            return `<div>
                    <strong>${file.filename}</strong><br>
                    Filetype from file object: ${file.filetype}<br>
                    Filetype from binary: ${file.binaryFileType}<br>
                    Hex: <em>${file.hex}</em><br>
                    Size: <em>${formatBytes(file.filesize, 2)}</em>
                    </div>`
        })

        container.innerHTML = uploadedFiles.join('')
    }

    const getMimetype = (signature) => {
        switch (signature) {
            case '89504E47':
                return 'image/png'
            case '47494638':
                return 'image/gif'
            case '25504446':
                return 'application/pdf'
            case 'FFD8FFDB':
            case 'FFD8FFE0':
                return 'image/jpeg'
            case '504B0304':
                return 'application/zip'
            default:
                return 'Unknown filetype'
        }
    }

    function formatBytes(a, b = 2) {
        if (0 === a) return "0 Bytes";
        const c = 0 > b ? 0 : b, d = Math.floor(Math.log(a) / Math.log(1024));
        return parseFloat((a / Math.pow(1024, d)).toFixed(c)) + " " + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d]
    }


</script>

</body>
</html>