JavaScript File Uploader with Drag and Drop functionality
The Uploader component allows you to drag and drop the files and folders to upload. You can drag the files or folders 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.
The Uploader component allows you to set external target element as drop area using the dropArea property. The external element can be represented as HTML element or element’s ID.
Directory upload
You can upload the directories with EJ2 Uploader component by using directoryUpload API. If the directoryUpload property is set to true, you are allowed to upload a whole directory instead of single file either by selecting or drag and drop.
[index.ts]
let uploadObj: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
autoUpload: false,
directoryUpload: true
});
uploadObj.appendTo('#fileupload');
Custom drop area
You can set the custom drop area for Uploader component as stated below.
[index.html]
<div class="control_wrapper">
<div id='droparea'>
Drop files here to upload
</div>
<div id='uploadfile'>
<input type="file" id="fileupload" name="UploadFiles" />
</div>
</div>
<style>
#droparea {
padding: 50px 25px;
margin: 30px auto;
border: 1px solid #c3c3c3;
text-align: center;
width: 34%;
display: inline-flex;
}
#uploadfile {
width: 60%;
display: inline-flex;
margin-left: 5%;
}
.control_wrapper {
max-width: 500px;
margin: auto;
}
.e-upload {
width: 100%;
position: relative;
margin-top: 15px;
float: none;
}
</style>
[index.ts]
let uploadObj: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
autoUpload: false,
dropArea: '#droparea'
});
uploadObj.appendTo('#fileupload');
You can get the output as follows.
Please find the sample from the following link.
Sample Link: https://stackblitz.com/edit/p1uwvf-pgvw43?file=index.html
For more information about Uploader functionalities, refer to the UG Documentation, API Reference and Samples section.
Conclusion
I hope you enjoyed learning about how to File Uploader with Drag and Drop functionality.
You can refer to our JavaScript Uploader feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Uploader example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
