Drag and Drop

Allows creating Drag-and-Drop File Uploader. You can also define button to open local file system from the application and upload file for handling data from it.

Usage

In order to be used, the DragAndDropComponent has to be imported:

import {DragAndDropComponent} from "sabre-ngv-UIComponents/dragAndDropFileInput/DragAndDropComponent";

This component does not take any parameters, it is just the body which contains the obligatory dependencies for the proper works of the drag-and-drop functionality. Inside this component you need to put code defining support for drag-and-drop functionality:

<DragAndDropComponent>
    <div
        className={dragAndDropClass}
        onDragStart={e => this.onDragEvent(e)}
        onDragEnter={e => this.onDragEvent(e)}
        onDragOver={e => this.onDragEvent(e)}
        onDragLeave={e => this.onDragEvent(e)}
        onDrop={e => this.onDragEvent(e)}
    >
        <div className="contents">
            <span className="fileName">{fileName}</span>
            <br/>
            <span>Drag & Drop File</span>
            <span>or</span>
            <Button
                key={1}
                className="btn-success select-file-button"
                onClick={this.selectFile}
            >
                Select File
            </Button>
        </div>
    </div>
</DragAndDropComponent>

Adding <Button> inside component is optional. It performs manually opening file system to choose file from and uploading file. For this button to work properly you also need to add invisible input on which select action can be performed:

<form>
    <input
        className="import-files-input"
        type='file'
        onChange={e => this.uploadFile(e)}
    >
    </input>
</form>

Keep in mind that you need to define handling of DragEvent methods. A 'drop' event is used to handle dropping files into the designated area. The other events are used to visualize the dragging action.

You can read more about possible events here: DragEvent.