| 123456789101112131415161718192021222324252627282930313233 | <div layout="column" layout-fill layout-align="top center">
    <h1>Upload</h1>
    <div class="col-xs12" ng-show="image != null">
        <md-button ng-repeat="effect in effects" ng-click="applyEffect(effect.id, null)">{{effect.name}}</md-button>
    </div>
    <div ng-show="isUploadVisible()" class="col-xs-6" lu-busy="imageView">
        <div class="center-block">
            <div image-dropzone="fileLoaded(content, file)" class="dropzone">
                <img ng-show="image != null" ng-src="{{ image.content | toDataUrl }}">
                <p ng-hide="image != null">
                    Drag a file here or <a href="" ng-click="pickFile()">pick one</a>
                </p>
            </div>
            <md-input-container class="col-xs-12" ng-show="image != null">
                <label for="name">Name</label>
                <input name="name" id="name" type="text" ng-model="image.name" required>
            </md-input-container>
            <md-button ng-show="canUpload()" ng-click="upload()" >Upload</md-button>
            <input type="file" class="hidden-input" id="filePicker">
        </div>
    </div>
    <div ng-hide="isUploadVisible()">
        Please <a ui-sref="login">log in</a> or <a ui-sref="signUp">sign up</a> to upload images!
    </div>
</div>
 |