zeppelin-web-angular/src/app/share/note-import/note-import.component.html

<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<form nz-form nzLayout="vertical">
  <nz-form-item>
    <nz-form-label>Import As</nz-form-label>
    <nz-form-control>
      <input nz-input [(ngModel)]="noteImportName" placeholder="Insert Note Name" name="noteImportName" />
    </nz-form-control>
  </nz-form-item>
</form>

<nz-tabset>
  <nz-tab nzTitle="Import From JSON File">
    <nz-upload nzType="drag" [nzBeforeUpload]="beforeUpload" nzAccept="application/json, .zpln">
      <p class="ant-upload-drag-icon">
        <i nz-icon nzType="inbox"></i>
      </p>
      <p class="ant-upload-text">Click or drag JSON file to this area to upload</p>
      <p class="ant-upload-hint">
        JSON file size cannot exceed
        <strong class="tips warning">{{ maxLimit | humanizeBytes }}</strong>
      </p>
    </nz-upload>
  </nz-tab>
  <nz-tab nzTitle="Import From URL">
    <form nz-form nzLayout="vertical">
      <nz-form-item>
        <nz-form-label>URL</nz-form-label>
        <nz-form-control nzErrorTip="URL is Required" #control="nzFormControl">
          <input nz-input [(ngModel)]="importUrl" placeholder="Note URL" name="importUrl" required />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="importNote()" [disabled]="!importUrl" [nzLoading]="importLoading">
            Import Note
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-tab>
</nz-tabset>
<nz-alert nzType="error" [nzMessage]="errorText" *ngIf="errorText"></nz-alert>