Implement byte-range requests on /assets (#4136)

Fixes #3640

api/src/controllers/assets.ts

@@ -2,7 +2,7 @@ import { Router } from 'express';
 import asyncHandler from '../utils/async-handler';
 import database from '../database';
 import { SYSTEM_ASSET_ALLOW_LIST, ASSET_TRANSFORM_QUERY_KEYS } from '../constants';
-import { InvalidQueryException, ForbiddenException } from '../exceptions';
+import { InvalidQueryException, ForbiddenException, RangeNotSatisfiableException } from '../exceptions';
 import validate from 'uuid-validate';
 import { pick } from 'lodash';
 import { Transformation } from '../types/assets';
@@ -11,6 +11,7 @@ import { PayloadService, AssetsService } from '../services';
 import useCollection from '../middleware/use-collection';
 import env from '../env';
 import ms from 'ms';
+import { Range } from '@directus/drive';
 
 const router = Router();
 
@@ -19,7 +20,7 @@ router.use(useCollection('directus_files'));
 router.get(
 	'/:pk',
 
-	// Check if file exists
+	// Check if file exists and if you have permission to read it
 	asyncHandler(async (req, res, next) => {
 		const id = req.params.pk;
 
@@ -33,11 +34,9 @@ router.get(
 		if (isValidUUID === false) throw new ForbiddenException();
 
 		const file = await database.select('id', 'storage', 'filename_disk').from('directus_files').where({ id }).first();
-
 		if (!file) throw new ForbiddenException();
 
 		const { exists } = await storage.disk(file.storage).exists(file.filename_disk);
-
 		if (!exists) throw new ForbiddenException();
 
 		return next();
@@ -104,17 +103,51 @@ router.get(
 			  )
 			: res.locals.transformation;
 
-		const { stream, file } = await service.getAsset(req.params.pk, transformation);
+		let range: Range | undefined = undefined;
+
+		if (req.headers.range) {
+			// substring 6 = "bytes="
+			const rangeParts = req.headers.range.substring(6).split('-');
+
+			range = {
+				start: rangeParts[0] ? Number(rangeParts[0]) : 0,
+				end: rangeParts[1] ? Number(rangeParts[1]) : undefined,
+			};
+
+			if (Number.isNaN(range.start) || Number.isNaN(range.end)) {
+				throw new RangeNotSatisfiableException(range);
+			}
+		}
+
+		const { stream, file } = await service.getAsset(req.params.pk, transformation, range);
+
+		if (req.method.toLowerCase() === 'head') {
+			res.status(200);
+			res.setHeader('Accept-Ranges', 'bytes');
+			res.setHeader('Content-Length', file.filesize);
+			return res.end();
+		}
+
+		const access = !!req.accountability?.role ? 'private' : 'public';
 
 		res.attachment(file.filename_download);
 		res.setHeader('Content-Type', file.type);
+		res.setHeader('Accept-Ranges', 'bytes');
+		res.setHeader('Cache-Control', `${access}, max-age=${ms(env.ASSETS_CACHE_TTL as string)}`);
+
+		if (range) {
+			res.setHeader('Content-Range', `bytes ${range.start}-${range.end || file.filesize - 1}/${file.filesize}`);
+			res.status(206);
+
+			res.setHeader('Content-Length', (range.end ? range.end + 1 : file.filesize) - range.start);
+		} else {
+			res.setHeader('Content-Length', file.filesize);
+		}
 
 		if (req.query.hasOwnProperty('download') === false) {
 			res.removeHeader('Content-Disposition');
 		}
 
-		const access = !!req.accountability?.role ? 'private' : 'public';
-		res.setHeader('Cache-Control', `${access}, max-age=${ms(env.ASSETS_CACHE_TTL as string)}`);
 		stream.pipe(res);
 	})
 );

api/src/exceptions/index.ts

@@ -7,6 +7,7 @@ export * from './invalid-ip';
 export * from './invalid-otp';
 export * from './invalid-payload';
 export * from './invalid-query';
+export * from './range-not-satisfiable';
 export * from './route-not-found';
 export * from './service-unavailable';
 export * from './unprocessable-entity';

api/src/exceptions/range-not-satisfiable.ts

@@ -0,0 +1,12 @@
+import { BaseException } from './base';
+import { Range } from '@directus/drive';
+
+export class RangeNotSatisfiableException extends BaseException {
+	constructor(range: Range) {
+		super(
+			`Range "${range.start}-${range.end}" is invalid or the file's size doesn't match the requested range.`,
+			416,
+			'RANGE_NOT_SATISFIABLE'
+		);
+	}
+}

api/src/services/assets.ts

@@ -5,6 +5,8 @@ import path from 'path';
 import Knex from 'knex';
 import { Accountability, AbstractServiceOptions, Transformation } from '../types';
 import { AuthorizationService } from './authorization';
+import { Range } from '@directus/drive';
+import { RangeNotSatisfiableException } from '../exceptions';
 
 export class AssetsService {
 	knex: Knex;
@@ -17,7 +19,7 @@ export class AssetsService {
 		this.authorizationService = new AuthorizationService(options);
 	}
 
-	async getAsset(id: string, transformation: Transformation) {
+	async getAsset(id: string, transformation: Transformation, range?: Range) {
 		const publicSettings = await this.knex
 			.select('project_logo', 'public_background', 'public_foreground')
 			.from('directus_settings')
@@ -31,6 +33,12 @@ export class AssetsService {
 
 		const file = await database.select('*').from('directus_files').where({ id }).first();
 
+		if (range) {
+			if (range.start >= file.filesize || (range.end && range.end >= file.filesize)) {
+				throw new RangeNotSatisfiableException(range);
+			}
+		}
+
 		const type = file.type;
 
 		// We can only transform JPEG, PNG, and WebP
@@ -44,17 +52,17 @@ export class AssetsService {
 			const { exists } = await storage.disk(file.storage).exists(assetFilename);
 
 			if (exists) {
-				return { stream: storage.disk(file.storage).getStream(assetFilename), file };
+				return { stream: storage.disk(file.storage).getStream(assetFilename, range), file };
 			}
 
-			const readStream = storage.disk(file.storage).getStream(file.filename_disk);
+			const readStream = storage.disk(file.storage).getStream(file.filename_disk, range);
 			const transformer = sharp().resize(resizeOptions);
 
 			await storage.disk(file.storage).put(assetFilename, readStream.pipe(transformer));
 
-			return { stream: storage.disk(file.storage).getStream(assetFilename), file };
+			return { stream: storage.disk(file.storage).getStream(assetFilename, range), file };
 		} else {
-			const readStream = storage.disk(file.storage).getStream(file.filename_disk);
+			const readStream = storage.disk(file.storage).getStream(file.filename_disk, range);
 			return { stream: readStream, file };
 		}
 	}