"Custom File Upload With file and File name"
Bootstrap 4.1.1 Snippet by sunil8107

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Include the above in your HEAD tag --> </head> <body> <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div class="file-upload"> <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Add Image</button> <div class="image-upload-wrap"> <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" /> <div class="drag-text"> <h3>Drag and drop a file or select add Image</h3> </div> </div> <div class="file-upload-content"> <img class="file-upload-image" src="#" alt="your image" /> <div class="image-title-wrap"> <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button> </div> </div> </div> <p style="padding-top:40px" class="text-center top_spac"> Create by <a target="_blank" href="https://www.linkedin.com/in/sunil-rajput-nattho-singh/">Sunil Rajput</a></p> </body> </htm/>
body { font-family: sans-serif; background-color: #eeeeee; } .file-upload { background-color: #ffffff; width: 600px; margin: 0 auto; padding: 20px; } .file-upload-btn { width: 100%; margin: 0; color: #fff; background: #1FB264; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #15824B; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .file-upload-btn:hover { background: #1AA059; color: #ffffff; transition: all .2s ease; cursor: pointer; } .file-upload-btn:active { border: 0; transition: all .2s ease; } .file-upload-content { display: none; text-align: center; } .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; } .image-upload-wrap { margin-top: 20px; border: 4px dashed #1FB264; position: relative; } .image-dropping, .image-upload-wrap:hover { background-color: #1FB264; border: 4px dashed #ffffff; } .image-title-wrap { padding: 0 15px 15px 15px; color: #222; } .drag-text { text-align: center; } .drag-text h3 { font-weight: 100; text-transform: uppercase; color: #15824B; padding: 60px 0; } .file-upload-image { max-height: 200px; max-width: 200px; margin: auto; padding: 20px; } .remove-image { width: 200px; margin: 0; color: #fff; background: #cd4535; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #b02818; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .remove-image:hover { background: #c13b2a; color: #ffffff; transition: all .2s ease; cursor: pointer; } .remove-image:active { border: 0; transition: all .2s ease; }
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('.image-upload-wrap').hide(); $('.file-upload-image').attr('src', e.target.result); $('.file-upload-content').show(); $('.image-title').html(input.files[0].name); }; reader.readAsDataURL(input.files[0]); } else { removeUpload(); } } function removeUpload() { $('.file-upload-input').replaceWith($('.file-upload-input').clone()); $('.file-upload-content').hide(); $('.image-upload-wrap').show(); } $('.image-upload-wrap').bind('dragover', function () { $('.image-upload-wrap').addClass('image-dropping'); }); $('.image-upload-wrap').bind('dragleave', function () { $('.image-upload-wrap').removeClass('image-dropping'); });

Related: See More

Now UI Kit PRO Angular
Custom Navbar Bootstrap 4
Custom Search input
Simple CSS Custom CheckBoxes and Radios

Questions / Comments:

There is a little problem here, if i upload a file, i remove it and i want to upload the same image again, it doesnt work

Lilou () - 5 years ago - Reply 0

the issue for me was add "true" to clone:

$('.file-upload-input').replaceWith($('.file-upload-input').clone(true));

temalover () - 3 years ago - Reply 0

You should not clone the input but replace with "<input class="file-upload-input" type="file" onchange="readURL(this);" accept="image/*">", seems like clone dont clear the input from the precedent image.

Lilou () - 5 years ago - Reply 0

the issue for me was add "true" to clone:

$('.file-upload-input').replaceWith($('.file-upload-input').clone(true));

temalover () - 3 years ago - Reply 0