JSFiddle - React, Tailwind, and code Playground

by inadcod

HTML

<input type="file" onchange="readURL(this);" id="imageUpload" class="m20 hidden" />
<div id="holder">
     <img id="noImage" src="#" alt="Click to browse or drag the image of your car" />
</div>

CSS

#holder { width: 418px; min-height: 300px; margin: 10px auto; cursor:pointer;}
#holder img { display: block; margin: 0 auto; max-width:418px; }
#holder img[alt] { font-family:'RobotoRegular'; font-size: 16px; line-height:300px; text-align:center; text-shadow:0 1px 0 #fff;}

.hidden { display: none !important; visibility: hidden; }

JavaScript

// preview the image when creating an advertisement
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#noImage').attr('src', e.target.result).width(416);
        };
        reader.readAsDataURL(input.files[0]);
    }
}



var fileInput = $(':file');
fileInput.change(function(){
    $this = $(this);
    $('#holder').attr($this.val());
})
$('#holder').click(function(){
    fileInput.click();
}).show();