mcloud-images-create

index.html

<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-images-create.markdown

mcloud-images-create

A Pen by James Delibas on CodePen.

License.

script.js

//
// 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;
            });
        }

    }
})();

scripts

<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>

style.css

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;
}

styles

<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" />