-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from kamyabnazari/kn-upload-avatar-functionality
Kn upload Profile Avatar File and display
- Loading branch information
Showing
24 changed files
with
1,076 additions
and
128 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <script lang="ts"> | ||
| import { onMount } from 'svelte'; | ||
| import { GlobalWorkerOptions, getDocument, type PDFDocumentProxy } from 'pdfjs-dist'; | ||
| import IconDownload from '~icons/solar/download-square-outline'; | ||
| import IconPrint from '~icons/solar/printer-outline'; | ||
| import IconLeftArrow from '~icons/solar/square-arrow-left-outline'; | ||
| import IconRightArrow from '~icons/solar/square-arrow-right-outline'; | ||
| let pdf: PDFDocumentProxy | null = null; | ||
| let currentPageNumber = 1; | ||
| let canvas: HTMLCanvasElement; | ||
| const urlPDF = | ||
| 'https://raw.githubusercontent.com/vinodnimbalkar/svelte-pdf/369db2f9edbf5ab8c87184193e1404340729bb3a/public/sample.pdf'; | ||
| const loadPage = async (pageNumber: number) => { | ||
| const page = await pdf.getPage(pageNumber); | ||
| const scale = 1; | ||
| const viewport = page.getViewport({ scale }); | ||
| // Prepare canvas using PDF page dimensions | ||
| const context = canvas.getContext('2d') as CanvasRenderingContext2D; | ||
| canvas.height = viewport.height; | ||
| canvas.width = viewport.width; | ||
| // Render PDF page into canvas context | ||
| const renderContext = { | ||
| canvasContext: context, | ||
| viewport: viewport | ||
| }; | ||
| await page.render(renderContext); | ||
| }; | ||
| const prevPage = () => { | ||
| if (currentPageNumber > 1) { | ||
| currentPageNumber--; | ||
| loadPage(currentPageNumber); | ||
| } | ||
| }; | ||
| const nextPage = () => { | ||
| if (currentPageNumber < pdf.numPages) { | ||
| currentPageNumber++; | ||
| loadPage(currentPageNumber); | ||
| } | ||
| }; | ||
| const downloadPdf = () => { | ||
| window.open(urlPDF); | ||
| }; | ||
| const printPdf = () => { | ||
| window.print(); | ||
| }; | ||
| onMount(async () => { | ||
| GlobalWorkerOptions.workerSrc = | ||
| 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.worker.js'; | ||
| const loadingTask = getDocument(urlPDF); | ||
| pdf = await loadingTask.promise; | ||
| await loadPage(currentPageNumber); | ||
| }); | ||
| </script> | ||
|
|
||
| <div class="ring-primary relative z-0"> | ||
| <div class="flex flex-row justify-center gap-4 p-8"> | ||
| <button class="btn btn-square" on:click={prevPage} | ||
| ><IconLeftArrow style="font-size: x-large;" /></button | ||
| > | ||
| <button class="btn btn-square" on:click={nextPage}> | ||
| <IconRightArrow style="font-size: x-large;" /></button | ||
| > | ||
| <button class="btn btn-square btn-success" on:click={printPdf} | ||
| ><IconPrint style="font-size: x-large;" /></button | ||
| > | ||
| <button class="btn btn-square btn-info" on:click={downloadPdf} | ||
| ><IconDownload style="font-size: x-large;" /></button | ||
| > | ||
| </div> | ||
| <div class="ring-primary relative z-0 ring-2 ring-offset-4"> | ||
| <canvas bind:this={canvas} class="w-full" /> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,20 @@ | ||
| /* | ||
| export const validateData = async (formData, schema) => { | ||
| const body = Object.fromEntries(formData); | ||
| export function showPreview(event: Event) { | ||
| const inputElement = event.target as HTMLInputElement; | ||
| const files = inputElement.files; | ||
| if (files?.length) { | ||
| const src = URL.createObjectURL(files[0]); | ||
| const previewProfile = document.getElementById('avatar-preview-profile') as HTMLImageElement; | ||
| const previewNavbar = document.getElementById('avatar-preview-navbar') as HTMLImageElement; | ||
|
|
||
| try { | ||
| const data = schema.parse(body); | ||
| return { | ||
| formData: data, | ||
| errors: null | ||
| }; | ||
| } catch (err) { | ||
| console.log(err); | ||
| const errors = err.flatten(); | ||
| return { | ||
| formData: body, | ||
| errors | ||
| }; | ||
| previewProfile.src = src; | ||
| previewNavbar.src = src; | ||
| } | ||
| } | ||
|
|
||
| export const getImageURL = (collectionId, recordId, fileName, size = '0x0') => { | ||
| return `http://localhost:8090/api/files/${collectionId}/${recordId}/${fileName}?thumb=${size}`; | ||
| }; | ||
|
|
||
| export const getDocumentURL = (collectionId, recordId, fileName, size = '0x0') => { | ||
| return `http://localhost:8090/api/files/${collectionId}/${recordId}/${fileName}?thumb=${size}`; | ||
| }; | ||
| */ |
Oops, something went wrong.