Insert DMXzone DropZone on your page

Create server action

Note that the DMXzone DropZone Add-on requires HTML5 File Upload Extension. Click the add new server action button (1), in the DMXzone Server Connect panel and add a name for it (2).

Open DMXzone DropZone

Then, click anywhere on your page (1), where you'd like to add the dropzone and open the insert panel (2). Select DMXzone DropZone (3) under the DMXzone menu.

Change the dropzone name

You can change the default dropzone parameter name. for our tutorial we change it to myDropZone.

Select a theme

There are two themes available, Bootstrap and default. The bootstrap theme requires you to have a Bootstrap 3 based page, while the default one can be used on any page. We select the default one.

Size of the dropzone

You can customize the width and minimum height of the dropzone. We leave these to their default values.

Select the server action, allowed files and size

Select the server action (1), that we've created earlier and choose the allowed file types. For our tutorial we allow all types (2). Set the maximum allowed file size in megabytes. We leave this setting to its default value 256Mb (3).

Customize the appearance

Choose whether the dropzone should be clickable (1) or not. If this option is disabled, the users will only be able to drag and drop their files into it. Choose whether the queue (2) should be auto processed or not. If this option is enabled, the files will be uploaded as soon as the users drop them into the dropzone. Also, you can select whether to upload multiple files (3) at once, or upload the files one by one. You can set the maximum parallel uploads, if you enable this option. Click OK when you're done.

Add the HTML5 File Upload

Now, let's add the HTML5 File Upload, to our server action, and connect it to the dropzone. Click globals(1) and link the page (2), containing the dropzone. Make sure to select the DMXzone Dropzone (3) from the form dropdown.

Add HTML5 File Upload to steps

Rightclick steps(1) and add file upload (2).

Add the upload field

Addname for your file upload (1) and click the server data bindings button (2) in order to select your upload field.

Data binding pickup

Expand globals (1) and under the POST variables, select the dropzone (2) that you've added on your page. Click the select button (3).

Choose upload folder

Don't forget to choose your upload folder (1) and save your server action (2). The server action will be executed automatically, when the files are dropped into the dropzone, so we do not need to create a server action executor.

Save and preview

You can see, how easy it is to just drag our files into the dropzone. As soon as we drop them into it, they are being uploaded to our server. So that's how easy it is to use DMXzone Dropzone.