lucent-laravel/front/js/svelte/records/FilePreview.svelte

<script>
    import Preview from "../files/Preview.svelte";
    import { fileurl } from "../files/imageserver";
    import { getContext } from "svelte";

    const channel = getContext("channel");
    export let record;
    export let schema;
</script>

{#if schema.type === "files"}
    <div class="record-edit-file-preview">
        <div>
            <Preview {record} size="large" />
        </div>
        <div class="file-details">
            <div class="file-details-item">
                <span class="text-muted">Filename</span>
                <span>{record._file.path}</span>
            </div>
            <div class="file-details-item">
                <span class="text-muted">Original name</span>
                <span>{record._file.originalName}</span>
            </div>
            <div class="file-details-item">
                <span class="text-muted">Mime type</span>
                <span>{record._file.mime}</span>
            </div>
            {#if record._file.width}
                <div class="file-details-item">
                    <span class="text-muted">Dimensions</span>
                    <span>{record._file.width}x{record._file.height}</span>
                </div>
            {/if}
            <div class="file-details-item">
                <span class="text-muted">File size</span>
                <span>{(record._file.size / 1024).toFixed(1)}kB</span>
            </div>
            <div class="file-details-item">
                <span class="text-muted">Checksum</span>
                <span>{record._file.checksum}</span>
            </div>
            <div class="file-details-item">
                <a
                    class="button primary"
                    target="_blank"
                    style="display: inline-flex"
                    href={fileurl(channel, record)}>Download</a
                >
            </div>
        </div>
    </div>
{/if}