file-uploads.component.html

<app-page-header
  title="File Uploads"
  title1="File Uploads"
  activeitem="Forms"
></app-page-header>

<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Basic File Input</h5>
      </div>
      <div class="box-body">
        <div>
          <label for="file-input" class="sr-only">Choose file</label>
          <input
            type="file"
            name="file-input"
            id="file-input"
            class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 rounded-sm text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">File Input Buttons</h5>
      </div>
      <div class="box-body">
        <div>
          <label class="block">
            <span class="sr-only">Choose Profile photo</span>
            <input
              type="file"
              class="block w-full text-sm text-gray-500 dark:text-white/70 focus:outline-0 ltr:file:mr-4 rtl:file:ml-4 file:py-2 file:px-4 file:rounded-sm file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary focus-visible:outline-none"
            />
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->

<!-- Start::row-2 -->
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">File Input Sizes</h5>
      </div>
      <div class="box-body space-y-3">
        <div>
          <label for="small-file-input" class="sr-only">Choose file</label>
          <input
            type="file"
            name="small-file-input"
            id="small-file-input"
            class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 rounded-md text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-2 file:px-4 dark:file:bg-black/20 dark:file:text-white/70"
          />
        </div>

        <div>
          <label for="file-input-medium" class="sr-only">Choose file</label>
          <input
            type="file"
            name="file-input-medium"
            id="file-input-medium"
            class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 rounded-md text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70"
          />
        </div>

        <div>
          <label for="large-file-input" class="sr-only">Choose file</label>
          <input
            type="file"
            name="large-file-input"
            id="large-file-input"
            class="block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 rounded-md text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 file:sm:py-5 dark:file:bg-black/20 dark:file:text-white/70"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-6">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Dropzone File Upload</h5>
      </div>
      <div class="box-body">
        <div data-single="true" action="/file-upload" class="dropzone">
          <ngx-dropzone
            class="dropzonebg"
            [multiple]="true"
            (change)="onSelect1($event)"
          >
            <ngx-dropzone-label>Drop Files here to upload</ngx-dropzone-label>
            <ngx-dropzone-preview class="dropzone-preview"
              *ngFor="let f of files1"
              [removable]="true"
              (removed)="OnRemove1(f)"
            >
              <ngx-dropzone-label
                >{{ f.name }} ({{ f.type }})</ngx-dropzone-label
              >
            </ngx-dropzone-preview>
          </ngx-dropzone>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Start::row-2 -->
<!-- End::row-3 -->
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Single File Upload</h5>
      </div>
      <div class="box-body">
        <ngx-dropzone class="!border" (change)="onSelect($event)">
          <ngx-dropzone-label>Drop Files here to upload</ngx-dropzone-label>
          <ngx-dropzone-preview class="dropzone-preview"
            *ngFor="let f of files"
            [removable]="true"
            (removed)="onRemove(f)"
          >
            <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
          </ngx-dropzone-preview>
        </ngx-dropzone>
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">Multiple File Upload</h5>
      </div>
      <div class="box-body">
        <ngx-dropzone
          class="filepond multiple-filepond !border"
          (change)="OnSelect2($event)"
        >
          <ngx-dropzone-label>Drop Files here to upload</ngx-dropzone-label>
          <ngx-dropzone-preview class="dropzone-preview"
            *ngFor="let f of files2"
            [removable]="true"
            (removed)="OnRemove2(f)"
          >
            <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
          </ngx-dropzone-preview>
        </ngx-dropzone> 
      </div>
    </div>
  </div>
  <div class="col-span-12 lg:col-span-4">
    <div class="box">
      <div class="box-header">
        <h5 class="box-title">circular File Upload</h5>
      </div>
      <div class="box-body">
        <ngx-dropzone
          class="filepond multiple-filepond circlefile !border"
          (change)="OnSelect3($event)"
        >
          <ngx-dropzone-label>Drop Files here to upload</ngx-dropzone-label>
          <ngx-dropzone-preview 
          class="preview"
            *ngFor="let f of files3"
            [removable]="true"
            (removed)="OnRemove3(f)"
          >
            <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
          </ngx-dropzone-preview>
        </ngx-dropzone>
      </div>
    </div>
  </div>
<!-- End::row-3 -->