Home

Awesome

File Management with Preview - Fully Customized

A versatile and user-friendly file management system built with Vue.js and TypeScript that allows for single and multiple file uploading with a preview feature. It allows you to select files and preview them, returning an array of selected files. It allows customizing design by overriding the style classes.

<img src="./gifs/full.gif"/>

Checkout the live demo on, codesandbox <br /> codesandbox.io

Table of Contents

Features

Getting Started

Follow below instructions to configure this package into your project.

Prerequisites

Before you begin, make sure you have the following software installed:

Installation

Using npm:

npm install @canopassoftware/vue-file-upload

Using yarn:

yarn add @canopassoftware/vue-file-upload

Examples

We are providing some examples with design. so, you can easily take it and use into your project.

Canvas View

view code

<img src="./gifs/canvas-view.gif"/>

Square View

view code

<img src="./gifs/square-view.gif"/>

Horizontal Long Square View

view code

<img src="./gifs/long-square-view.gif"/>

Circular View

view code

<img src="./gifs/round-view.gif"/>

Over-ride CSS

For over-riding the design of default buttons, you can over-ride it's CSS by class name. <br> For example., <br>

.remove-btn {
  color: white;
  background-color: red;
  font-size: 25px;
  padding: 5px;
}

.upload-btn {
  color: white;
  background-color: rgb(51, 65, 85);
  font-size: 25px;
  padding: 5px 10px;
}

Properties and Events

props

Usage

To manage and preview files with this library, follow these steps:

Import the library into your file

// using CommonJS
const { SingleFileUpload, MultipleFileUpload } = require('@canopassoftware/vue-file-upload')

OR
// using esModules
import { SingleFileUpload, MultipleFileUpload } from '@canopassoftware/vue-file-upload'

Creating custom UI with file preview

Single File Upload Management

<div class="flex flex-wrap">
  <SingleFileUpload
    :uploadBtnText="'Upload'"
    :progressBtnText="'Uploading...'"
    :isUploading="isUploading"
    :accept="'image/jpg, image/jpeg, image/png, video/mp4, audio/mp3, application/zip'"
    :pdfPreview="'../assets/images/pdf-icon.png'"
    :textPreview="'../assets/images/text-icon.png'"
    :audioPreview="'../assets/images/music-icon.png'"
    :apkPreview="'../assets/images/apk-icon.png'"
    :zipPreview="'../assets/images/zip-icon.png'"
    :sqlPreview="'../assets/images/sql-icon.png'"
    :filePreview="'../assets/images/file-icon.png'"
    :uploadedFile="uploadedFile"
    :callback="handleFileUploading"
  >
    <template v-slot="file">
      <!-- write a code to manage file design or use code from examples -->
    </template>
  </SingleFileUpload>
</div>

<script lang="ts">
import { SingleFileUpload } from '@canopassoftware/vue-file-upload'

export default {
  components: {
    SingleFileUpload
  },
  data() {
    return {
      uploadedFile: {} as {
        fileType: string
        fileUrl: string
        fileName: string
      }
    }
  },
  methods: {
    async handleFileUploading(file: any) {
      // add your fileuploading logic to server and set data to the uploadedFile
      this.uploadedFile.fileType = 'image'
      this.uploadedFile.fileUrl = 'https://picsum.photos/300/224'
      this.uploadedFile.fileName = file.name

      await new Promise((resolve) => setTimeout(resolve, 2000))
    },
  }
}
</script>

Multiple File Upload Management

<div class="flex flex-wrap">
  <MultipleFileUpload
    :removeBtnText="'remove'"
    :uploadBtn="'Upload'"
    :progressBtnText="'Uploading...'"
    :accept="'image/jpg, image/jpeg, image/png, video/mp4, audio/mp3, application/zip'"
    :pdfPreview="'../assets/images/pdf-icon.png'"
    :textPreview="'../assets/images/text-icon.png'"
    :audioPreview="'../assets/images/music-icon.png'"
    :apkPreview="'../assets/images/apk-icon.png'"
    :zipPreview="'../assets/images/zip-icon.png'"
    :sqlPreview="'../assets/images/sql-icon.png'"
    :filePreview="'../assets/images/file-icon.png'"
    :uploadedFiles="uploadedFiles"
    :callback="handleFilesUploading"
  >
    <template v-slot="file">
      <!-- write a code to manage file design or use code from examples -->
    </template>
  </MultipleFileUpload>
</div>

<script lang="ts">
import { MultipleFileUpload } from '@canopassoftware/vue-file-upload'

export default {
  components: {
    MultipleFileUpload
  },
  data() {
    return {
      uploadedFiles: [] as Array<{
        fileType: string
        fileUrl: string
        fileName: string
      }>
    }
  },
  methods: {
    async handleFilesUploading(files: any) {
      // add your fileuploading to server logic and set data to the uploadedFiles
      this.uploadedFiles = []
      for (var i = 0; i < files.length; i++) {
        this.uploadedFiles.push({
          fileType: 'image',
          fileUrl: 'https://picsum.photos/300/224',
          fileName: files[i].name
        })
      }

      await new Promise((resolve) => setTimeout(resolve, 2000))
    }
  }
}
</script>

Contributing

We welcome contributions from the community. To contribute to this project, please follow these guidelines:

License

This project is licensed under the MIT.

Contact Information

Vue file upload is owned and maintained by the Canopas team. You can reach out them on Github at canopas for questions or need support.