Skip to content

Instantly share code, notes, and snippets.

@jdelibas

jdelibas/index.html

Last active Jun 20, 2016
Embed
What would you like to do?
mcloud-images-create
<div ng-app="mcloud-pen"
ng-controller="mainController"
class="form-mini-container"
>
<div class="row">
<div class="col-xs-2 col-md-4">
</div>
<div class="col-xs-8 col-md-4">
<div class="white-box">
<form method="post"
action="#">
<h1> Image Upload </h1>
<div class="form-row">
<label for="file">File input</label>
<input type="file"
class="form-control"
ngf-select
ng-model="file"
name="file"
ngf-pattern="'image/*'"
ngf-accept="'image/*'"
ngf-max-size="5MB" />
</div>
<div class="form-row" ng-show="file">
<label for="file">Preview</label>
<div class="cropArea">
<img-crop image="file | ngfDataUrl"
area-type="square"
result-image="croppedDataUrl"
ng-init="croppedDataUrl=''">
</img-crop>
</div>
</div>
<div class="form-row">
<label for="tags">Tags</label>
<input class="form-control"
name="tags"
ng-model="tags"
placeholder="comma separated tags" />
</div>
<div class="form-row">
<label for="uuid">UUID</label>
<input class="form-control"
name="uuid"
ng-model="uuid"
placeholder="uuid" />
</div>
<div class="form-row">
<label for="token">Auth Token (sent via header)</label>
<input class="form-control"
name="token"
ng-model="token"
placeholder="required" />
</div>
<div class="form-row form-last-row">
<div class="row">
<div class="col-xs-6">
<button type="submit"
class="btn btn-primary"
ng-click="onSubmit()"
ng-disabled="disableSubmit">Submit</button>
</div>
<div class="col-xs-6">
<p ng-if="loadPercent && loadPercent !== 100">
Uploading: {{ loadPercent }} %
</p>
<p ng-if="loadPercent !== 0 && loadPercent === 100 && (!response && !errors)">
Waiting for api response
</p>
<p ng-if="response || errors">
Response complete, view details below
</p>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-xs-2 col-md-4">
</div>
</div>
<div class="row" ng-show="response">
<div class="col-md-2">
</div>
<div class="col-xs-12 col-md-8">
<div class="white-box">
<h1> Image </h1>
<img class="img-responsive" ng-src="https://mcloud-api.herokuapp.com/api/v1/images/{{response.data[0].path}}" />
</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row" ng-show="response">
<div class="col-md-2">
</div>
<div class="col-xs-12 col-md-8">
<div class="white-box">
<h1> Response </h1>
<p ng-if="!response">
No response
</p>
<json-formatter ng-if="response"
json="response"
open="3">
</json-formatter>
</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row" ng-show="errors">
<div class="col-md-2">
</div>
<div class="col-xs-12 col-md-6">
<div class="white-box">
<h1> Errors </h1>
<p ng-if="errors">
No errors
</p>
<json-formatter json="errors"
open="3">
</json-formatter>
</div>
</div>
<div class="col-md-2">
</div>
</div>
<div>
//
// mcloud-pen main module
//
(function() {
'use strict';
angular
.module('mcloud-pen', [
'angular-loading-bar',
'toastr',
'ngFileUpload',
'ngImgCrop',
'jsonFormatter'
])
.controller('mainController', mainController);
mainController.$inject = ['$scope', 'Upload', 'toastr',];
function mainController($scope, Upload, toastr) {
var token = localStorage.getItem('mcloud-staging-token');
if (token) {
$scope.token = token;
}
$scope.onSubmit = onSubmit;
$scope.disableSubmit = false;
$scope.response = null;
$scope.errors = null;
$scope.loadPercent = 0;
function onSubmit() {
$scope.loadPercent = 0;
$scope.response = null;
$scope.errors = null;
$scope.disableSubmit = true;
Upload.upload({
url: 'https://mcloud-api.herokuapp.com/api/v1/images/',
data: {
image: Upload.dataUrltoBlob($scope.croppedDataUrl, 'cropped-image'),
tags: $scope.tags,
uuid: $scope.uuid
},
headers: {
'Authorization': $scope.token
}
}).then(function (resp) {
toastr.success('good job');
$scope.disableSubmit = false
$scope.response = resp.data;
localStorage.setItem('mcloud-staging-token', $scope.token);
},
function (resp) {
toastr.error(resp.status);
$scope.errors = resp.data;
$scope.disableSubmit = false;
},
function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
$scope.loadPercent = progressPercentage;
});
}
}
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.0.4/ng-file-upload-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.0.4/ng-file-upload.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.js"></script>
html, body{
background-color: #f3f3f3;
}
.form-mini-container{
font: normal 14px sans-serif;
text-align: center;
color: #5f5f5f;
}
.form-mini-container h1{
color: #4c565e;
font-size: 24px;
padding-bottom: 30px;
border-bottom: 2px solid #6caee0;
font-weight: bold;
margin: 0;
}
.white-box{
overflow: auto;
padding: 12px;
background-color: #ffffff;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.form-row{
display: block;
text-align: left;
margin-bottom: 23px;
}
/* Making the form responsive. Remove this media query
if you don't need the form to work on mobile devices. */
@media (max-width: 600px) {
.form-mini-container{
margin-top: 0;
}
}
/*
100% height columns using flex
*/
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
margin: 1em 1em;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.json-formatter-row {
text-align:left;
}
.json-formatter-row .string {
white-space: initial;
}
.cropArea {
background: #E4E4E4;
overflow: hidden;
height: 350px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-toastr/1.7.0/angular-toastr.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/json-formatter/0.6.0/json-formatter.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-img-crop/0.3.2/ng-img-crop.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment