JSFiddle - React, Tailwind, and code Playground

by Shaunak Deshpande

HTML

<input type="file" id="mobile-picker"/>
<img id="image"/>

JavaScript

if (window.File && window.FileList && window.FileReader) {
        var filesInput = document.getElementById("mobile-picker");

        if (filesInput) {
            filesInput.addEventListener("change", function (event) {

                var files = event.target.files; //FileList object
                var output = document.getElementById("the-pledge");

                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    //Only pics
                    if (!file.type.match('image') || file.type.match('tif') || file.type.match('gif')) {
                       
                    }
                    else {
                        $('.webcam-overlay').fadeOut(300);
                        $('#webcam').fadeOut(300, function () {
                            $('#image').show();
                            var str = $('#image').attr("src");
                            var n = str ? str.lastIndexOf(',') : 0;
                            var result = str.substring(n + 1);

                            //console.log(result);
                            $('#hdnImgSrc').val(result);

                            $('.take-a-photo').hide()
                            $('.confirm-photo').show()
                        })

                        var picReader = new FileReader();
                        picReader.addEventListener("load", function (event) {

                            var picFile = event.target;

                            var div = document.createElement("div");

                            $('#image').attr("src", picFile.result);
                            usersImage = picFile.result;

                            output.insertBefore(div, null);

                        });

                        //Read the image
                        picReader.readAsDataURL(file);

                        //
                        //send ajax call to log Step2.1 Happy With Photo
                        //step2 field...