JSFiddle - React, Tailwind, and code Playground

Upload Photo - For Overlay

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div class="container">
  <!-- COPY CONTENT FROM HERE -->
  <form class="form-horizontal animated">
    <div class="form-holder">
      <div class="disable-screen"></div>
      <div class="form-group">
        <div class="canvas-wrapper">
          <div class="fileUpload">
            <div class="placeholder-wrapper">
              <img src="http://i.imgur.com/KaFMOOQ.png?1" >
              <span class="upload-new">Tap to upload a photo <br>to the public photo feed</span>
            </div>
            <input type="file" id="imagebutton2" name="imagebutton2" class="input-file needsclick">
          </div>
          <div id="canvas_image_file">
            <canvas id="photo-upload"></canvas>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12" for="textinput1">Add a caption</label>  
        <div class="col-sm-12">
          <input id="textinput1" name="textinput1" type="text" class="form-control">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12" for="textinput2">Your name</label>  
        <div class="col-sm-12">
          <input id="textinput2" name="textinput2" type="text" class="form-control">
        </div>
      </div>
    </div>
    <hr class="hr-normal">
    <div class="form-btn-wrapper clearfix">
      <p class="offline-notification">You are offline. Check your connection to upload photo</p>
		  <button type="button" class="buttonControl link-button-primary ui-button upload">Upload photo</button>
    </div>
  </form>
  <div id="success-screen" class="animated">
    <div class="message-wrapper">
      <div class="success-icon"></div>
      <p>Your photo was successfully uploaded.</p>
    </div>
    <div class="btn-wrapper">
      <button type="button" class="buttonControl link-button-primary ui-button upload-another">Upload another</button>
      <button...

CSS

.container {
  position: relative;
  max-width: 80%;
  height: 570px;
  margin-top:25px;
  padding: 16px;
  background: #FFF;
  border: 1px solid #E2E2E2;
  overflow: auto;
}

.form-horizontal .form-holder {
  position: relative;
  opacity: 1;
}

.form-horizontal .form-holder.faded {
  opacity: 0.4;
}

.form-horizontal .form-holder .disable-screen {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: all;
  z-index: 10;
}

.form-horizontal .form-holder.faded .disable-screen {
  display: block;
}

.form-horizontal .canvas-wrapper {
  position: relative;
}

.form-horizontal .canvas-wrapper .fileUpload {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 15px;
}

.form-horizontal .canvas-wrapper .fileUpload input.input-file {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0 15px;
  cursor: pointer;
  opacity: 0;
}

.form-horizontal #canvas_image_file {
  position: relative;
  width: 100%;
  background-color: #F5F5F5;
}

.form-horizontal #canvas_image_file:after {
  content: '';
  display: block;
  padding-top: 100%;
}

.form-horizontal canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #c9c9c9;
  background: transparent;
}

.form-horizontal .canvas-wrapper .placeholder-wrapper {
  display: block;
  position: absolute;
  top: calc(50% - 75px);
  right: 0;
  left: 0;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}

.form-horizontal .canvas-wrapper .upload-new {
  display: block;
  margin-top: 10px;
  opacity: 0.6;
}

.form-horizontal hr.hr-normal {
  border-top: 1px solid #e5e5e5;
  margin-bottom: 25px;
}

.ui-button, .link-button-primary {
  clear: none;
  display: inline-block;
  width: auto;
  width: 100%;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border: none;
  border-radius: 6px;
  text-align: center;
}

.link-button-primary {
  background-color:...

JavaScript

var offline = false; // Change TRUE/FALSE to simulate device offline
var success = false; // Change TRUE/FALSE to simulate upload callback

$('.upload').on('click', function() {
	// DISABLE FORM - CHANGE BUTTON TEXT
	$(this).addClass('uploading').html('Uploading <span class="glyphicon glyphicon-repeat"></span>');
  $('.form-holder').addClass('faded');
  
  // SIMULATE UPLOADING TIME
  setTimeout( function() {
  	// HIDE FORM AFTER UPLOADING
  	$('form.form-horizontal').addClass('hidden');
    // SHOW MESSAGES BASED ON CALLBACK
    if (success) {
    	$('#success-screen').addClass('show zoomIn');
    } else {
    	$('#fail-screen').addClass('show zoomIn');
    }
  }, 5000);
});

$('.upload-another').on('click', function() {
	// RESET FORM STATUS
	$('form.form-horizontal')[0].reset();
  $('button.upload').html('Upload photo');
  $('.form-holder').removeClass('faded');
  // SHOW FORM
  $(this).parents('.animated').removeClass('show zoomIn');
	$('form.form-horizontal').removeClass('hidden').addClass('fadeIn');
});

// SHOW OFFLINE MESSAGE BASED ON CALLBACK
if (offline) {
	$('.offline-notification').addClass('show');
  $('.upload').removeClass('link-button-primary').addClass('link-button-secundary').prop('disabled', true);
}