ERROR! Invalid config: UnknownFileType

Lajna · 2024-06-25T01:48:49.088Z

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?

M

Mako•3/28/25, 12:39 AM

I'm having this same issue with a .pck file that's 127 KB.

f(['image/png', 'application/wasm', 'application/octet-stream'])

f(['image/png', 'application/wasm', 'application/octet-stream'])

f(['image/png', 'application/wasm', 'application/octet-stream'])

f(['image/png', 'application/wasm', 'application/octet-stream'])

M

Mako•3/28/25, 12:49 AM

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>();

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>();

M

Mako•3/28/25, 2:29 AM

Solved it.

<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>

<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>

So certain files have an empty string type. That means we'd have to use

onBeforeUploadBegin

onBeforeUploadBegin

onBeforeUploadBegin

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.

M

Mako•3/28/25, 2:41 AM

<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>

<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>

Here's something better doing exactly what I said.

M

Mako•3/28/25, 2:43 AM

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
    },
  });

  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
    },
  });

M

Mako•3/28/25, 2:47 AM

This should be marked as solved.

ERROR! Invalid config: UnknownFileType

Similar Threads

Similar Threads

Similar Threads