How to use file-type in Vue 3?

Question

In order to use file-type to determine not only the extension but also ensure the headers are correct I would need to use one of the methods listed on their GitHub page. In version 19.0.0 it says fileFromFileType doesn't have such an export and in 16.5.4 it says it's not a valid function.

This is the page I need it on, but you can also check out the repo here

<template>
  <div style="font: 13px Verdana; background: #eee; color: #333; margin: 2px; padding: 20px;">
    <h1>Upload een foto</h1>

    <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
    <br />

    <div id="container">
      <a id="pickfiles" href="javascript:;">[Select files]</a> 
      <a id="uploadfiles" href="javascript:;" @click="checkValidFile">[Upload files]</a>
    </div>
    <br />

    <pre id="console">{{ errorMessage }}</pre>
  </div>
</template>

<script>
import plupload from 'plupload';
import * as fileType from 'file-type';
export default {
  data() {
    return {
      uploader: null,
      errorMessage: ''
    }
  },
  mounted() {
    this.uploader = new plupload.Uploader({
      runtimes : 'html5,flash,silverlight,html4',
      browse_button : 'pickfiles',
      container: document.getElementById('container'),
      url : 'https://localhost:7104/api/PlUpload/File', 
      flash_swf_url : '../js/Moxie.swf',
      silverlight_xap_url : '../js/Moxie.xap',
      chunk_size:'5mb',
      max_retries: 100,

      filters : {
        max_file_size : '5gb',
        mime_types: [
          {title : "Image files", extensions : "jpg,jpeg,gif,png"},
          {title : "Movies", extensions : "mp4"}
        ]
      },

      init: {
      PostInit: () => {
        document.getElementById('filelist').innerHTML = '';
      },

      FilesAdded: (up, files) => {
        files.forEach(file => {
          document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
        });
      },

      UploadProgress: (up, file) => {
        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        if (file.percent === 100) {
          this.errorMessage = '';
        }
      },

      ChunkUploaded: (up, file) => {
        const delayBetweenChunks = 15; 
        setTimeout(() => {
          up.trigger('UploadProgress', file);
          up.trigger('BeforeUploadChunk', file);
        }, delayBetweenChunks);
      },

      Error: (up, err) => {
        if (err.code === plupload.HTTP_ERROR && err.status === 0) {
          this.errorMessage = 'Netwerkfout, verbind opnieuw met uw internet zodat de upload weer start.';
        } else {
          this.errorMessage = 'Error';
        }
      },  
    },
      
    });

    this.uploader.init();
  },
  methods: {
    selectFiles() {
      this.uploader.start();
    },

    generateUniqueIdentifier() {
      const timestamp = Date.now();
      const randomString = Math.random().toString(36).substring(2, 15);
      return `${timestamp}-${randomString}`;
    },

    uploadFiles() {
      this.uploader.start();
    },

    async checkValidFile() {
      if (!this.uploader.files.length) {
        console.error('Geen bestand geselecteerd.');
        return;
      }

      for(let i = 0; i< this.uploader.files.length; i++){
        let file = this.uploader.files[i];
        console.log(await fileType.fileTypeFromFile(file));
      }

    },
    
  }
}
</script>

Answer 1

I don't think that fileTypeFromFile function is available in browser environment. I think's it's only available in node environment.

I see that you're using the library in browser environment, so I recommend that you use other function like fileTypeFromStream, fileTypeFromBuffer, or fileTypeFromBlob

For example:

console.log(await fileType.fileTypeFromStream(file));

and

console.log(await fileType.fileTypeFromBuffer(file));

You can see all possible function that file-type package export in browser environment over here