https://github.com/kathan/drop-upload
A handler to receive drag-and-drop files, upload the files and monitor the progress those Files.
https://github.com/kathan/drop-upload
Last synced: 8 months ago
JSON representation
A handler to receive drag-and-drop files, upload the files and monitor the progress those Files.
- Host: GitHub
- URL: https://github.com/kathan/drop-upload
- Owner: kathan
- Created: 2015-10-05T21:52:08.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2021-02-18T19:37:55.000Z (over 5 years ago)
- Last Synced: 2025-01-06T18:42:14.771Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# drop-upload
A dependency free library to receive drag-and-drop files, upload the files and monitor the progress those Files.
## Usage
### HTML
```html
body{
font-family: sans-serif;
}
#files{
list-style: none;
}
.du{
vertical-align:middle;
line-height: 100px;
text-align: center;
width: 350px;
height: 100px;
color: grey;
border: 1px dotted grey;
}
.my-class{
color: black !important;
border: 3px solid black !important;
}
.progress-frame{
background-color: #dbdbdb;
width: 200px;
border-radius: 3px;
border: 1px solid #c0c0c0;
overflow: hidden;
}
Drop files here
Upload
-
{{file.name}}
```
### Javascript (Using Angular)
```javascript
var DUApp = angular.module("DUApp",[]);
DUApp.controller('DUCtrl', function ($scope, $http, $rootScope){
var du = DropUpload({targetElement: '#du', hoverClass: 'my-class'});
$scope.upload = function(){
/*************************************************
* Change the value of my_url to set it in action
*************************************************/
var my_url = 'http://your-server.url/that/receives/uploads'
du.upload(my_url, function(e) {
var i = 0;
});
}
du.addEventListener('files-dropped', function(e) {
/************************************************
* e.detail contains an array of the files that were dropped.
*************************************************/
$scope.files = e.detail;
$scope.$apply();
});
du.addEventListener('progress', function(e) {
/*************************************************
* Each file has a progress property that is updated,
* which is being used in the Angular template to set
* the width of the progress bar.
* Since the list of files is in $scope.files,
* all that needs to be done is to call $scope.$apply.
**************************************************/
$scope.$apply();
});
du.addEventListener('error', function(e) {
$('#debug').text('Some bad stuff happened');
});
});
```