Angular js multiple module app
http://jsfiddle.net/rw6q9/1121/in this example first file upload crop is working
but second file upload is not working
You must Sign In to post a response.
Category: JQuery
in this example first file upload crop is working
but second file upload is not working
#759501
Hello Umesh,
Refer the below code for file upload and crop :
HTML Markup :
<body ng-app="app" ng-controller="Ctrl">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</body>
CSS :
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
Angular JS :
angular.module('app', ['ngImgCrop'])
.controller('Ctrl', function($scope) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
});
Hope this will help you.
Mark the answer if it helped you.
Regards,
Nirav Lalan
DNS Gold Member
"If you can dream it, you can do it."
#759504
i am also solved this
http://jsfiddle.net/rw6q9/1123/
<div ng-app="app" ng-controller="Ctrl">
<div>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" data-shape="rectangle" data-step="imageCropStep" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</div>
<div>
<div>Select an image file 2: <input type="file" id="fileInput1" /></div>
<div class="cropArea">
<img-crop image="myImage1" result-image="myCroppedImage1"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage1}}" /></div>
</div>
</div>
var app1 = angular.module('app', ['ngImgCrop']);
app1.controller('Ctrl', function($scope) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
$scope.myImage1='';
$scope.myCroppedImage1='';
var handleFileSelect1=function(evt) {
var file1=evt.currentTarget.files[0];
var reader1 = new FileReader();
reader1.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage1=evt.target.result;
});
};
reader1.readAsDataURL(file1);
};
angular.element(document.querySelector('#fileInput1')).on('change',handleFileSelect1);
});
http://jsfiddle.net/rw6q9/1123/
<div ng-app="app" ng-controller="Ctrl">
<div>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" data-shape="rectangle" data-step="imageCropStep" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</div>
<div>
<div>Select an image file 2: <input type="file" id="fileInput1" /></div>
<div class="cropArea">
<img-crop image="myImage1" result-image="myCroppedImage1"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage1}}" /></div>
</div>
</div>
var app1 = angular.module('app', ['ngImgCrop']);
app1.controller('Ctrl', function($scope) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
$scope.myImage1='';
$scope.myCroppedImage1='';
var handleFileSelect1=function(evt) {
var file1=evt.currentTarget.files[0];
var reader1 = new FileReader();
reader1.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage1=evt.target.result;
});
};
reader1.readAsDataURL(file1);
};
angular.element(document.querySelector('#fileInput1')).on('change',handleFileSelect1);
});
#759507
Hello Umesh,
Good one.
Keep up with and grow your knowledge and your self.
Regards,
Nirav Lalan
DNS Gold Member
"If you can dream it, you can do it."
Good one.
Keep up with and grow your knowledge and your self.
Regards,
Nirav Lalan
DNS Gold Member
"If you can dream it, you can do it."
Return to Return to Discussion Forum