npm or yarn
This is how I use the library myself
Last updated
Was this helpful?
This is how I use the library myself
Last updated
Was this helpful?
As with most visual JavaScript libraries there are two sides to the story: getting the JavaScript code in your project, and getting the CSS code. Let's start with JS.
Add dropzone as a dependency to your project:
In your html, make sure you have an element that will act as the dropzone:
Without going too much into detail, historically, there have been plenty of ways to import libraries in JavaScript. Fortunately, not too long ago a standard was introduced that was implemented in browsers as well. This standard is called , also commonly referred to as . This has caused JavaScript modules to become a defacto standard, which is why I recommend to use this approach.
Before JavaScript modules there were quite a few other standards. The only other module standard that Dropzone now supports is the which is what node is using too (note that now).
We also provide a standalone file that you can simply include in your browser. See the corresponding section for this: Stand-alone file.
In order for Dropzone to find the #my-form
the element must already exist. Either put your <script>
import at the end of your HTML file, or use some sort of window.onload
logic.
Dropzone ships with two files: a basic.css
and a dropzone.css
. The dropzone.css
contains all the styling you can see in the examples and is a ready-to-go solution. If you want to have total control over the styling, you can use the basic.css
as a base, and build on top of that, or not use any of the provided CSS files at all.
Importing this CSS file greatly depends on the bundler or framework that you are using so I won't go into much detail here.
You can also simply include the CSS file in your html. Refer to the Stand-alone filesection for this.
You can check out the for ways to handle this with different bundlers.