JSFiddle - React, Tailwind, and code Playground

by BSmyth634

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<!-- UploadCare -->
<script>
  UPLOADCARE_LOCALE = "en";
  UPLOADCARE_TABS = "file url facebook gdrive dropbox instagram evernote flickr skydrive";
  UPLOADCARE_PUBLIC_KEY = "d40a6f517380866d1230";

</script>
<script charset="utf-8" src="//ucarecdn.com/widget/2.5.5/uploadcare/uploadcare.full.min.js"></script>

<body ng-app="uploadcareWidget">
  <form name="myForm">
    <fieldset>
      <legend>Upload on form submit</legend>
      Username:
      <input type="text" name="userName" ng-model="username" size="31" required>
      <i ng-show="myForm.userName.$error.required">*required</i>
      <br>Photo:
      <input class="thumb"
      type="hidden" 
      ng-model="object.image.info.uuid" 
      role="uploadcare-uploader" 
      data-crop="disabled" 
      data-preview-step="true" 
      data-images-only="true"
      on-upload-complete="onUCUploadComplete(info)"
      on-widget-ready="onUCWidgetReady(widget)"/>
      
      <br>
      <button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
      <span class="progress" ng-show="picFile.progress >= 0">
        <div style="width:{{picFile.progress}}%" 
            ng-bind="picFile.progress + '%'"></div>
      </span>
      <span ng-show="picFile.result">Upload Successful</span>
    </fieldset>
    <br>
  </form>
  <h1>
  Header
  </h1>
  <p>
    Paragraph
  </p>
  <img ng-bind="object.image.info.uuid" ngf-thumbnail="picFile" class="thumb">
</body>

CSS

.thumb {
  width: 204px;
  height: 204px;
  float: none;
  position: relative;
  top: 7px;
}

form .progress {
  line-height: 35px;
}


}
.progress {
  display: inline-block;
  width: 100px;
  border: 3px groove #CCC;
}
.progress div {
  font-size: smaller;
  background: orange;
  width: 0;
}

JavaScript

angular.module('ng-uploadcare', [])
  .directive('uploadcareWidget', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        onWidgetReady: '&',
        onUploadComplete: '&',
        onChange: '&',
        ngModel: '='
      },
      controller: ['$scope', '$element', '$attrs', '$log', function($scope, $element, $attrs, $log) {
        if(!uploadcare) {
          $log.error('Uploadcare script has not been loaded!.');
          return;
        }
        $element.attr('type', 'hidden');
        $scope.widget = uploadcare.Widget($element);
        $scope.onWidgetReady({widget: $scope.widget});
        $scope.widget.onUploadComplete(function(info) {
          $scope.onUploadComplete({info: info});
        });
        $scope.widget.onChange(function(data) {
          // add data binding for hidden inputs
          if (data) {
            data.promise().done(function(info) {
              $scope.$apply(function () {
                $scope.ngModel = $element.val()
              });
            });
          }
          $scope.onChange({data: data});
        })
      }]
    };
  });

}]);