Skip to content

DreamlandOwO/vuefinder

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

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

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

License

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

About

Vuefinder is a file manager component for vuejs

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 63.4%
  • JavaScript 31.1%
  • CSS 4.7%
  • Other 0.8%