Drop Zone

Allows you to drop files onto a form or page.

/* Add this to your CSS */

/* Restyles File Input */
/* Change XXX to your field id */

#field_XXX_upload {
  border: 1px dashed blue;
  background-color: #f8f8f8;
  cursor: pointer;
  padding-bottom: 100px;
  padding-left: 90px;
  padding-right: 40px;
  padding-top: 24px;
  width: 300px;
}
#field_XXX_upload:before {
  content: "Drop file here or click to upload";
  font-size: 1.1em;
  font-weight: 500;
  color: black;
  margin-bottom: 20px;
  margin-left: -56px;
}
/* Removes "no file uploaded" text because otherwise it stays on screen when the user drags-and-drops a file */
input[type="file"] {
  color: transparent;
}

Sign up with Knack for free