A drag and drop file upload library that it friendly and fun to use. It offers great accessibility, validation and a smooth user experience.
You can install dropper using npm
npm install @baianat/dropper
# or using yarn
yarn add @baianat/dropper<head>
<link rel="stylesheet" href="dist/css/dropper.css">
</head>
<body>
...
<script type="text/javascript" src="dist/js/dropper.js"></script>
</body>You need a form element to bind dropper to it.
<form class="dropper" id="dropper"></form>Then create new dropper instance, you have to path the uploading url to it
let dropper = new Dropper('#dropper', {
url: `${server}/upload`
});dropper comes with may events that helps you to track file uploading and status
| event name | description |
|---|---|
uploadFailed |
emits when a file uploaded successfully |
uploadSuccees |
emits when a file failed to upload |
fileDeleted |
emits when an uploaded file deleted |
dropper.on('uploadFailed', ($file) => {
console.log('😭', $file.name, 'uploading failed');
});Copyright (c) 2017 Baianat
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent