ERROR! Invalid config: UnknownFileType
trying to use upload thing for my project. I am working with source 2 demo files. I used this mimetype checker, https://www.htmlstrip.com/mime-file-type-checker and it returns as application/octet-stream so i used that in the filerouter. However, when i try to upload anything, I just get UnkownFileType, and from the json request I can see that it is empty. They are large files, so checking the type might take some time, as the tool I linked did, but since it returns nothing, any way to manually check the type, or debug more to figure out the issue?
3 Replies
I'm having this same issue with a .pck file that's 127 KB.
f(['image/png', 'application/wasm', 'application/octet-stream'])import { createUploadthing, UTFiles } from 'uploadthing/server';
import type { FileRouter } from 'uploadthing/server';
import { generateSvelteHelpers } from '@uploadthing/svelte';
const f = createUploadthing();
// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
// Define as many FileRoutes as you like, each with a unique routeSlug
reiaUploader: f(['image/png', 'application/wasm', 'application/octet-stream'])
// Set permissions and file types for this FileRoute
.middleware(async ({ req, files }) => {
const override = files.map((file) => {
return {
...file,
name: file.name,
customId: file.name,
type: 'application/octet-stream' // To test overriding the type, but it looks like it's being blocked before the middleware.
};
});
// Whatever is returned here is accessible in onUploadComplete as `metadata`
return {
[UTFiles]: override,
version: '1.1.0'
};
})
.onUploadComplete(async ({ metadata, file }) => {
// This code RUNS ON YOUR SERVER after upload
console.log(
'Upload completed for ',
file.name,
file.customId,
metadata.version
);
})
} satisfies FileRouter;
export type OurFileRouter = typeof ourFileRouter;
export const { createUploader, createUploadThing } =
generateSvelteHelpers<OurFileRouter>();
import { createUploadthing, UTFiles } from 'uploadthing/server';
import type { FileRouter } from 'uploadthing/server';
import { generateSvelteHelpers } from '@uploadthing/svelte';
const f = createUploadthing();
// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
// Define as many FileRoutes as you like, each with a unique routeSlug
reiaUploader: f(['image/png', 'application/wasm', 'application/octet-stream'])
// Set permissions and file types for this FileRoute
.middleware(async ({ req, files }) => {
const override = files.map((file) => {
return {
...file,
name: file.name,
customId: file.name,
type: 'application/octet-stream' // To test overriding the type, but it looks like it's being blocked before the middleware.
};
});
// Whatever is returned here is accessible in onUploadComplete as `metadata`
return {
[UTFiles]: override,
version: '1.1.0'
};
})
.onUploadComplete(async ({ metadata, file }) => {
// This code RUNS ON YOUR SERVER after upload
console.log(
'Upload completed for ',
file.name,
file.customId,
metadata.version
);
})
} satisfies FileRouter;
export type OurFileRouter = typeof ourFileRouter;
export const { createUploader, createUploadThing } =
generateSvelteHelpers<OurFileRouter>();
Solved it.
So certain files have an empty string type. That means we'd have to use
Here's something better doing exactly what I said.
The real solution is just this:
This should be marked as solved.
<script lang="ts">
import { createUploadThing } from '$lib/uploadthing';
const { startUpload } = createUploadThing('reiaUploader', {
onBeforeUploadBegin: (files) => {
console.log('Preparing to upload...', files[0].type);
// Optionally, you can show a loading spinner or disable the upload button here
files[0] = new File([files[0]], files[0].name, {
type: 'application/octet-stream', // Set the desired MIME type
lastModified: files[0].lastModified // Preserve the last modified date
}); // Create a new File object with the desired type
// You can also perform any other preprocessing here
console.log('Files ready for upload:', files);
// Return the files to proceed with the upload
return files; // Return the files to proceed with the upload
},
onUploadBegin: (fileName) => {
console.log('Upload started for:', fileName);
},
onUploadError: (error) => {
console.error('Upload failed:', error);
alert('Upload failed. Please try again.');
},
onUploadProgress: (progress) => {
console.log(`Upload progress: ${progress}%`);
// Optionally, you can update a progress bar or UI element here
},
onClientUploadComplete: (res) => {
alert('Upload Completed Successfully!');
console.log('Upload completed:', res);
}
});
async function uploadFiles() {
const input = document.getElementById('uploader') as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
const files = input.files as FileList;
// Do something with files
// Then start the upload
await startUpload([...files]);
}
</script>
<input id="uploader" type="file" multiple />
<button on:click={uploadFiles}>Upload</button>
<script lang="ts">
import { createUploadThing } from '$lib/uploadthing';
const { startUpload } = createUploadThing('reiaUploader', {
onBeforeUploadBegin: (files) => {
console.log('Preparing to upload...', files[0].type);
// Optionally, you can show a loading spinner or disable the upload button here
files[0] = new File([files[0]], files[0].name, {
type: 'application/octet-stream', // Set the desired MIME type
lastModified: files[0].lastModified // Preserve the last modified date
}); // Create a new File object with the desired type
// You can also perform any other preprocessing here
console.log('Files ready for upload:', files);
// Return the files to proceed with the upload
return files; // Return the files to proceed with the upload
},
onUploadBegin: (fileName) => {
console.log('Upload started for:', fileName);
},
onUploadError: (error) => {
console.error('Upload failed:', error);
alert('Upload failed. Please try again.');
},
onUploadProgress: (progress) => {
console.log(`Upload progress: ${progress}%`);
// Optionally, you can update a progress bar or UI element here
},
onClientUploadComplete: (res) => {
alert('Upload Completed Successfully!');
console.log('Upload completed:', res);
}
});
async function uploadFiles() {
const input = document.getElementById('uploader') as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
const files = input.files as FileList;
// Do something with files
// Then start the upload
await startUpload([...files]);
}
</script>
<input id="uploader" type="file" multiple />
<button on:click={uploadFiles}>Upload</button>
onBeforeUploadBegin to change that if the ending file type is a certain type. A better solution would be to have a map for certain custom file types.
<script lang="ts">
import { createUploadThing } from '$lib/uploadthing';
const fileTypes = {
pck: 'application/octet-stream'
};
const { startUpload } = createUploadThing('reiaUploader', {
onBeforeUploadBegin: (files) => {
console.log(`Preparing to upload ${files.length} files`);
files.forEach((file, i) => {
if (file.type === '') {
// If the file type is empty, we can set a default type
const ext = file.name.split('.').pop()?.toLowerCase();
files[i] = new File([file], file.name, {
type:
fileTypes[ext as keyof typeof fileTypes] ||
'application/octet-stream', // Default to application/octet-stream if no match
lastModified: file.lastModified // Preserve the last modified date
});
}
});
console.log('Files prepared.');
return files; // Return the files to proceed with the upload
},
onUploadBegin: (fileName) => {
console.log('Upload started for:', fileName);
},
onUploadError: (error) => {
console.error('Upload failed:', error);
alert('Upload failed. Please try again.');
},
onUploadProgress: (progress) => {
console.log(`Upload progress: ${progress}%`);
},
onClientUploadComplete: (res) => {
console.log('Upload completed:', res);
alert('Upload completed successfully!');
}
});
async function uploadFiles() {
const input = document.getElementById('uploader') as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
const files = input.files as FileList;
// Do something with files
// Then start the upload
await startUpload([...files]);
}
</script>
<input id="uploader" type="file" multiple />
<button on:click={uploadFiles}>Upload</button>
<script lang="ts">
import { createUploadThing } from '$lib/uploadthing';
const fileTypes = {
pck: 'application/octet-stream'
};
const { startUpload } = createUploadThing('reiaUploader', {
onBeforeUploadBegin: (files) => {
console.log(`Preparing to upload ${files.length} files`);
files.forEach((file, i) => {
if (file.type === '') {
// If the file type is empty, we can set a default type
const ext = file.name.split('.').pop()?.toLowerCase();
files[i] = new File([file], file.name, {
type:
fileTypes[ext as keyof typeof fileTypes] ||
'application/octet-stream', // Default to application/octet-stream if no match
lastModified: file.lastModified // Preserve the last modified date
});
}
});
console.log('Files prepared.');
return files; // Return the files to proceed with the upload
},
onUploadBegin: (fileName) => {
console.log('Upload started for:', fileName);
},
onUploadError: (error) => {
console.error('Upload failed:', error);
alert('Upload failed. Please try again.');
},
onUploadProgress: (progress) => {
console.log(`Upload progress: ${progress}%`);
},
onClientUploadComplete: (res) => {
console.log('Upload completed:', res);
alert('Upload completed successfully!');
}
});
async function uploadFiles() {
const input = document.getElementById('uploader') as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
const files = input.files as FileList;
// Do something with files
// Then start the upload
await startUpload([...files]);
}
</script>
<input id="uploader" type="file" multiple />
<button on:click={uploadFiles}>Upload</button>
const fileTypes = {
pck: 'application/octet-stream',
js: 'application/javascript'
};
const { startUpload } = createUploadThing('reiaUploader', {
onBeforeUploadBegin: (files) => {
console.log(`Preparing to upload ${files.length} files`);
files.forEach((file, i) => {
switch (file.type) {
case '':
case 'application/x-javascript':
// If the file type is empty, we can set a default type
const ext = file.name.split('.').pop()?.toLowerCase();
files[i] = new File([file], file.name, {
type:
fileTypes[ext as keyof typeof fileTypes] ||
'application/octet-stream', // Default to application/octet-stream if no match
lastModified: file.lastModified // Preserve the last modified date
});
break;
}
});
console.log('Files prepared.');
return files; // Return the files to proceed with the upload
},
});
const fileTypes = {
pck: 'application/octet-stream',
js: 'application/javascript'
};
const { startUpload } = createUploadThing('reiaUploader', {
onBeforeUploadBegin: (files) => {
console.log(`Preparing to upload ${files.length} files`);
files.forEach((file, i) => {
switch (file.type) {
case '':
case 'application/x-javascript':
// If the file type is empty, we can set a default type
const ext = file.name.split('.').pop()?.toLowerCase();
files[i] = new File([file], file.name, {
type:
fileTypes[ext as keyof typeof fileTypes] ||
'application/octet-stream', // Default to application/octet-stream if no match
lastModified: file.lastModified // Preserve the last modified date
});
break;
}
});
console.log('Files prepared.');
return files; // Return the files to proceed with the upload
},
});