Custom content from product team
Shopping
Check with your designers to help you design this section
-
Item 1 $5 -
Item 2 $10
Cart:
Check with your designers to help you design this section
-
Item 1 $5 -
Item 2 $10
Version
RAUL is using DropzoneJS 5.4.0
DropzoneJS Documentation
In addition to RAUL-specific instruction found here, more information is available from DropzoneJS at: http://www.dropzonejs.com.
Installation
RAUL Dropzone plugin is not included in raul.js file. You will have to add it separately if you want to use it. Below you can see an example of how to include RAUL Dropzone to your project.
<link href="https://cdn.realpage.com/raul/v2.78.3/css/raul.min.css" rel="stylesheet"/>
<link
href="https://cdn.realpage.com/raul/v2.78.3/css/plugins/raul-plugin-dropzone.min.css"
rel="stylesheet"
/>
......
<script src="https://cdn.realpage.com/raul/v2.78.3/js/raul.min.js"></script>
<script
src="https://cdn.realpage.com/raul/v2.78.3/js/plugins/raul-plugin-dropzone.min.js"
></script>
Usage
- Run default RAUL Dropzone:
RAUL.plugins.Dropzone.load() - RAUL Dropzone instance:
RAUL.plugins.Dropzone
Examples of files in different states
Example of default file uploader
By default, the RAUL Dropzone uploader puts the files directly below the upload area.
Add the upload path to the .raul-uploader element via the data-url
attribute. Having multiple instances of the RAUL Dropzone on the same page will require an
additional id attribute on every .raul-uploader element.
Note: Because this page is a static file with no upload location, trying to upload files in any of the following examples will fail.
<div class="raul-uploader" data-url="https://cdn.realpage.com/raul/v2.78.3/styleguide/plugins/dropzone">
<div class="raul-uploader-droparea mb-2">
<i class="fa fa-cloud-upload raul-uploader-icon" aria-hidden="true"></i>
<span>Drag files here to upload or <span class="text-primary">Choose File</span></span>
</div>
<div class="raul-uploader-files"></div>
</div>
Example displaying files separate from the dropzone
When you want more control over where uploaded files display, place
<div id="apart-files"></div> in your page
where you want the files to show up.
<div data-url="https://cdn.realpage.com/raul/v2.78.3/styleguide/plugins/dropzone" id="apart-files-and-droparea-example" id="apart-files-and-droparea-example">
<div class="raul-uploader-droparea mb-2" id="apart-droparea">
<i class="fa fa-cloud-upload raul-uploader-icon" aria-hidden="true"></i>
<span>Drag files here to upload or <span class="text-primary">Choose File</span></span>
</div>
</div>
<div id="apart-files"></div>
const apartDropareaAndFilesExample = RAUL.plugins.Dropzone('#apart-files-and-droparea-example', {
clickable: '#apart-droparea',
previewsContainer: '#apart-files',
})
Additional options
RAUL Dropzone provides only the current theme and, since it is built on top of the
DropzoneJS plugin, it's highly customisable.
Before configuring the plugin furthermore we strongly recommend you checking
their documentation
first.
Every option passed to the RAUL.plugins.Dropzone instance will override
its existing value. Options are passed in the second parameter as an object,
just like in
their example.
const mainSelector = '#raul-dropzone'
const additionalOptions = { parameter1: 'some-value', parameter2: 'some-other-value' }
const instanceExample = RAUL.plugins.Dropzone(mainSelector, additionalOptions)