File Dropzone

File Dropzone provides an area where files can be dragged and dropped onto from the Operating System to be uploaded or to be used for other tasks. It also provides a button to open a file dialog and select files from the file system. Per default the File Dropzone shows a list of all selected files below the dropzone.

<mo-file-dropzone closable max-files="5"></mo-file-dropzone>

import { MOFileDropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOFileDropzone closable max-files={5}></MOFileDropzone>;

Examples

Disabled

Set the disabled attribute to disable the dropzone.

<mo-file-dropzone disabled></mo-file-dropzone>

import { MOFileDropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOFileDropzone disabled></MOFileDropzone>;

Disabled drag & drop

Set the no-drag attribute to disable drag and drop.

<mo-file-dropzone no-drag></mo-file-dropzone>

import { MOFileDropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOFileDropzone no-drag></MOFileDropzone>;

Closable

Set the closable attribute to enable closing/removing of a file.

<mo-file-dropzone closable></mo-file-dropzone>

import { MOFileDropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOFileDropzone closable></MOFileDropzone>;

Hide button

Set the no-button attribute to hide the button in the dropzone.

<mo-file-dropzone no-button></mo-file-dropzone>

import { MOFileDropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOFileDropzone no-button></MOFileDropzone>;

Button only

Set the button-only attribute to show only a file input button instead of a dropzone.

<mo-file-dropzone button-only></mo-file-dropzone>

import { MOFileDropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOFileDropzone button-only></MOFileDropzone>;

Customizing labels

Set the label and button-label attribute to override the default labels.

<mo-file-dropzone
  label="Please combine all documents into one PDF file. The maximum file size is 3MB."
  button-label="Upload your CV or Resume"
></mo-file-dropzone>

import { MOFileDropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOFileDropzone
    label="Please combine all documents into one PDF file. The maximum file size is 3MB."
    button-label="Upload your CV or Resume"
  ></MOFileDropzone>
);

No file list

Set the no-file-list attribute to hide the file list.

<mo-file-dropzone no-file-list></mo-file-dropzone>

import { MODropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MODropzone no-file-list></MODropzone>;

Maximum file size

Set the max-file-size attribute to set a maximum file size limit. The user will receive a warning, when the selected file is too large.

<mo-file-dropzone label="Drag and drop to upload (< 10kB)" max-file-size="10000"></mo-file-dropzone>

import { MODropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MODropzone label="Drag and drop to upload (< 10kB)" max-file-size={100}></MODropzone>;

Maximum number of files

Set the max-files attribute to limit the number of files that can be added.

<mo-file-dropzone label="Drag and drop to upload (max. 2 files)" max-files="2"></mo-file-dropzone>

import { MODropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MODropzone label="Drag and drop to upload (max. 2 files)" max-files={2}></MODropzone>;

Accepted file types

Set the accept attribute to set the accept MIME-Type of the files. This attribute is consistent with the native file input. Visit the MDN documentation for the accept attribute for more information.

<mo-file-dropzone accept="image/*"></mo-file-dropzone>

import { MODropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MODropzone accept="image/*"></MODropzone>;

Upload files

Set the url attribute to upload the files to the specified URL.

<mo-file-dropzone url="http://localhost:8080"></mo-file-dropzone>

import { MODropzone } from '@metsooutotec/modes-web-components/dist/react';
const App = () => <MODropzone url="http://localhost:8080"></MODropzone>;

Upload method

Set the method attribute to set the transfer method.

<mo-file-dropzone url="http://localhost:8080" method="PUT"></mo-file-dropzone>

import { MODropzone } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MODropzone url="http://localhost:8080" method="PUT"></MODropzone>;

Upload headers

Set the headers property to define specific headers to be used for the file transfer.

<mo-file-dropzone class="dropzone" url="http://localhost:8080"></mo-file-dropzone>

<script>
  const dropzone = document.querySelector('.dropzone');
  dropzone.headers = { 'My-Awesome-Header': 'header value' };
</script>

import { MODropzone } from '@metsooutotec/modes-web-components/dist/react';

const headers = { 'My-Awesome-Header': 'header value' };

const App = () => <MODropzone url="http://localhost:8080" headers={headers}></MODropzone>;

Custom Icon

Set the icon slot to customize the appearance of the icon within the dropzone.

<mo-file-dropzone>
  <mo-qr-code slot="icon" value="https://www.metso.com/"></mo-qr-code>
</mo-file-dropzone>

import { MODropzone, MOQrCode } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MODropzone>
    <MOQrCode slot="icon" value="https://www.metso.com/" />;
  </MODropzone>
);

Custom Content

Set the content slot to customize the appearance of the dropzone.

<mo-file-dropzone>
  <mo-card slot="content" class="card-footer">
    This card is a dropzone. You can drag all sorts of things in it!
    <div slot="footer">
      <mo-rating></mo-rating>
    </div>
  </mo-card>
</mo-file-dropzone>

<style>
  .card-footer {
    max-width: 300px;
  }

  .card-footer [slot='footer'] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

import { MODropzone, MOCard, MORating } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .card-footer {
    max-width: 300px;
  }

  .card-footer [slot="footer"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
`;

const App = () => (
  <>
    <MODropzone>
      <MOCard slot="content" className="card-footer">
        This card is a dropzone. You can drag all sorts of things in it!
        <div slot="footer">
          <MORating></MORating>
        </div>
      </MOCard>
    </MODropzone>

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

import '@metsooutotec/modes-web-components/dist/components/file-dropzone/file-dropzone.js';

import MOFileDropzone from '@metsooutotec/modes-web-components/dist/react/file-dropzone/';

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/file-dropzone/file-dropzone.js"></script>

Slots

Learn more about using slots.

Properties

Learn more about attributes and properties.

Events

Learn more about events.

Custom Properties

Learn more about customizing CSS custom properties.

Parts

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

• <mo-button>
• <mo-drop-handler>
• <mo-file-item>
• <mo-icon>
• <mo-icon-button>
• <mo-progress-bar>
• <mo-spinner>