Search results

Drag and drop

21 Oct 2021 / 2 minutes to read

The uploader component allows you to drag and drop the files to upload. You can drag the files from file explorer and drop into the drop area. By default, the uploader component act as drop area element. The drop area gets highlighted when you drag the files over drop area.

Custom drop area

The uploader component allows you to set external target element as drop area using the dropArea property. The element can be represented as HTML element or element’s id.

Source
Preview
index.js
index.html
index.css
Copied to clipboard
// initialize Uploader component
var uploadObject = new ej.inputs.Uploader({
    autoUpload: false,
    dropArea: document.getElementById('droparea')
});

// render initialized Uploader
uploadObject.appendTo('#fileupload');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Uploader Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container" style="width: 90%">
        <div id="droparea">
            Drop files here to upload
        </div>
        <div id="uploadfile">
            <input type="file" id="fileupload" name="UploadFiles">
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
  visibility: hidden;
  padding-left: 5%;
  width: 100%;
}
#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.fileupload {
  margin: 20px auto;
  width: 400px;
}
#droparea {
  padding: 50px 25px;
  margin: 30px auto;
  border: 1px solid #c3c3c3;
  text-align: center;
  width: 20%;
  display: inline-flex;
}
.e-file-select,
.e-file-drop {
  display: none;
}
body .e-upload-drag-hover {
  outline: 2px dashed brown;
}
#uploadfile {  
  width: 60%;
  display: inline-flex;
  margin-left: 5%;
}

Customize drop area

You can customize the appearance of drop area by overriding the default drop area styles. The class “” and “” is available to handle this customization.

Source
Preview
index.js
index.html
index.css
Copied to clipboard
var uploadObject = new ej.inputs.Uploader({
        asyncSettings: {
            saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
            removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
        },
        dropArea: document.getElementById('droparea')
    });
    // render initialized Uploader
    uploadObject.appendTo('#fileupload');
    document.getElementById('browse').onclick = function () {
        document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
        return false;
    };
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Uploader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Uploader Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="dropArea" style="height: auto; overflow: auto">
            <span id="drop"> Drop files here or <a href="" id="browse"><u>Browse</u></a> </span>
            <input type="file" id="fileupload">
        </div>
      </div>
    

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
  visibility: hidden;
}
#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
.e-file-select-wrap {
    display: none;
}
#dropArea .e-upload {
    border: 0;
    margin-top: 15px;
}
#drop {
    padding-left: 30%;
}
#dropArea {
    min-height: 18px;
    border: 1px dashed #c3c3cc;
    padding-top: 15px;
    margin: 20px auto;
    width: 400px;
}