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>