zettapi_client/lib/directives/document/uploadImage.html

Admin panel and client-side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project.

<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-12">
      <!--WITHOUT IMAGE-->
      <div ng-if="!item[key]" class="form-group">
        <label>Imagem</label>
        <div class="input-group">
          <input type="file" accept="image/*" file-model="tmp.newFile[key]" class="form-control" ng-disabled="!isEditable">
          <div class="input-group-btn">
            <button type="button" ng-click="upload(key, tmp)" ng-disabled="!tmp.newFile[key] || !isEditable" class="btn"><i class="fa fa-upload"></i></button>
          </div>
        </div>
      </div>
      <!--WITH IMAGE-->
      <div ng-if="item[key]" class="form-group">
        <label>Imagem</label>
        <div class="input-group">
          <input type="text" ng-model="item[key]" disabled="true" class="form-control">
          <div class="input-group-btn">
            <button type="button" ng-click="item[key] = undefined" ng-disabled="!isEditable" class="btn btn-danger"><i class="fa fa-trash"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div ng-if="item[key]" class="row">
    <div class="col-sm-12">
      <img ng-src="{{item[key]}}" class="img-thumbnail img-responsive">
    </div>
  </div>
</div>