# Introduction

The documentation for the service Dropzone Plus.

**Dropzone Plus** is a hosted service by the Dropzone team that handles form uploads (with and without files) for you. It takes care of everything, once the data leaves the browser of your customers.

{% hint style="info" %}
If you're looking for the documentation for the free and open source library Dropzone, you can find the [documentation here](https://docs.dropzone.dev). You can use the two projects completely separately, but they work well together.
{% endhint %}

## How does Dropzone Plus work?

After creating an account on <https://plus.dropzone.dev> you get a URL that you can use as the endpoint of your forms. You can send simple form data to it and also include files. The service is reliable and robust, and you get email notifications whenever a form was submitted, as well as a dashboard where you can access and download your data.

{% hint style="success" %}
By using **Dropzone Plus**, you can host your website as a static site, and still accept form and file uploads without the hassle of running and maintaining your own server.
{% endhint %}


# Getting Started

## Create an account

Head over to [plus.dropzone.dev](https://plus.dropzone.dev) and create an account. You will have to enter your email address and name, and then verify your email address. I'm sure this is not the first time you're doing this 🙃.

## Setup your project

After you've created your account you'll be in the dashboard where you can see an overview of your project. Before you can submit anything to it, you'll need to go to the settings and specify your `Allow Origin URLs` which is just a fancy way of saying where you want to setup your html form.

So let's say that you have a website, and this is the URL where your form is going to be: `https://www.my-website.org/contact` then the URL you'll need to enter here is: `https://www.my-website.org`

{% hint style="warning" %}
The URL should not contain any path after the domain.\
If your website runs on a specific port, then this should be added here as well.
{% endhint %}

(If you're familiar with CORS, then this will not be anything new to you).

Once that's done, you're ready to submit your first form. You'll find the URL you have to send data to in the settings as well (it looks something like `https://plus.dropzone.dev/_p/6eaf12.....3ff`).

## Subscribe to a plan

After you've setup your project and tested a few submissions, you're ready to subscribe to a plan to see your data and/or increase the amount of submissions you want to receive per month.

{% hint style="info" %}
We will offer the ability to create multiple projects with the same user account soon, as well as add multiple users to a single project, so if that is something you're interested in, make sure to [cast your vote](https://github.com/dropzone/dropzone-plus-support/discussions).
{% endhint %}


# How to submit data

Everything you need to know about sending data to Dropzone Plus.

Once you've created an account and setup your project, it's time to build the client side of the equation: the web form.

In general you can think of it this way: to send data to **Dropzone Plus** you setup your form exactly the same way as you would send data to any other server. There is nothing special to it. **Dropzone Plus** accepts submissions as normal form uploads and JSON (if you send your form with JavaScript).

The names of the fields can be completely arbitrary, but there are a few fields that have special meaning:

* `name`
* `firstName`
* `lastName`
* `email`

These fields will be sortable in the dashboard. Follow [this discussion](https://github.com/dropzone/dropzone-plus-support/discussions/12) to get notified when it lands.


# With pure HTML

This is the absolute simplest way to submit data to Dropzone:

```markup
<form action="https://plus.dropzone.dev/_p/{YOUR_PROJECT_ID}" method="post">
  <input type="text" name="name" />
  <input type="text" name="email" />
  <button type="submit">Send</button>
</form>
```

You get the URL (with your project ID) from the dashboard in the settings section.

This simple form will send the data to **Dropzone Plus**, where the data is stored and you will be notified via email about the submission.

{% hint style="info" %}
The user will see a success page and a "Go back" button. If you want to have your own success page, add a "Redirect URL" in the seetings of your project.
{% endhint %}


# Send files with pure HTML

If you also want to send files along your data, it doesn't get much more complicated. All you need to do is to make sure you use `enctype="multipart/form-data"` and additional file input fields:

```markup
<form action="https://plus.dropzone.dev/_p/{YOUR_PROJECT_ID}"
  method="post"
  enctype="multipart/form-data"><!-- << Note the enctype here -->
  
  <input type="text" name="name" />
  <input type="text" name="email" />
  
  <input type="file" name="profilePicture" />
  <input type="file" name="bannerImage" />
  
  <button type="submit">Send</button>
</form>
```

That's it. The file will get uploaded and you'll get access to all the data via email or the dashboard.


# With JavaScript

There are many ways to send data via JavasScript. This would be one of the easiest solutions:

```markup
<button onclick="submit()">Submit data</button>

<script>
  function submit() {
    let data = { name: 'Some name', someRandomData: 'some value' };
    fetch("https://plus.dropzone.dev/_p/{YOUR_PROJECT_ID}", {
      method: "POST",
      body: JSON.stringify(data),
      headers: { "Content-Type": "application/json" },
    });
  }
</script>
```

This encodes the data as JSON and sends it to **Dropzone Plus**. Please note that the `Content-Type` needs to be set appropriately for it to be recognized.


# Send files with JavaScript

Sending files with JavaScript is a bit more complicated, that's why we're going to use the open source library [Dropzone](https://github.com/dropzone/dropzone) in this example.

{% hint style="info" %}
**Dropzone Plus** and the JavaScript library **Dropzone** are completely independent. you can always use one without the other. Feel free to use any client side library you want to submit your data.
{% endhint %}

We will soon provide more examples here, but in the meantime you can look at a usual setup with Dropzone in the official [Dropzone Tutorials Documentation](https://docs.dropzone.dev/configuration/tutorials/combine-form-data-with-files). Just make sure you update the target `action` with the URL you get from Dropzone Plus, and add your website to the Allowed Domains in the settings.


# FAQ

## Where can I learn about new features coming to Dropzone Plus?

To see what we're currently working on, you can view our [Roadmap on GitHub](https://github.com/dropzone/dropzone-plus-support/projects/1). If you want to suggest a new feature or vote on already propsed ones, you can visit the [Discussions on GitHub](https://github.com/dropzone/dropzone-plus-support/discussions).

## What happens if my project reaches the allowed quota?

First of all, we always keep submissions (unless your project exceeds the total allowed size for any project, which is unlikely) so don't worry. If you have selected a plan, which allows for 100 submissions / month and you receive 120 submissions in one month, then the 20 submissions will be available to you the next month (and count against the 100 submissions quota of that month) or you can upgrade to a higher plan to get access immediately.

If you have reached your total allowed file quota, you can either start deleting older submissions, or upgrade to a higher plan.

## Why is there no annual subscription?

At Dropzone we treat our customers the way we like to be treated. The only two reasons for a company to offer an annual plan are to 1) be able to plan ahead a bit better, and 2) to force users to pay for a service they might not actually end up needing or using. The first reason doesn't convince us, and we don't want to force anybody to pay for something they don't need. You pay for what you use, and are free to cancel any time.