Vue.js 3 vue-files-preview Example to Build File Viewer to Embed Images,Video,PDF,DOCX Files in Browser

npm i vue-files-preview

main.ts

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

import VueFilesPreview from 'vue-files-preview'
import 'vue-files-preview/lib/style.css'

const app = createApp(App)

app.use(VueFilesPreview)

app.mount('#app')

import { createApp } from 'vue'

import App from './App.vue'

import VueFilesPreview from 'vue-files-preview'

import 'vue-files-preview/lib/style.css'

const app = createApp(App)

app.use(VueFilesPreview)

app.mount('#app')

App.vue

<template>
  <div class="main-container">
    <div v-if="uploadFile" class="preview-container">
      <!-- Preview the uploaded file -->
      <VueFilesPreview :file="uploadFile" />
    </div>
    <div v-else class="upload-btn">
      <!-- Button to upload the file -->
      <button @click="triggerFileInput">Click to Upload</button>
      <input type="file" ref="fileInput" @change="handleFileUpload" style="display:none" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadFile = ref<File | null>(null);
const fileInput = ref<HTMLInputElement | null>(null);

const handleFileUpload = (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (file) {
    uploadFile.value = file;
  }
};

const triggerFileInput = () => {
  fileInput.value?.click(); // Trigger file input click on button click
};
</script>

</div>

<button @click="triggerFileInput">Click to Upload</button>

</div>

</template>

import { ref } from 'vue';

const uploadFile = ref<File | null>(null);

const fileInput = ref<HTMLInputElement | null>(null);

const handleFileUpload = (event: Event) => {

const file = (event.target as HTMLInputElement).files?.[0];

if (file) {

uploadFile.value = file;

}

};

const triggerFileInput = () => {

fileInput.value?.click(); // Trigger file input click on button click

};

</script>

Vue.js 3 vue-files-preview Example to Build File Viewer to Embed Images,Video,PDF,DOCX Files in Browser

Comments

Leave a Reply Cancel reply

Archives