# @canopassoftware/vue-file-upload

> Show the preview of file and manage files data to upload

Latest version **1.0.8** (published 2024-01-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @canopassoftware/vue-file-upload
pnpm add @canopassoftware/vue-file-upload
yarn add @canopassoftware/vue-file-upload
bun add @canopassoftware/vue-file-upload
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2024-01-11 |
| First published | 2023-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | dharti |
| Maintainers | dharti-canopas, sumita, canopasinc |
| Keywords | file-upload, image-upload, file-management, file-preview, image-preview |

## Links

- npm: https://www.npmjs.com/package/@canopassoftware/vue-file-upload
- Repository: https://github.com/canopas/file-upload-web-frontend
- Homepage: https://github.com/canopas/file-upload-web-frontend#readme
- Issues: https://github.com/canopas/file-upload-web-frontend/issues
- npm.io page: https://npm.io/package/@canopassoftware/vue-file-upload

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [vue-router](https://npm.io/package/vue-router.md) ^4.2.4

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2024-01-11
- 1.0.7 — 2024-01-11
- 1.0.6 — 2024-01-11
- 1.0.5 — 2024-01-10
- 1.0.4 — 2023-11-04
- 1.0.3 — 2023-11-02
- 1.0.2 — 2023-10-31
- 1.0.1 — 2023-10-30
- 1.0.0 — 2023-10-30

## README

# Vue File Management with Preview - Fully Customized

Vue 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.

---

## Table of Contents

- [Getting Started](#getting-started)
  - [Prerequisites](#prerequisites)
  - [Installation](#installation)
- [Properties and Events](#properties-and-events)
- [Usage](#usage)

---

## Getting Started

Follow below instructions to configure this package into your project.

### Prerequisites

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

- [Node.js](https://nodejs.org/) - v20.x
- Vue3
- sass

### Installation

Using npm:

```
npm install @canopassoftware/vue-file-upload
```

Using yarn:

```
yarn add @canopassoftware/vue-file-upload
```

---

## Properties and Events

### props

- **:callback="handleFileUploading"**

  - `required`
  - **Description:** Add your upload callback function while receive the selected file/files

- **:uploadedFile="uploadedFile"** - For single file component

  - `required`
  - Uploaded file object with below format,
    ```
    {
      fileType: string,
      fileUrl: string,
      fileName: string
    }
    ```

- **:uploadedFiles="uploadedFiles"** - For multiple file component

  - `required`
  - Uploaded files array with below format,
    ```
    [
      {
        fileType: string,
        fileUrl: string,
        fileName: string
      }
    ]
    ```

- **:uploadBtnText="'Upload'"**

  - **default** : Upload
  - Text for save or upload file button

- **:progressBtnText="'Uploading...'"**

  - **default** : Uploading...
  - Text for the progress bar, showing file uploading under the process

- **:removeBtnText="'Uploading...'"**

  - **default** : x
  - Text for remove file button

- **:accept="'image/jpg, image/jpeg, image/png, video/mp4, audio/mp3, application/zip'"**

  - Validation for file type. By default it will select all the type of file.

- **:(filetype)Preview="'(file location)'"**
  - **default** : Default file icons as per file types
  - Set path for your customized icon if needed

---

## Usage

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

### Import the library into your file

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

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

### Use default CSS

- Use `style.css` for UI by importing like,

```js
import "@canopassoftware/vue-file-upload/style.css"
```

### Creating custom UI with file preview

- You can customize file uploading UI in `template` block.
- The `file` slot containing `file` object with following keys, we will use this object to show preview.

  ```js
  file = file: {
    previewType: 'video', // type of the preview. like, file is image or video
    previewUrl: 'data:image/jpeg;base64,/9j/D1AAAACRsdW1pAAAD...', // URL of the file preview
    previewName: 'a152148640581.62d918f12a0b4.mp4', // preview file name
    isDragging: false // you will get it `true` when you dragging the file on design
  }
  ```

### Single File Upload Management

```html
<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>
```

```js
<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

```html
<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>
```

```js
<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>
```

---
_Source: https://npm.io/package/@canopassoftware/vue-file-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._