angular-files-drop
Version:
Easily drag files to element and drop them using html5 api.
68 lines (48 loc) • 1.56 kB
Markdown
# angular-files-drop
> Easily drag files to element and drop them using html5 api.
> Angular and html5 native, No jQuery, No dependency.
## Install
> installing via javascript package manager
```sh
npm install angular-files-drop -S
```
> load via module loader such as jspm, system, webpack, etc, or just include `<script src="xxx.js">`
```html
<script src="./node_modules/angular-files-drop/dist/index.js"></script>
```
> Set dependency to your angular app
```js
angular.module('demoApp', ['angular-files-drop', ...])
```
## Usage
```html
<!-- in html -->
<div style="height:300px; width:100%; border:3px solid red;" files-drop="onFilesDropped($files, $event)">
<span style="color:orange;">files-drop="onFilesDropped($files, $event)"</span>
Hey, drop files here!
<hr>
<img ng-src="{{img.dataURL}}" ng-repeat="img in previews" height="100" width="100" style="object-fit:contain; background: #eee; margin:10px; border:1px solid #999;">
</div>
```
```js
// in controller
angular.module('demoApp', ['angular-files-drop'])
angular.module('demoApp').controller('DemoController', function($scope) {
$scope.onFilesDropped = function($files, $event) {
console.log('$files', $files)
console.log('$event', $event)
$scope.previews = $files
}
})
angular.bootstrap(document, ['demoApp'])
```
## You want to develop, build, and see demo site locally
> launch demo site using node
```sh
# shell
npm install http-server -g
PORT=12345 http-server .
open http://127.0.0.1:12345/demo
```
> preview
