angular-drop-image

by Antério Vieira

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<div ng-app="myApp">
  <div ng-drop-image ng-model="image.src">
      <hr><p class="text-muted text-center">
        Drag and drop the image here!
      </p><hr>    
      <img class="img-responsive" ng-src="image.src" />
  </div>
</div>

Babel + JSX

var directive = function directive($q, $localStorage) {
        return {
            require: '^ngModel',
            restrict: 'A',
            scope: { 'ngModel': '=' },
            link: function link($scope, $element, $attrs, $ngModel) {
								console.log('Ok, drag and drop!')
                $scope.$storage = $localStorage.$default({
                    image: $scope.ngModel
                });

                $ngModel.$setViewValue($scope.$storage.image);

                $($element[0]).on('dragover dragenter dragleave', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                });

                $($element[0]).on('drop', function (e) {
                    e.stopPropagation();
                    e.preventDefault();

                    var files = e.originalEvent.dataTransfer.files;

                    if (files.length) {
                        readFile(files[0]).then(function (value) {
                            $ngModel.$setViewValue(value);
                            storage(value);
                        });
                    } else {
                        var url = e.originalEvent.dataTransfer.getData('url');
                        $ngModel.$setViewValue(url);
                        storage(url);
                    }

                    $scope.$apply();

                    return false;
                });

                function storage(value) {
                    $scope.$storage.image = value;
                }

                function readFile(file) {

                    var deferred = $q.defer();

                    var reader = new FileReader();

                    reader.onload = function (event) {
                        deferred.resolve(event.target.result);
                    };

                    reader.onerror = function (event) {
                        deferred.reject(e);
                    };

                   ...