Mako
TTCTheo's Typesafe Cult
•Created by psygo on 5/1/2024 in #questions
Converting String Encoded Images to Files to upload with UploadThing
@psygo Did you ever fully resolve this issue?
6 replies
TTCTheo's Typesafe Cult
•Created by Lajna on 6/25/2024 in #questions
ERROR! Invalid config: UnknownFileType
This should be marked as solved.
8 replies
TTCTheo's Typesafe Cult
•Created by Lajna on 6/25/2024 in #questions
ERROR! Invalid config: UnknownFileType
The real solution is just this:
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
},
});
8 replies
TTCTheo's Typesafe Cult
•Created by Lajna on 6/25/2024 in #questions
ERROR! Invalid config: UnknownFileType
<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>
8 replies
TTCTheo's Typesafe Cult
•Created by Lajna on 6/25/2024 in #questions
ERROR! Invalid config: UnknownFileType
Solved it.
So certain files have an empty string type. That means we'd have to use
<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.8 replies
TTCTheo's Typesafe Cult
•Created by Lajna on 6/25/2024 in #questions
ERROR! Invalid config: UnknownFileType
8 replies
TTCTheo's Typesafe Cult
•Created by Lajna on 6/25/2024 in #questions
ERROR! Invalid config: UnknownFileType
I'm having this same issue with a .pck file that's 127 KB.
f(['image/png', 'application/wasm', 'application/octet-stream'])8 replies