How nice or fun can we make the interactions on a website or web application? The truth is that most could be better than we do today. For example, who would not want to use an application like this:
Credit: Jakub Antalik on dribble
In this tutorial we will see how to implement a creative component to upload files, using as inspiration the previous animation by Jakub Antalík. The idea is to bring better visual feedback around what happens with the file after is dropped.
We will be focusing only on implementing the drag
and drop
interactions and some animations, without actually implementing all the necessary logic to actually upload the files to the server and use the component in production.
This is what our component will look like:
You can see the live demo or play with the code in Codepen. But if you also want to know how it works, just keep reading.
During the tutorial we will be seeing two main aspects:
drag
and drop
events.In addition to the usual technologies (HTML, CSS, Javascript), to code our component we will use the lightweight animation library anime.js.
In this case our HTML structure will be quite basic:
As you can see, we only need a form
element and a file
type input
to allow the upload of files to the server. In our component we also need a canvas
element to draw the particles and an SVG icon.
Keep in mind that to use a component like this in production, you must fill in the action
attribute in the form, and perhaps add a label
element for the input, etc.
We will be using SCSS as the CSS preprocessor, but the styles we are using are very close to being plain CSS and they are quite simple.
Let’s start by positioning the form
and canvas
elements, among other basic styles:
Now let’s see the styles needed for our form
, both for the initial state (hidden) and for when it is active (the user is dragging files to upload). The code has been commented exhaustively for a better understanding:
Finally, let’s look at the simple styles that we have applied to the upload icon:
Now our component looks like we want, so we’re ready to add interactivity with Javascript.
Before implementing the drag
and drop
functionality, let’s see how we can implement a particle system.
In our particle system, each particle will be a simple Javascript Object
with basic parameters to define how the particle should behave. And all the particles will be stored in an Array
, which in our code is called particles
.
Then, adding a new particle to our system is a matter of creating a new Javascrit Object
and adding it to the particles
array. Check the comments so you understand the purpose of each property:
Now that we have defined the basic structure of our particle system, we need a loop function, which allows us to add new particles, update them and draw them on the canvas
in each animation frame. Something like this:
Now let’s see how we have defined all the functions that we call inside the loop. As always, pay attention to the comments:
And we have our particle system ready, where we can add new particles defining the options we want, and the loop will be responsible for performing the animation.
Now let’s see how we prepare the upload icon to be animated:
With the previous code, we only need a couple of other functions to pause or resume the animation of the upload icon, as appropriate:
Then we can start adding the drag
and drop
functionality to upload the files. Let’s start by preventing unwanted behaviors for each related event:
Now we will handle the events of type drag
, where we will activate the form
so that it is shown, and we will play the animations for the upload icon:
In case the user leaves the drop
zone, we simply hide the form
again and pause the animations for the upload icon:
And finally the most important event that we must handle is the drop
event, because it will be where we will obtain the files that the user has dropped, we will execute the corresponding animations, and if this were a fully functional component we would upload the files to the server through AJAX.
In the previous code snippet we saw that the function addParticlesOnDrop
is called, which is in charge of executing the particle animation from where the files were dropped. Let’s see how we can implement this function:
Finally, when the particles reach the position of the icon, we must move the icon upwards, giving the impression that the files are being uploaded:
To finish, we must implement the resetAll
function, which resets the icon and all the variables to its initial state. We must also update the canvas
size and reset the component on resize
event. But in order not to make this tutorial any longer, we have not included these and other minor details, although you can check the complete code in the Github repository.
And finally our component is complete! Let’s take a look:
You can check the live demo, play with the code on Codepen, or get the full code on Github.
Throughout the tutorial we saw how to create a simple particle system, as well as handle drag
and drop
events to implement an eye-catching file upload component.
Remember that this component is not ready to be used in production. In case you want to complete the implementation to make it fully functional, I recommend checking this excellent tutorial in CSS Tricks.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!