I have an example for drag and drop image in angularjs. If I drag and drop the image it is displying on down. I want to drop the image inside the box itself. How can I do this?
Please look at the below image. Drag and drop here box is there on top image cmng on down. I want to drop inside the box itself. Please help me to do this.
// Generated by CoffeeScript 1.6.3
// Couldn't get JSFiddle to work with CoffeeScript as advertised - Link to CoffeeScript Gist: https://gist.github.com/lsiv568/5623361
(function() {
'use strict';
angular.module('reusableThings', []).directive('fileDropzone', function() {
return {
restrict: 'A',
scope: {
file: '=',
fileName: '='
},
link: function(scope, element, attrs) {
var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;
processDragOverOrEnter = function(event) {
if (event != null) {
event.preventDefault();
}
event.dataTransfer.effectAllowed = 'copy';
return false;
};
validMimeTypes = attrs.fileDropzone;
checkSize = function(size) {
var _ref;
if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
return true;
} else {
alert("File must be smaller than " + attrs.maxFileSize + " MB");
return false;
}
};
isTypeValid = function(type) {
if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
return true;
} else {
alert("Invalid file type. File must be one of following types " + validMimeTypes);
return false;
}
};
element.bind('dragover', processDragOverOrEnter);
element.bind('dragenter', processDragOverOrEnter);
return element.bind('drop', function(event) {
var file, name, reader, size, type;
if (event != null) {
event.preventDefault();
}
reader = new FileReader();
reader.onload = function(evt) {
if (checkSize(size) && isTypeValid(type)) {
return scope.$apply(function() {
scope.file = evt.target.result;
if (angular.isString(scope.fileName)) {
return scope.fileName = name;
}
});
}
};
file = event.dataTransfer.files[0];
name = file.name;
type = file.type;
size = file.size;
reader.readAsDataURL(file);
return false;
});
}
};
});
}).call(this);
(function() {
'use strict';
angular.module('reusableThings').controller('TestCtrl', function($scope) {
$scope.image = null
$scope.imageFileName = ''
});
}).call(this);.dropzone {
width: 250px;
height: 45px;
border: 1px solid #ccc;
text-align: center;
padding: 30px;
margin: 20px;
font-family: Arial;
}
.image-container {
width: 300px;
height: 300px;
}
.image-container img {
max-width: 100%;
}
.file-name {
font-family: Arial;
}<div ng-app="reusableThings" ng-controller="TestCtrl">
<div class="dropzone" file-dropzone="[image/png, image/jpeg, image/gif]"
file="image" file-name="imageFileName" data-max-file-size="3">
<span>Drop Image Here</span>
</div>
<div class="image-container">
<img ng-src={{image}} />
<span class="file-name">{{imageFileName}}</span>
</div>
</div>
