Learn with us how to create an amazing File Upload Component in CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
Contents:
1. HTML Code
2. CSS Code
3. Javascript Code
Get your code ⬇️
1. HTML Code
mixin file(name, size, status)
.file
.file-description
.file-name
| #{name}
.file-size
| #{size}MB
.file-status
.status-field
.status-line(style="width: #{status}%")
main
p#inspired-by inspired by
a(href="https://dribbble.com/shots/2481317-031-DailyUI-File-Upload" target="_blank") this
| work
.upload
.upload-field
.icon-field
span(class="fa fa-file-o")
p Drag your files here
.upload-status
h1 File upload
+file("any_file.txt", "0.3", "91")
+file("another_file.txt", "0.6", "79")
+file("plan_on_1-02-13.txt", "0.12", "34")
form
input(type="text" placeholder="URL to the file")#upload-field
input(type="button" value="UPLOAD")#upload-btn.focus-out
2. CSS Code
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,600,700)
$white: #fff
$dwhite: #f3f3f3
$black: #000
$lblack: #111
$llblack: #333
$primary: #8c61a9
$easing: cubic-bezier(0.82, 0.01, 0.77, 0.78)
//flatuicolors.com
$fl-green: #27ae60
$fl-lgreen: #2ecc71
$fl-blue: #2980b9
$fl-lblue: #3498db
$fl-purple: #8e44ad
$fl-lpurple: #9b59b6
$fl-nightblue: #2c3e50
$fl-lnightblue: #34495e
$fl-yellow: #f1c40f
$fl-dorange: #d35400
$fl-orange: #e67e22
$fl-lorange: #f39c12
$fl-red: #c0392b
$fl-lred: #e74c3c
$fl-smoke: #bdc3c7
$fl-lsmoke: #ecf0f1
$fl-gray: #7f8c8d
$fl-lgray: #95a5a6
$fl-pink: #ff4081
$fl-lpink: #ff80ab
*
box-sizing: border-box
&::after, &::before
box-sizing: border-box
body
width: 100vw
min-height: 100vh
display: block
position: relative
z-index: 0
background-image: linear-gradient(35deg, #ccc, #e9e9e9)
font-family: 'Ubuntu'
main
width: 100%
max-width: 960px
margin: 50px auto
position: relative
display: block
z-index: 1
p#inspired-by
text-align: center
position: absolute
top: -50px
left: 50%
transform: translateX(-50%)
a
text-decoration: none
color: $fl-orange
.upload
width: 520px
height: 400px
margin: 0 auto
position: relative
z-index: 2
background-color: transparent
h1,p
margin: 0
.upload-field
width: 75%
height: 100%
background-image: linear-gradient(15deg, lighten($fl-purple, 0%), lighten($fl-lpurple, 0%))
border-radius: 5px
position: absolute
z-index: 4
display: flex
flex-direction: column
justify-content: center
align-items: center
color: lighten($fl-lpurple, 5%)
box-shadow: 0px 10px 40px transparentize($fl-purple, 0)
pointer-events: hover
cursor: pointer
animation: fadeInUp 1s
.icon-field
width: 60%
height: 65%
padding: 10px
border: 4px dashed lighten($fl-lpurple, 5%)
font-size: 30px
text-align: center
text-transform: uppercase
display: flex
flex-direction: column
justify-content: center
align-items: center
transition: transform 0.2s linear
&:hover
transform: scale(1.05)
span
font-size: 90px
transform: rotateY(180deg) translateX(20px)
p
font-weight: 500
.upload-status
position: absolute
display: block
z-index: 5
top: 50%
right: 0
transform: translateY(-50%)
width: 60%
height: 80%
padding: 25px 45px
background-color: #fff
box-shadow: 0px 10px 75px rgba(0,0,0,0.5)
h1
text-transform: uppercase
font-size: 20px
text-align: center
margin: 15px 0px
color: $fl-nightblue
.file
height: 50px
width: 100%
position: relative
margin: 8px 0px
.file-description
display: flex
flex-direction: row
justify-content: space-between
align-items: baseline
.file-name
color: #6e6e6e
font-weight: 500
.file-size
font-size: 13px
text-transform: lowercase
color: lighten($fl-lgreen, 25%)
.file-status
width: 100%
height: 5px
margin-top: 10px
.status-field
background-color: #e9e9e9
height: 5px
width: 100%
border-radius: 2.5px
position: relative
overflow: hidden
.status-line
transition: background-image 0.2s linear
max-width: 100%
min-width: 1%
height: 100%
background-color: $fl-lpurple
background-image: linear-gradient(0deg, $fl-purple 50%, $fl-lpurple 50%)
animation: loading 1.5s
&:hover
.file-status
.status-field
.status-line
background-image: linear-gradient(0deg, $fl-dorange 50%, $fl-orange 50%)
form
width: 100%
height: 50px
position: relative
display: block
input[type="text"]
box-sizing: border-box
display: block
position: absolute
height: 40px
border: 0
outline: 0
padding: 10px 10px
padding-right: 0px
border-radius: 20px
border: 1px solid #ccc
&:focus, &:active
border: 1px solid $fl-lpurple
outline: 0
input[type="button"]
background-color: $fl-lpurple
border: 0
outline: 0
&:active, &:focus
border: 0
outline: 0
border-radius: 20px
color: $white
font-size: 12px
font-weight: 600
display: block
position: absolute
margin-top: 2px
height: 36px
width: 80px
top: 0
right: 0
transition: transform 0.15s ease-in-out, box-shadow 0.35s linear, height 0.0s linear, margin-top 0.0s linear, width 0.0s linear
transform: translateX(25px)
box-shadow: 0px 5px 15px transparentize($fl-purple, 0.2)
&.focus-out
transform: translateX(0px)
box-shadow: 0px 5px 15px transparent
&:hover
height: 40px
margin-top: 0px
width: 80px
@keyframes loading
from
max-width: 0%
20%
max-width: 40%
60%
max-width: 60%
to
max-width: 100%
3. Javascript Code
function _(el){
return $(''+ el +'');
}
_('#upload-field').focusout(function(){
_('#upload-btn').addClass("focus-out");
console.log('Hi!')
});
_('#upload-field').focusin(function(){
_('#upload-btn').removeClass("focus-out")
});
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
