biswajitpaul01 · May 11, 2019 18:01
diff --git a/media-blob.html b/media-blob.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Image Blob</title>
 </head>

 <body>
    <div class="container"></div>
    <p>
        <img src="" id="imageElem" height="80" style="display:none">
        <input type="file" name="" accept="image/*" id="image_file" style="display:none" onchange="onImageChange(this)">
    </p>
    <p>
        <button type="button" id="upload_image_btn">Choose Image File</button>
    </p>
    <hr>
    <p>
        <video src="" id="videoElem" height="160" style="display:none" controls>
        <input type="file" name="" accept="video/*" id="video_file" style="display:none" onchange="onVideoChange(this)">
    </p>
    <p>
        <button type="button" id="upload_video_btn">Choose Video File</button>
    </p>

    <script>
        "use strict";

        /* -----------------------------------------------------
        -                   Process Image
        ------------------------------------------------------*/
        document.getElementById("upload_image_btn").addEventListener("click", function () {
            document.getElementById("image_file").click();
        });

        function onImageChange(event) {
            var files = event.files;

            if (files && files.length > 0) {
                var targetFile = files[0];

                try {
                    var objectURL = window.URL.createObjectURL(targetFile);
                    imageElem.src = objectURL;
                    imageElem.style.display = "block";
                } catch (e) {
                    try {
                        // Fallback if createObjectURL is not supported
                        var fileReader = new FileReader();

                        fileReader.onload = function (evt) {
                            imageElem.src = evt.target.result;
                        };

                        fileReader.readAsDataURL(targetFile);
                    } catch (e) {
                        console.log("File Upload not supported: ".concat(e));
                    }
                }
            }
        }
        /* -----------------------------------------------------
        -                   Process Video
        ------------------------------------------------------*/


        document.getElementById("upload_video_btn").addEventListener("click", function () {
            document.getElementById("video_file").click();
        });

        function onVideoChange(event) {
            var files = event.files;

            if (files && files.length > 0) {
                var targetFile = files[0];

                try {
                    var objectURL = window.URL.createObjectURL(targetFile);
                    videoElem.src = objectURL;
                    videoElem.style.display = "block";
                } catch (e) {
                    try {
                        // Fallback if createObjectURL is not supported
                        var fileReader = new FileReader();

                        fileReader.onload = function (evt) {
                            videoElem.src = evt.target.result;
                        };

                        fileReader.readAsDataURL(targetFile);
                    } catch (e) {
                        console.log("File Upload not supported: ".concat(e));
                    }
                }
            }
        }            
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<title>Image Blob</title>
	</head>

	<body>
	<div class="container"></div>
	<p>
	<img src="" id="imageElem" height="80" style="display:none">
	<input type="file" name="" accept="image/*" id="image_file" style="display:none" onchange="onImageChange(this)">
	</p>
	<p>
	<button type="button" id="upload_image_btn">Choose Image File</button>
	</p>
	<hr>
	<p>
	<video src="" id="videoElem" height="160" style="display:none" controls>
	<input type="file" name="" accept="video/*" id="video_file" style="display:none" onchange="onVideoChange(this)">
	</p>
	<p>
	<button type="button" id="upload_video_btn">Choose Video File</button>
	</p>

	<script>
	"use strict";

	/* -----------------------------------------------------
	- Process Image
	------------------------------------------------------*/
	document.getElementById("upload_image_btn").addEventListener("click", function () {
	document.getElementById("image_file").click();
	});

	function onImageChange(event) {
	var files = event.files;

	if (files && files.length > 0) {
	var targetFile = files[0];

	try {
	var objectURL = window.URL.createObjectURL(targetFile);
	imageElem.src = objectURL;
	imageElem.style.display = "block";
	} catch (e) {
	try {
	// Fallback if createObjectURL is not supported
	var fileReader = new FileReader();

	fileReader.onload = function (evt) {
	imageElem.src = evt.target.result;
	};

	fileReader.readAsDataURL(targetFile);
	} catch (e) {
	console.log("File Upload not supported: ".concat(e));
	}
	}
	}
	}
	/* -----------------------------------------------------
	- Process Video
	------------------------------------------------------*/


	document.getElementById("upload_video_btn").addEventListener("click", function () {
	document.getElementById("video_file").click();
	});

	function onVideoChange(event) {
	var files = event.files;

	if (files && files.length > 0) {
	var targetFile = files[0];

	try {
	var objectURL = window.URL.createObjectURL(targetFile);
	videoElem.src = objectURL;
	videoElem.style.display = "block";
	} catch (e) {
	try {
	// Fallback if createObjectURL is not supported
	var fileReader = new FileReader();

	fileReader.onload = function (evt) {
	videoElem.src = evt.target.result;
	};

	fileReader.readAsDataURL(targetFile);
	} catch (e) {
	console.log("File Upload not supported: ".concat(e));
	}
	}
	}
	}
	</script>
	</body>

	</html>