<div>
        <div>
          <form name="myForm">
            <fieldset>
              <legend>Upload on form submit</legend>
              Username: <input type="text" name="userName" ng-model="username" size="39" required="">
              <i ng-show="myForm.userName.$error.required">*required</i><br>
              Profile Picture: <input type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required="">
              <i ng-show="myForm.file.$error.required">*required</i>
              <br>
              <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
              <img ngf-src="picFile" class="thumb">
              <span class="progress" ng-show="picFile.progress >= 0">
                  <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'" class="ng-binding"></div>
              </span>
              <span ng-show="picFile.result">Upload Successful</span>
            </fieldset>
            <br>
          </form>
        </div>
        <fieldset>
          <legend>Play with options</legend>
          <div class="up-buttons">
            <div ngf-select="" ngf-drop="" ng-model="files" ngf-model-invalid="invalidFiles" ngf-model-options="modelOptionsObj" ngf-multiple="multiple" ngf-pattern="pattern" ngf-accept="acceptSelect" ng-disabled="disabled" ngf-capture="capture" ngf-drag-over-class="dragOverClassObj" ngf-validate="validateObj" ngf-resize="resizeObj" ngf-resize-if="resizeIfFn($file, $width, $height)" ngf-dimensions="dimensionsFn($file, $width, $height)" ngf-duration="durationFn($file, $duration)" ngf-keep="keepDistinct ? 'distinct' : keep" ngf-fix-orientation="orientation" ngf-max-files="maxFiles" ngf-ignore-invalid="ignoreInvalid" ngf-run-all-validations="runAllValidations" ngf-allow-dir="allowDir" class="drop-box" ngf-drop-available="dropAvailable">Select File
              <span ng-show="dropAvailable"> or Drop File</span>
            </div>
            <br>
            <div ngf-drop="" ng-model="files" ngf-model-invalid="invalidFiles" ngf-model-options="modelOptionsObj" ngf-multiple="multiple" ngf-pattern="'image/*'" ng-disabled="disabled" ngf-drag-over-class="dragOverClassObj" ngf-validate="validateObj" ngf-resize="resizeObj" ngf-resize-if="resizeIfFn($file, $width, $height)" ngf-dimensions="dimensionsFn($file, $width, $height)" ngf-duration="durationFn($file, $duration)" ngf-keep="keepDistinct ? 'distinct' : keep" ngf-enable-firefox-paste="true" ngf-fix-orientation="orientation" ngf-max-files="maxFiles" ngf-ignore-invalid="ignoreInvalid" ngf-run-all-validations="runAllValidations" ngf-allow-dir="allowDir" class="drop-box" ng-show="dropAvailable">
              <span>Paste or Drop Image from browser</span></div>
          </div>
          <div class="custom">
            <label>accept (for select browser dependent): <input type="text" ng-model="acceptSelect"></label><br>
            <label>ngf-capture (for mobile): <input type="text" ng-model="capture"></label><br>
            <label>ngf-pattern (validate file model): <input type="text" ng-model="pattern"></label><br>
            <label>ngf-validate: <input type="text" ng-model="validate" size="49"></label><br>
            <label>ngf-drag-over-class (chrome): <input size="31" type="text" ng-model="dragOverClass"></label><br>
            <label>ngf-model-options: <input type="text" size="43" ng-model="modelOptions"></label><br>
            <label>ngf-resize: <input type="text" size="43" ng-model="resize"></label><br>
            <label>ngf-resize-if: <input type="text" size="43" ng-model="resizeIf"></label><br>
            <label>ngf-dimensions: <input type="text" size="43" ng-model="dimensions"></label><br>
            <label>ngf-duration: <input type="text" size="43" ng-model="duration"></label><br>
            <label>ngf-max-files: <input type="text" size="43" ng-model="maxFiles"></label><br>
            <label>ngf-ignore-invalid: <input type="text" size="43" ng-model="ignoreInvalid"></label><br>
            <label><input type="checkbox" ng-model="multiple">ngf-multiple (allow multiple files)</label>
            <label><input type="checkbox" ng-model="disabled">ng-disabled</label><br>
            <label><input type="checkbox" ng-model="allowDir">ngf-allow-dir (allow directory drop Chrome
              only)</label><br>
            <label><input type="checkbox" ng-model="keep">ngf-keep (keep the previous model values in
              ng-model)</label><br>
            <label><input type="checkbox" ng-model="keepDistinct">ngf-keep="distinct" (do not allow
              duplicates)</label><br>
            <label><input type="checkbox" ng-model="orientation">ngf-fix-orientation (for exif jpeg files)</label><br>
            <label><input type="checkbox" ng-model="runAllValidations">ngf-run-all-validations</label><br>
            <label>Upload resumable chunk size: <input type="text" ng-model="chunkSize"></label><br>
          </div>

          <div class="preview">
            <div>Preview image/audio/video:</div>
            <img ngf-src="!files[0].$error && files[0]">
            <audio controls="" ngf-src="!files[0].$error && files[0]"></audio>
            <video controls="" ngf-src="!files[0].$error && files[0]"></video>
          </div>
        </fieldset>
        <br>
      </div>