khlbrg · June 8, 2021 18:17
diff --git a/index.html b/index.html
 <!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>
 </head>

 <body>

 <input type="file" id="file-selector">

 <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,
                    filetype: file.type ? file.type : 'Unknown/Extension missing',
                    binaryFileType: getMimetype(hex),
                    hex: hex
                })
                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>
                    </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'
        }
    }

 </script>

 </body>
 </html>
	<!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>
	</head>

	<body>

	<input type="file" id="file-selector">

	<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,
	filetype: file.type ? file.type : 'Unknown/Extension missing',
	binaryFileType: getMimetype(hex),
	hex: hex
	})
	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>
	</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'
	}
	}

	</script>

	</body>
	</html>