TikTok Tutorial #73 - How to create a File Upload Component in CSS
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: