vuefilemanager/resources/js/components/FilesView/OptionUpload.vue

<template>
    <label class="menu-option group">
        <div class="icon-left group-hover-text-theme">
            <upload-cloud-icon v-if="type === 'file'" size="17" class="group-hover-text-theme"/>
            <folder-upload-icon v-if="type === 'folder'" size="17" class="group-hover-text-theme"/>
        </div>
        <div class="text-label group-hover-text-theme">
            {{ title }}

             <input
                v-if="type === 'file'"
                @change="emmitFiles"
                v-show="false"
                id="file"
                type="file"
                name="files[]"
                multiple
            />

             <input
                v-if="type === 'folder'"
                @change="emmitFiles"
                v-show="false"
                id="folder"
                type="file"
                name="folders[]"
                webkitdirectory 
                mozdirectory 
            />
        </div>
    </label>
</template>

<script>
import FolderUploadIcon from "./Icons/FolderUploadIcon";
import {
    UploadCloudIcon,
} from 'vue-feather-icons'

    export default {
        name: 'Option',
        props:[
            'title',
			'type',
        ],
        components: {
            FolderUploadIcon,
            UploadCloudIcon,
        },
		methods: {
			emmitFiles(e) {
				this.$uploadFiles(e.target.files)
			}
		}
    }
</script>

<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";

.menu-option {
    white-space: nowrap;
    font-weight: 700;
    @include font-size(14);
    padding: 15px 20px;
    cursor: pointer;
    width: 100%;
    color: $text;
    display: flex;
    align-items: center;

    .icon-left {
        margin-right: 20px;
        line-height: 0;

        path,
        line,
        polyline,
        rect,
        circle,
        polygon {
            color: inherit;
        }
    }

    .text-label {
        @include font-size(16);
    }

    &:hover {
        background: $light_background;
    }
}

.dark {

    .menu-option {
        color: $dark_mode_text_primary;

         &:hover {
            background: lighten($dark_mode_foreground, 2%);
        }
    } 
}

</style>