Héberge des fichiers avec Remix

1
npx create-remix@latest

1
import { Form } from '@remix-run/react';
2

3
export function File() {
4
	return (
5
		<Form
6
			method='POST'
7
			className='mt-8 flex flex-col gap-2 w-full items-center'
8
		>
9
			<input type='file' name='file' />
10
			<button type='submit'>Soumettre</button>
11
		</Form>
12
	);
13
}

1
import type { ActionFunctionArgs } from '@remix-run/node';
2
import { Form } from '@remix-run/react';
3

4
export const action = async ({ request }: ActionFunctionArgs) => {
5
	// Nous devons sauvegarder le fichier à cet endroit
6
	return null;
7
};
8

9
export function File() {
10
	return (
11
		<Form
12
			method='POST'
13
			className='mt-8 flex flex-col gap-2 w-full items-center'
14
		>
15
			<input type='file' name='file' />
16
			<button type='submit'>Soumettre</button>
17
		</Form>
18
	);
19
}

1
import type { ActionFunctionArgs } from '@remix-run/node';
2
import { Form } from '@remix-run/react';
3

4
export const action = async ({ request }: ActionFunctionArgs) => {
5
	// Nous devons sauvegarder le fichier à cet endroit
6
	return null;
7
};
8

9
export function File() {
10
	return (
11
		<Form
12
			method='POST'
13
			encType='multipart/form-data'
14
			className='mt-8 flex flex-col gap-2 w-full items-center'
15
		>
16
			<input type='file' name='file' />
17
			<button type='submit'>Soumettre</button>
18
		</Form>
19
	);
20
}

1
import {
2
	unstable_createFileUploadHandler,
3
	unstable_parseMultipartFormData,
4
	type ActionFunctionArgs,
5
} from '@remix-run/node';
6
import { Form } from '@remix-run/react';
7

8
export const action = async ({ request }: ActionFunctionArgs) => {
9
	const formData = await unstable_parseMultipartFormData(
10
		request,
11
		unstable_createFileUploadHandler({
12
			maxPartSize: 1024 * 1024 * 10, // 10MB
13
			directory: './uploads',
14
		})
15
	);
16
	const file = formData.get('file') as File; // 👈 notre fichier au format Buffer
17
	console.log(file.name); // 👈 Le nom du fichier pour pouvoir le retrouver sur le serveur
18
	return null;
19
};
20

21
export function File() {
22
	return (
23
		<Form
24
			method='POST'
25
			encType='multipart/form-data'
26
			className='mt-8 flex flex-col gap-2 w-full items-center'
27
		>
28
			<input type='file' name='file' />
29
			<button type='submit'>Soumettre</button>
30
		</Form>
31
	);
32
}

1
import {
2
	unstable_createMemoryUploadHandler,
3
	unstable_parseMultipartFormData,
4
	type ActionFunctionArgs,
5
} from '@remix-run/node';
6
import { Form } from '@remix-run/react';
7
import { saveVideoToLocal } from '~/videos.server';
8

9
export const action = async ({ request }: ActionFunctionArgs) => {
10
	const formData = await unstable_parseMultipartFormData(
11
		request,
12
		unstable_createMemoryUploadHandler({
13
			maxPartSize: 1024 * 1024 * 10, // 10MB
14
		})
15
	);
16
	const file = formData.get('file') as File; // 👈 notre fichier au format Buffer
17
	console.log(file.name); // 👈 Le nom du fichier pour pouvoir le retrouver sur le serveur
18
    // mark
19
	const { name } = await saveVideoToLocal({ videoFile: file }); // 👈 On sauvegarde le fichier sur le serveur
20
	return { name };
21
};
22

23
export function File() {
24
	return (
25
		<Form
26
			method='POST'
27
			encType='multipart/form-data'
28
			className='mt-8 flex flex-col gap-2 w-full items-center'
29
		>
30
			<input type='file' name='file' />
31
			<button type='submit'>Soumettre</button>
32
		</Form>
33
	);
34
}

1
export const saveVideoToLocal = async ({ videoFile }: { videoFile: File }) => {
2
	const originalName = new Date().toISOString() + videoFile.name;
3
	const baseDirectory = join(process.cwd(), './uploads');
4

5
	const filePath = join(baseDirectory, originalName);
6
	const arrayBuffer = await videoFile.arrayBuffer();
7
	const arrayBufferView = new Uint8Array(arrayBuffer);
8
	const fileExists = checkIfFileExists({
9
		filePath,
10
	});
11
	if (fileExists) {
12
		throw new Error('Le fichier existe déjà ...');
13
	}
14
	await access(baseDirectory);
15
	await writeFile(filePath, arrayBufferView);
16
	return { name: originalName };
17
};

1
import { LoaderFunctionArgs } from '@remix-run/node';
2
import { readFileSync } from 'fs';
3
import mime from 'mime';
4
import { join } from 'path';
5

6
export const loader = async ({ params }: LoaderFunctionArgs) => {
7
	const filename = params.filename;
8
	if (!filename) {
9
		// 👈 On vérifie que le nom du fichier est bien fourni
10
		throw new Error('No filename provided');
11
	}
12

13
	const filePath = join(process.cwd(), './uploads', filename); // 👈 On construit le chemin absolu du fichier
14
	const fileContent = readFileSync(filePath); // 👈 On lit le fichier
15
	const mimeType = mime.getType(filePath); // 👈 On récupère le type MIME du fichier
16

17
	console.log({ mimeType, filename, filePath, fileContent });
18
	return new Response(fileContent, {
19
		// 👈 On renvoie le fichier
20
		headers: {
21
			'Content-Type': mimeType || 'application/octet-stream', // 👈 On renvoie le type MIME du fichier,
22
		},
23
	});
24
};