File/Image Upload with Custom Style

API & Customization Show & Tell
1

Here’s how to customize your Image upload / File upload input.

For example you can style it like this:

Screen Shot 2021-12-15 at 9.54.31 PM

To add this to your Knack app:

/* Add this to your CSS */

/* Restyles file input */
/* Note: Replace field_XXX with your own */

#field_123_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_123_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;
}




Or…
To style all the file inputs in your app use this version instead:

/* Add this to your CSS */

/* Restyles all file inputs */

.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: 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;
}

Enjoy,

Ian
Knack Pros

6 Likes
2

Thanks for this Ian. With regards to the “drop zone”, in my experience you have to be very precise when dropping and image on the button otherwise it simply opens in the browser.

I can’t see anything in the code (I’m not a coder) that would indicate anything has been changed in this regard.

I’m I missing something :crazy_face:

3

@CarlHolmes

Get ready to enter the drop zone :crazy_face:

The CSS pads the input so the drop zone becomes a giant button, basically.

Here’s a demo:
drop-zone

:metal:

1 Like
4

@KnackPros - Nice one Ian :+1:
Just used on it an new app, looks great and works really well, less a drop zone, more a Mic drop :microphone::facepunch:

image
image837×1446 57.6 KB

1 Like
5

I’m only seeing the text “Drop file here or click to upload” and not the border. When I click on the “Drop file here or click to upload” text it brings up file explorer as expected. However I cannot drag and drop. It just says copy when I hover the file over the text. Do I need to make changes to the size of the border given that I have 2 columns of data and not 1 as you show in your example?

6

Hi @JuliaGlowa31189

I’m trying to reproduce your layout and tried it with 2 columns and 3 columns. It’s possible some other CSS could be interfering. I’d be happy to take a look if you share a link (so I can inspect the DOM using the browser tools).

Screen Shot 2021-12-16 at 12.16.48 PM
Screen Shot 2021-12-16 at 12.16.48 PM1576×618 29.9 KB

Screen Shot 2021-12-16 at 12.16.01 PM
Screen Shot 2021-12-16 at 12.16.01 PM1988×784 29.9 KB

7

You were correct. An existing css is interfering with this one. It was actually one that I had left a comment that it wasn’t working properly so for now I’m just going to fully comment it out. Thanks for your help and your post. It’s going to really add benefit to the app that I’m developing.

1 Like