{"_id":"ng-flow","_rev":"4-35fd3e76ca87155d587ce1c89a164cb2","name":"ng-flow","description":"Flow.js html5 file upload extension on angular.js framework","dist-tags":{"latest":"2.1.4"},"versions":{"2.1.4":{"name":"ng-flow","version":"2.1.4","description":"Flow.js html5 file upload extension on angular.js framework","scripts":{"test":"grunt test"},"repository":{"type":"git","url":"git://github.com/flowjs/ng-flow.git"},"keywords":["flow.js","flow","resumable.js","resumable","angular","angular.js","angular-upload","file upload","upload"],"author":{"name":"Aidas Klimas"},"license":"MIT","devDependencies":{"grunt":"~0.4","grunt-contrib-uglify":"~0.4","grunt-contrib-concat":"~0.3.0","grunt-karma":"~0.6.2","grunt-bump":"0.0.13","grunt-contrib-clean":"~0.5.0"},"bugs":{"url":"https://github.com/flowjs/ng-flow/issues"},"homepage":"https://github.com/flowjs/ng-flow","_id":"ng-flow@2.1.4","dist":{"shasum":"889fd3d0000a68b3f59b493ed4cc503f9ecef428","tarball":"https://registry.npmjs.org/ng-flow/-/ng-flow-2.1.4.tgz","integrity":"sha512-3/NlRxNF5NYX7uzjFpkcqEIXwMHshaHH5vENt1Oe9LlqgJbHgmZhnTiP13tfeguuJjOi8nKiV8sCkrauKU88MA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwVeQNAalhH/yaQ+/Rfa/j1CIawvl8LUup/+iQgDaqoQIgNErF+kOH81zP8j/4itkwdG0vYzICAYlcQ3RIDaxebw0="}]},"_from":"ng-flow-master","_npmVersion":"1.4.3","_npmUser":{"name":"ws-malysheva","email":"ws.malysheva@gmail.com"},"maintainers":[{"name":"ws-malysheva","email":"ws.malysheva@gmail.com"}]}},"readme":"What is ng-flow?\n============\n\nFlow.js extensions for angular.js framework, no 3rd party JS dependencies required!\n\nng-flow extension is based on [Flow.js](https://github.com/flowjs/flow.js) library.\n\nDemo: http://flowjs.github.io/ng-flow/\n\nHow can I install it?\n============\n1) Get the library:\n\n**Direct Download**\nDownload a latest build from https://github.com/flowjs/ng-flow/releases\nit contains development and minified production files in `dist/` directory,\nthey are also concatenated with core flow.js library.\n\n**Using Bower**\n \n bower install ng-flow#~2\n \n**Git Clone**\n \n git clone https://github.com/flowjs/ng-flow\n \n**Using Yeoman**\n\n bower install \"ng-flow#~2\" --save\n grunt bower-install\n \n2) Add the module to your app as a dependency:\n\n angular.module('app', ['flow'])\n \nHow can I use it?\n============\n\nFirst of all wrap places there you are going to use Flow.js\n````html\n
\n ... other flow directives goes here ...\n
\n````\n\nThis directive is going to add $flow variable to current scope.\nAlso directive can be nested, because `$flow` variable is going to be overridden.\n`$flow` is instance of [Flow](https://github.com/flowjs/flow.js#flow).\n\n\nSecondly you need to assign some upload buttons:\n````html\n\n\n````\n\nFirst button is for normal uploads and second is for directory uploads.\n\n\nNow you need to display uploaded files, all you need to do is to loop files array.\nFiles array is attached to flow object named `$flow`.\n````html\n
\n
{{$index+1}}
\n
{{file.name}}
\n
\n````\n\nfile is instance of [FlowFile](https://github.com/flowjs/flow.js#flowfile).\n\n\nHow can I drop files?\n============\n\nUse `flow-drop` directive:\n````html\n
\n Drag And Drop your file here\n
\n````\n\n### Prevent dropping files on a document\nUse `flow-prevent-drop` directive on `body` element:\n````html\n\n\n\n````\n\n### How to add some styles while dropping a file?\nUse `flow-drag-enter` directive:\n````html\n
\n
\n````\nNote: `flow-drag-leave` attribute can't be used alone, it is a part of `flow-drag-enter` directive.\n\n### How to dynamically disable drop area?\n````html\n
\n Drag And Drop your file here\n
\n````\nSee example at `samples/dataurl/`.\n\n\nHow can I preview uploaded image?\n============\n\nUse flow-img directive:\n````html\n\n````\n\nImage will be automatically updated once file is added. No need to start upload.\n\n\nHow can I set options for flow.js?\n============\n\nUse config:\n````javascript\nvar app = angular.module('app', ['flow'])\n.config(['flowFactoryProvider', function (flowFactoryProvider) {\n flowFactoryProvider.defaults = {\n target: '/upload',\n permanentErrors:[404, 500, 501],\n minFileSize: 0\n };\n // You can also set default events:\n flowFactoryProvider.on('catchAll', function (event) {\n ...\n });\n // Can be used with different implementations of Flow.js\n // flowFactoryProvider.factory = fustyFlowFactory;\n}]);\n````\n\nalso can be configured on \"flow-init\" directive:\n````html\n
\n\n
\n````\n\n\nHow can I catch events?\n============\n\nEvents are listed inside `flow-init` directive:\n````html\n
\n \n\n
\n````\n\n### How can I catch an event in a controller?\nIf controller is on the same scope as `flow-init` directive or in a child scope,\nthen we can catch events with `$on`. Events are prefixed with `flow::`.\n````javascript\n$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {\n event.preventDefault();//prevent file from uploading\n});\n````\nsecond argument is always a `flow` instance and then follows event specific arguments.\n\nHow can I assign flow to a parent scope?\n============\n\nUse `flow-name` attribute and set it to any variable in the scope.\n````html\n
\n ... Flow is set to obj.flow ...\n I have uploaded files: #{{obj.flow.files.length}}\n
\n````\n\nHow can I support older browsers?\n============\nGo to https://github.com/flowjs/fusty-flow.js\nand add to your config:\n````javascript\nvar app = angular.module('app', ['flow'])\n.config(['flowFactoryProvider', function (flowFactoryProvider) {\n flowFactoryProvider.factory = fustyFlowFactory;\n}]);\n````\n\nNeed example?\n============\nClone this repository and go to \"ng-flow/samples/basic/index.html\".\nSingle image upload \"ng-flow/samples/image/index.html\".\n\n\nContribution\n============\nTo ensure consistency throughout the source code, keep these rules in mind as you are working:\n\n* All features or bug fixes must be tested by one or more specs.\n\n* With the exceptions listed below, we follow the rules contained in [Google's JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml):\n\n * Wrap all code at 100 characters.\n\n * Instead of complex inheritance hierarchies, we prefer simple objects. We use prototypical\ninheritance only when absolutely necessary.\n\n","maintainers":[{"name":"ws-malysheva","email":"ws.malysheva@gmail.com"}],"time":{"modified":"2022-06-21T03:37:44.788Z","created":"2014-03-19T08:42:59.868Z","2.1.4":"2014-03-19T08:42:59.868Z"},"homepage":"https://github.com/flowjs/ng-flow","keywords":["flow.js","flow","resumable.js","resumable","angular","angular.js","angular-upload","file upload","upload"],"repository":{"type":"git","url":"git://github.com/flowjs/ng-flow.git"},"author":{"name":"Aidas Klimas"},"bugs":{"url":"https://github.com/flowjs/ng-flow/issues"},"license":"MIT","readmeFilename":"README.md"}