Skip to content
/ vuefinder Public
forked from n1crack/vuefinder

Empower your Vue.js applications with this versatile and customizable file manager component, simplifying file organization and navigation.

License

Notifications You must be signed in to change notification settings

m8sa/vuefinder

Repository files navigation

Vuefinder File Manager

GitHub npm

About

Vuefinder is a file manager component for Vue.js version 3

Demo

Live Demo [ Source ]

Installation

npm i vuefinder

JS entry point (it can be index.js or main.js)

import { createApp } from 'vue'
import App from './App.vue'

import 'vuefinder/dist/style.css'
import VueFinder from 'vuefinder/dist/vuefinder'

const app = createApp(App)

app.use(VueFinder)

app.mount('#app')
 

Html

...
<div>
    <vue-finder id='my_vuefinder' url="http://vuefinder-php.test"></vue-finder>
</div>
...

Props

Prop Value Default Description
id string null required
url string null required - backend url
locale string en optional - default language code
dark boolean false optional - makes theme dark as default
max-file-size string 10mb optional - client side max file upload

Features

  • Multi adapter/storage (see https://github.com/thephpleague/flysystem)
  • File and folder operations
    • Create a new file
    • Create a new folder
    • Rename
    • Delete
    • Archive (zip)
    • Unarchive (unzip)
    • Text editing
    • Image Crop Tool
    • Upload / Download files
    • Search (deep based on current folder)
  • Nice UI
    • Context Menu
    • Breadcrumb links
    • Toolbar
    • File explorer
    • Status bar
    • Image thumbnails
    • Toast notifications
  • Appearance
    • Multi language
    • Full Screen
    • View Modes: list, grid
    • Dark Mode
  • Accessibility
    • Drag & drop support
    • Move items (to a folder or up one folder) with drag and drop
    • Mouse selection

Backend

Roadmap

  • code refactoring (cleanup the duplications, make reusable components)
  • restyle the modals
  • add more languages (only en/tr/ru at the moment. PRs are welcomed.)
  • copy/move to a folder (modal, treeview)
  • transfer items between filesystem adapters
  • show/hide components (toolbar/statusbar etc.)
  • emit select event, with @select get selected files for online editors like tinymce/ckeditor
  • drag&drop on folders at address bar
  • update DragSelect plugin for using its dropzone support

Dependencies

License

Copyright (c) 2018 Yusuf ÖZDEMİR, released under the MIT license

About

Empower your Vue.js applications with this versatile and customizable file manager component, simplifying file organization and navigation.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 59.6%
  • JavaScript 34.6%
  • CSS 4.8%
  • Other 1.0%