Uploadcare File Uploader
Jan 2025
Even though it's part of the core offering, File Uploader has always felt more like a side project: one that's detached from the daily grind, one that you're happy to come back to just because it's fun and you love doing it.
It's a web UI component that allows your users to upload files to your Uploadcare project. My role is to design its look, flow and code its theme. It's in continuous development, tons of decisions are made at each iteration. I'll describe a few big ones made with my direct involvement.
Criteria
The previous version was the first of its kind. It was very much in the era of social sharing buttons. Now, file sharing is a much more trivial, often annoying process, and the role of social networks in it is diminished. In the modern app, uploading is an intermediate step, never the goal. My aim was:
- To minimize interruptions to the flow of the host application. Fewer steps, smaller windows.
- To create a neutral, system-agnostic appearance. Tap into modern OS styles.
- To allow easy theme customization. Limit color and size choices.
Modes
The main mode is an independent sequence of modals. It's the most universal and easy to integrate, although it's not always the best fit.
Theme
There was one condition: it should be vanilla CSS, no frameworks, no preprocessors. At first I tried to derive all values from 3 basic ones. It worked, but any customization beyond those values was incomprehensible. Since the relative color syntax doesn't have the browser support we promise, I needed a lot of huge formulas to do the trick:
:root {
--clr-background-muted: hsl(
var(--h-background),
var(--s-background),
calc(var(--l-background) + 4% * var(--darkmode))
);
}My second attempt was focused on readability. To reduce the number of parameters I limited my color choices even more:
- Only 3 gray colors
- No "active" state for most elements
- Only brand color has derivatives
We also switched from HSL to OKLCH because it's easier to maintain contrast levels when changing colors. Plus it gives access to a wider range of colors of modern displays. Now the entire color scheme looks like this:
:root {
--uc-primary-oklch-light: 47% 0.22 264;
--uc-primary-light: oklch(var(--uc-primary-oklch-light));
--uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
--uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
--uc-background-light: oklch(100% 0 0);
--uc-foreground-light: oklch(21% 0 0);
--uc-primary-foreground-light: oklch(100% 0 0);
--uc-secondary-light: oklch(21% 0 0 / 0.05);
--uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
--uc-secondary-foreground-light: oklch(21% 0 0);
--uc-muted-light: oklch(97% 0 0);
--uc-muted-foreground-light: oklch(40% 0 0);
--uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
--uc-destructive-foreground-light: oklch(59% 0.235 28.5);
--uc-border-light: oklch(92% 0 0);
--uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
}
As a final touch, we've added a few shorthand classes so you can force a color scheme or change the primary color without CSS:
<uc-file-uploader-regular
class="uc-dark uc-purple"
ctx-name="my-uploader"
></uc-file-uploader-regular>See more details in documentation.