Skip to content

Instantly share code, notes, and snippets.

@jefersondaniel

jefersondaniel/index.html

Last active August 29, 2015 14:28
Show Gist options
  • Save jefersondaniel/cc9fe9b3680dd77f4f31 to your computer and use it in GitHub Desktop.
Save jefersondaniel/cc9fe9b3680dd77f4f31 to your computer and use it in GitHub Desktop.
Download ZIP
Image Upload with Angular
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.css">
<style type="text/css">
.cropArea {
background: #E4E4E4;
overflow: hidden;
width: 240px;
height: 240px;
border-radius: 3px;
}
#cropInput {
margin: 10px 0;
}
</style>
</head>
<body ng-app="StarterApp" ng-controller="MainController">
<form class="container" ng-submit="submitForm()">
<div class="form-group">
<label>Image</label>
<div>
<div>Select an image file: <input type="file" id="cropInput" /></div>
<div class="cropArea">
<img-crop
area-type="square"
image="uncroppedImage"
result-image="croppedImage"
result-image-format="image/png"
></img-crop>
</div>
</div>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Description</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Time of Operation</label>
<div class="row">
<div class="col-md-6">
<input type="time" value="00:00" class="form-control" placeholder="From">
</div>
<div class="col-md-6">
<input type="time" value="00:00" class="form-control" placeholder="To">
</div>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://cdn.rawgit.com/alexk111/ngImgCrop/master/compile/minified/ng-img-crop.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>
<script type="text/javascript">
angular
.module('StarterApp', ['ngImgCrop'])
.controller(
'MainController',
function($scope, fileUpload) {
$scope.uncroppedImage='';
$scope.croppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.uncroppedImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#cropInput')).on('change', handleFileSelect);
$scope.submitForm = function() {
var fd = new FormData()
, apiKey = '582525815813436'
, apiSecret = '0wqbUws_oTBLkWIQNGodNN94-ck'
, timestamp = (new Date()).getTime();
fd.append('api_key', apiKey);
fd.append('timestamp', timestamp);
fd.append('signature', CryptoJS.SHA1('timestamp='+timestamp+apiSecret));
fd.append('file', $scope.uncroppedImage);
fileUpload.uploadFileToUrl(fd, 'https://api.cloudinary.com/v1_1/jefersondaniel412/image/upload');
};
}
)
.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(formData, uploadUrl){
$http.post(uploadUrl, formData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}])
.run();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment