Vuefinder File Manager

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')
 

Vue Template

...
<div>
    <vue-finder id='my_vuefinder' :request="request"></vue-finder>
</div>
...

<script setup>
  const request = "http://vuefinder-php.test"
  
  // Or ...
  const request = {
    // ----- CHANGE ME! -----
    // [REQUIRED] Url for development server endpoint
    baseUrl: "http://vuefinder-php.test",
    // ----- CHANGE ME! -----

    // Additional headers & params & body
    headers: { "X-ADDITIONAL-HEADER": 'yes' },
    params: { additionalParam1: 'yes' },
    body: { additionalBody1: ['yes'] },

    // And/or transform request callback
    transformRequest: req => {
      if (req.method === 'get') {
        req.params.vf = "1"
      }
      return req;
    },

    // XSRF Token header name
    xsrfHeaderName: "X-CSRF-TOKEN",
  }
</script>

Props

Prop	Value	Default	Description
id	string	null	required
request	object	null	required - backend url or request object, see above
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

• PHP: VueFinder Php Library

Roadmap

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

Dependencies

• Vue3
• Cropperjs : JavaScript image cropper
• DragSelect : Selection utility
• Uppy : Upload library
• vanilla-lazyload : lazy loading for thumbnails

License

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