Drop Zone

API & Customization
1

Thank you to my college, Ian Crowe @KnackPros for sharing and allowing me to create a simple tutorial to create drop zones. This make drag’n’drop so much easier for images and files. :rocket:

2 Likes
2

Thank you, Carl.

If we want to apply this style throughout the app, we can use this global version:

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

Thanks @ian for the global option, good to know :+1:

4

I did it! lol
My first CSS code update. Thanks lol

2 Likes