Upload File and Take Photo styled into buttons

Instead of normal form file select boxes

HTML
  <form id="form_upload_image_file_button" action="/testpage" method="POST" enctype="multipart/form-data">
      <input type="hidden" name="form_submit_id" value="testpage" />

      <label class="upload_image_file_button">Select a photo
        <input type="file" name="image_file" accept="image/*" multiple="false" onchange="form_upload_image_file_button.submit();" ">
      </label>
  </form>

  <form id="form_upload_image_camera_button" action="/testpage" method="POST" enctype="multipart/form-data">
      <!-- Note this button will only select the camera on mobile devices, on desktop it will open the file picker -->
      <input type="hidden" name="form_submit_id" value="testpage" />

      <label class="upload_image_camera_button">Take a picture
        <input type="file" name="image_file" accept="image/*" capture onchange="form_upload_image_camera_button.submit();" ">
      </label>
  </form>
CSS

/*------------------------*/
/*------------------------*/
/*----- UPLOAD IMAGE -----*/
/*------------------------*/
/*------------------------*/

/*----- CAMERA BUTTON -----*/
label.upload_image_camera_button {
  display: inline-block;
  margin: 1em 0;

  /* Styles to make it look like a button */
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

/* Look like a clicked/depressed button */
label.upload_image_camera_button:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.upload_image_camera_button input {
  display: none;
}


/*----- IMAGE FILE BUTTON -----*/
label.upload_image_file_button {
  display: inline-block;
  margin: 1em 0;

  /* Styles to make it look like a button */
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

/* Look like a clicked/depressed button */
label.upload_image_file_button:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.upload_image_file_button input {
  display: none;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *