Developing a Creative Upload Interaction with JavaScript and Canvas

How nice or fun can we do 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?

I would upload things there, again and again, just to have the pleasure of watching the animation :)

Table of Contents

Well 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:

We will learn how to implement a simple particle system using Javascript and Canvas.

We will implement everything necessary to handle drag and drop events to upload files.

In addition to the usual technologies (HTML, CSS, Javascript), to code our component we will use the lightweight animation library anime.js.

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:

Now our component looks like we want, so we're ready to add interactivity with Javascript.

Developing a simple particle system

Before implementing the drag and drop functionality, let's see how we can implement a simple 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 particles.

Then, adding a new particle to our system is as simple as 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 simple like this:

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:

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 the tutorial longer and heavier, we have not included these and other minor details, although you can check the complete code in the Github repository.

Conclusion

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.

We hope you liked the final result, and that this tutorial has been useful!