Invalid file type for VTT (text) files

Kirby 3 Questions 🤔
,
1

Hello,

I’m running into a problem trying to upload plain text files with the extension .vtt (WebVTT files for video subtitles). I’ve been combing through this forum for a while and I followed the instructions I could find in this thread and then some. I even went so far as to packaging my block, blueprints, and snippet into a plugin, but I just can’t get Kirby to accept .vtt file uploads in the Panel.

CleanShot 2023-04-21 at 18.24.53@2x
CleanShot 2023-04-21 at 18.24.53@2x974Ă—404 14.9 KB

Details:

I am building a custom block for self-hosted videos and it should support adding subtitles using .vtt-files. I added a file-blueprint for the .vtt file, which did not solve the problem, and then registered the .vtt files in the plugin, but I am still getting the “invalid file” error when I try to upload one.

Folder-structure

plugins:
  self-hosted-video-block:
    - index.php
    blueprints:
      blocks:
        - self-hosted-video-block.yml
      files:
        - subtitle-file.yml
      snippets:
        blocks:
          - self-hosted-video-block.php

index.php

<?php
	// Self-hosted video block plugin
	
	Kirby::plugin('wenzels-design/self-hosted-video-block', [
		'snippets' => [
			'blocks/self-hosted-video-block' => __DIR__ . '/snippets/blocks/self-hosted-video-block.php',
		],
		'blueprints' => [
			'blocks/self-hosted-video-block' => __DIR__ . '/blueprints/blocks/self-hosted-video-block.yml',
			'files/subtitle-file' => __DIR__ . '/files/subtitle-file.yml',
		],
		'fileTypes' => [
			'vtt' => [
				// I also tried 'text/vtt', no change
				'mime' => 'text/plain',
				// I also tried 'subtitle-file', no change
				'type' => 'subtitle',
			],
		]
	]);
?>

subtitle-file.yml

title:
  en: Subtitle file (WebVTT)
  de: Untertiteldatei (WebVTT)
accept: text/vtt

I feel like I am missing something very obvious and simply, but I just can’t figure out what I’m doing wrong.

2

For me it works without registering the extra field type when accepting by extension in the file blueprint:

accept: 
  extension: vtt

If you want to go by mime type, you probably have to set them in your server configuration/.htaccess file using the AddType directive:

AddType text/vtt vtt

See also: server-configs-apache/media_types.conf at main · h5bp/server-configs-apache · GitHub

3

I’m happy not using the MIME-type, so I tried adding

accept:
  extension: vtt

directly to the self-hosted-video-block.yml, replacing the template-rule. Because that did not solve the problem, I tried adding it to the subtitle-file.yml and restored the template-rule—that also didn’t work.

I also removed the fileTypes declaration from index.php, as that seemed not to have any impact whatsoever.

I use php -S localhost:8080 kirby/router.php for development, and suspected this might be the issue. However, after uploading to an Apache server, the issue persists. Since I use the PHP-router that also means I can’t add the MIME-type to my .htaccess.

Maybe I misunderstood your suggestion? Where exactly should I put the accept-rule?

Here are the files as they are currently:

self-hosted-video-block.yml

name: Video
icon: video
tabs:
  content:
    fields:
      files:
        label: Thumbnail
        type: files
        max: 1
        layout: cards
        accept: image/*
      mp4:
        label: URL der Videodatei in MP4
        type: text
        width: 1/2
        help: Der Text kann eine relative oder abolute Adresse sein. Also */downloads/video.mp4* oder *https://externer-hoster.xyz/video.mp4*.
      webm:
        label: URL der Videodatei in WebM
        type: text
        width: 1/2
        help: Der Text kann eine relative oder abolute Adresse sein. Also */downloads/video.mp4* oder *https://externer-hoster.xyz/video.mp4*.
      subtitles:
        label: Untertitel
        help: Untertitel mĂĽssen im WebVTT Format als vtt Datei hochgeladen werden. Der Dateiname muss die Sprache indizieren, beispielsweise "de.vtt" oder "en.vtt".
        type: files
        template: subtitle-file

subtitle-file.yml

title:
  en: Subtitle file (WebVTT)
  de: Untertiteldatei (WebVTT)
accept:
  extension: vtt

index.php

<?php
	// Self-hosted video block plugin
	
	Kirby::plugin('wenzels-design/self-hosted-video-block', [
		'snippets' => [
			'blocks/self-hosted-video-block' => __DIR__ . '/snippets/blocks/self-hosted-video-block.php',
		],
		'blueprints' => [
			'blocks/self-hosted-video-block' => __DIR__ . '/blueprints/blocks/self-hosted-video-block.yml',
			'files/subtitle-file' => __DIR__ . '/files/subtitle-file.yml',
		]
	]);
?>
4

A files field does not have a template property, you have to use

uploads: subtitle-file

instead: Files | Kirby CMS

5

Thanks Texnixe! So I was able to solve it, and just in case anybody reads this trying to figure this out:

The index.php file I posted above had an error. And you need to add the fileTypes-array, but don’t specify a mime type. The browser file-select-dialog might not allow uploading .vtt-files for either text/plain or text/vtt and won’t let your users select any files in the dialog. Just register the .vtt-filetype with Kirby and explain that is is a document.

<?php
	// Self-hosted video block plugin
	
	Kirby::plugin('wenzels-design/self-hosted-video-block', [
		'snippets' => [
			'blocks/self-hosted-video-block' => __DIR__ . '/snippets/blocks/self-hosted-video-block.php',
		],
		'blueprints' => [
			'blocks/self-hosted-video-block' => __DIR__ . '/blueprints/blocks/self-hosted-video-block.yml',
			'files/subtitle-file' => __DIR__ . '/blueprints/files/subtitle-file.yml',
		],
		'fileTypes' => [
			'vtt' => [
				'type' => 'document'
			]
		]
	]);
?>

As @texnixe said, the blueprint implementing the type: files-field must use uplaods-, not the template-field.

name: Video
icon: video
tabs:
  content:
    fields:
      …
      subtitles:
        …
        type: files
        uploads: subtitle-file

And in the file-blueprint just go by extension, not MIME-type:

title: Untertiteldatei (WebVTT)
accept:
  extension: vtt

It works for me now, and it lets me upload .vtt WebVTT-subtitle-files.