mime types for .js and .css files are unexpected

[munxar]

pocketbase: v0.26.0

When I upload a file to a record (with a File field), some file types are not recognized correctly.
E.g. I create a javascript file test.js in vs code and upload it via admin backend in a record, it get's the mime type "text/plain" the same is true for .css files.

If the fields allowed mime types is set to "text/javascript", uploading the file fails with a validation error "validation_invalid_mime_type".

Do I miss something here, or is this a bug?

[ganigeorgiev]

The extension doesn't matter. The mimetype is based on first couple bytes of the file.

Without a file sample I don't know how to help you, but under the hood we utilize gabriel-vasile/mimetype so if you think that the mimetype of a file is incorrectly detected feel free to report it to the upstream. Note that there are situation where the file content could be indistinguishable from text/plain and in that case it is expected the validation to fail.

If you still think that it is a PocketBase bug feel free to provide a file sample and I'll try to investigate it further.

[ganigeorgiev]

As a side-note, when serving the uploaded collection files we have special exceptions for .svg and .css files and try to force image/svg+xml and text/css as Content-Type because it is often difficult/unreliable to serve the detected mimetype during upload for these files.

For CSS files specifically you could also check gabriel-vasile/mimetype#113.

[ganigeorgiev]

Based on https://github.com/gabriel-vasile/mimetype/blob/e8ef900c1a34f2f24077f421d366c30790e634dc/internal/magic/text.go#L83-L91, it seems that the mimetype of file will be detected as text/javascript only if it starts with one of the listed shebangs, which unfortunately is not very accurate but it is the safer option compared to having false-positives.

If your main issue is with the Content-Type returned on file serve, then I'll consider with the next release Done to add similar exception for the .js/.mjs files. As a workaround you can force that on your own by attaching to the OnFileDownloadRequest with Go or JS pb_hooks, something like:

• Go:

  app.OnFileDownloadRequest().BindFunc(func(e *core.FileDownloadRequestEvent) error {
      if strings.HasSuffix(e.ServedName, ".js") || strings.HasSuffix(e.ServedName, ".mjs") {
          e.Request.Header.Set("Content-Type", "text/javascript")
      }
  
      return e.Next()
  })

• JS pb_hooks:

  // pb_hooks/main.pb.js
  onFileDownloadRequest((e) => {
      if (e.servedName.endsWith(".js") || e.servedName.endsWith(".mjs")) {
          e.request.header.set("Content-Type", "text/javascript")
      }
      e.next()
  })

But note that this is only when serving the file. For the validations forcing a mimetype based on its extension could be insecure and for now I'm against doing it.

[munxar]

@ganigeorgiev
Thanks for the clarification. In my case a hook that adds the appropriate mime type on serve is good enough.
frontend js files usually don't start with a shebang so the validation in the admin panel will fail in this cases.

Is there a way (hook) to intercept files on upload and alter the mime types (post validation)?

[ganigeorgiev]

Is there a way (hook) to intercept files on upload and alter the mime types (pre validation)?

No, the mime-type cannot be altered before validations because again it is based on the first couple bytes of the file (aka. we perform partial file read and there is no OnFileOpen hook or similar at the moment).

An option could be to remove the mimetype validation from the field options and add your own custom handling by attaching to the OnRecordValidate hook, but it is error prone and I'm not sure I can recommend it (the uploaded files could be accessed through e.Record.GetUnsavedFiles("yourFileField")).