angularjs-imageupload-directive

<html ng-app="imageuploadDemo"> <head> <title>imageupload Demo</title> <script src="../../bower_components/angular/angular.min.js" type="text/javascript"></script> <script src="../../src/imageupload.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body ng-controller="DemoCtrl"> <form name="contactform"> <div image-drop append-data-uri ng-model="image" ng-controller="new-scope"> <h2>Single image drag and drop</h2> <div> <label for="inputImage">Image</label> <img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/> <button type="submit" ng-click="single(image.file)" ng-disabled="!image"> Add </button> <button type="reset">Clear</button> <br> <pre>{{image | json}}</pre> </div> </div> <hr /> <div images-drop append-data-uri ng-model="images" ng-controller="new-scope"> <h2>Multi image drag and drop</h2> <div> <label for="inputImage">Image</label> <img ng-repeat="img in images" ng-src="{{img.dataURL}}" type="{{img.file.type}}"/> <button type="submit" ng-click="single(image.file)" ng-disabled="!image"> Add </button> <button type="reset">Clear</button> <br> <pre>{{images | json}}</pre> </div> </div> <hr /> <div images-drop append resize resize-max-height="300" resize-max-width="250" resize-quality="0.7" append-data-uri ng-model="images" ng-controller="new-scope"> <h2>Multi image + resize drag and drop</h2> <div> <label for="inputImage">Image</label> <img ng-repeat="img in images" ng-src="{{img.dataURL}}" type="{{img.file.type}}"/> <br> <img ng-repeat="img in images" ng-src="{{img.resized.dataURL}}" type="{{img.file.type}}"/> <button type="reset">Clear</button> <br> <pre>{{images | json}}</pre> </div> </div> <hr /> <h2>Single image</h2> <div ng-controller="new-scope"> <label for="inputImage">Image</label> <button input-image append-data-uri ng-model="image"> Custom Upload button </button> <img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/> <button type="submit" ng-click="single(image.file)" ng-disabled="!image"> Add </button> <button type="reset">Clear</button> <br> <pre>{{image | json}}</pre> </div> <hr /> <h2>Single image with resizing</h2> <div ng-controller="new-scope"> <label for="inputImage2">Image 2</label> <button input-image id="inputImage2" append-data-uri resize resize-max-height="300" resize-max-width="250" resize-quality="0.7" ng-model="image"> Custom Upload Button </button> <p>Original</p> <img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/> <p>Resized</p> <img ng-show="image" ng-src="{{image.resized.dataURL}}"/> <button type="submit" ng-click="single(image.file)" ng-disabled="!image"> Add </button> <br> <pre>{{image | json}}</pre> </div> <hr /> <h2>Multiple images</h2> <div ng-controller="new-scope"> <label for="inputImage3">Image 3</label> <button input-images append id="inputImage3" append-data-uri ng-model="images"> Upload lots of images </button> <p>Originals</p> <img ng-repeat="img in images" ng-src="{{img.dataURL}}" type="{{img.file.type}}"/> <button type="submit" disabled>Add</button> <br> <pre>{{images | json}}</pre> </div> <hr /> <h2>Multiple images with resizing</h2> <div ng-controller="new-scope"> <label for="inputImage4">Image 4</label> <button input-images id="inputImage3" append-data-uri resize resize-max-height="300" resize-max-width="250" resize-quality="0.7" ng-model="images"> Don't you just love images? </button> <p>Originals</p> <img ng-repeat="img in images" ng-src="{{img.dataURL}}" type="{{img.file.type}}"/> <p>Resized</p> <img ng-repeat="img in images" ng-src="{{img.resized.dataURL}}" /> <button type="submit" disabled>Add</button> <br> <pre>{{images | json}}</pre> </div> <hr /> <h2>Single image with covering</h2> <div ng-controller="new-scope"> <label for="inputImage5">Image 5</label> <button input-image id="inputImage5" ng-model="image" append-data-uri cover cover-height="300" cover-width="100" cover-x="center" cover-y="bottom" resize-quality="0.7"> Images everywhere </button> <p>Original</p> <img ng-show="image" ng-src="{{image.dataURL}}" type="{{image.file.type}}"/> <p>Resized</p> <img ng-show="image" ng-src="{{image.resized.dataURL}}"/> <button type="submit" ng-click="single(image.resized)" disabled>Add</button> <br> <pre>{{image | json}}</pre> </div> <hr /> </form> <p>Uploaded Image / Size: {{sizeInBytes}} Bytes</p> <img ng-src="{{uploadedImgSrc}}" /> </body> </html>