import { PDFAtelier, type PDFAtelierRef } from '@innosoft/pdf-atelier-react';
import { useRef } from 'react';

export default function App() {
  const pdfRef = useRef<PDFAtelierRef>(null);

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const url = URL.createObjectURL(file);
      if (pdfRef.current) {
        pdfRef.current.src = url;
      }
    }
  };

  return (
    <>
      <input type="file" accept=".pdf" onChange={handleFileSelect} />
      <PDFAtelier
        ref={pdfRef}
        src="https://example.com/document.pdf"
        license="My License"
      />
    </>
  );
}

import { Component, ViewChild } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-pdf-viewer',
  imports: [PdfAtelierWrapper],
  template: `
    <input type="file" accept=".pdf" (change)="onFileSelect($event)" />
    <pdf-atelier-wrapper
      [src]="pdfSrc"
      [license]="'My License'"
    ></pdf-atelier-wrapper>
  `,
})
export class PdfViewerComponent {
  @ViewChild(PdfAtelierWrapper) pdfAtelier!: PdfAtelierWrapper;
  pdfSrc: string | null = null;

  onFileSelect(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      this.pdfSrc = URL.createObjectURL(file);
    }
  }
}

<script setup lang="ts">
import { ref } from 'vue';
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';

const pdfSrc = ref<string | null>(null);

const onFileSelect = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    pdfSrc.value = URL.createObjectURL(file);
  }
};
</script>

<template>
  <input type="file" accept=".pdf" @change="onFileSelect" />
  <PdfAtelierWrapper :src="pdfSrc" :license="'My License'" />
</template>