Komponent

FFileItem

Status

Produktionsklar

Filpresentatör används för att presentera fil, till exempel när användaren valt fil med filväljaren.

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<script lang="ts">
import { defineComponent } from "vue";
import { FFileItem } from "@fkui/vue";

export default defineComponent({
    name: "FFileItemDefault",
    components: { FFileItem },
    data() {
        return { fileName: "bar.jpg", fileType: "image/jpeg" };
    },
    methods: {},
});
</script>

<template>
    <f-file-item :file-name :mime-type="fileType"></f-file-item>
</template>

Filpresentatör med knapp och progress

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<script lang="ts">
import { defineComponent } from "vue";
import { FFileItem, FIcon, FProgressbar } from "@fkui/vue";

export default defineComponent({
    name: "FFileItemButtonProgress",
    components: { FFileItem, FIcon, FProgressbar },
    data(): {
        fileName: string;
        mimeType: string;
        progress: number | "";
        filteredProgress: number;
    } {
        return {
            fileName: "bar.pdf",
            mimeType: "application/pdf",
            progress: 30,
            filteredProgress: 30,
        };
    },
});
</script>

<template>
    <div>
        <label>
            Progress:
            <input
                id="upload-progress"
                v-model.number="progress"
                type="number"
                style="margin-bottom: 20px"
                @input="filteredProgress = progress === '' ? 0 : progress"
        /></label>

        <f-file-item :file-name :mime-type>
            <template #row>
                <button
                    v-if="filteredProgress < 100"
                    type="button"
                    class="button button--tertiary button--medium file-item__file-remove file-item__abort"
                >
                    <f-icon name="close" class="button__icon"></f-icon>
                    <span> Avbryt uppladdning </span>
                </button>
                <button
                    v-else-if="filteredProgress === 100"
                    type="button"
                    class="button button--tertiary button--medium file-item__file-remove"
                >
                    <f-icon name="trashcan" class="button__icon"></f-icon>
                    Ta bort
                </button>
            </template>

            <f-progressbar
                v-if="filteredProgress < 100"
                aria-label="progress"
                :value="filteredProgress"
            ></f-progressbar>
        </f-file-item>
    </div>
</template>

Ikoner

Filikonen till vänster bestäms av mimetype:

• Bilder använder f-icon-pic
• PDF använder f-icon-pdf
• Word-dokument använder f-icon-doc
• Övriga filer använder f-icon-file

<!-- eslint-disable vue/component-api-style -- technical debt: should be migrated from options to composition api -->
<script lang="ts">
import { defineComponent } from "vue";
import { FFileItem } from "@fkui/vue";

const files = [
    { fileName: "my-image.png", fileType: "image/png" },
    { fileName: "my-document.pdf", fileType: "application/pdf" },
    { fileName: "my-document.doc", fileType: "application/msword" },
    { fileName: "my-file.txt", fileType: "text/plain" },
];

export default defineComponent({
    name: "FFileItemIcons",
    components: {
        FFileItem,
    },
    data() {
        return { files };
    },
});
</script>

<template>
    <div>
        <f-file-item
            v-for="item in files"
            :key="item.fileName"
            :file-name="item.fileName"
            :mime-type="item.fileType"
        ></f-file-item>
    </div>
</template>

API

Props

id: string Optional

The id for the input id attribute. The id for the label for attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

fileName: string

The file name.

mimeType: string Optional

The mime type, can be changed if i.e server change the name.

Default: undefined

originalMimeType: string Optional

The name of the file uploaded

Default: undefined

changedMimeTypeText: string Optional

If file name changed, this info will be displayed, placeholder %before% and %after% will be replaced with originalMimeType and mimeType

Default: undefined

Slots

row

Slot for any content that should be placed beside the file icon and file name. If several elements is placed, they will be spaced evenly, for more information see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content.

default

Slot for any type of content. Elements placed in this slot will be position after the file icon and file name.

Relaterat

• FFileItemPageObject