SvelteKit file uploads (#8)

One example for file uploads with NodeJS, one with S3

---------

Co-authored-by: Simon Holthausen <[email protected]>

Author: karimfromjordan

.gitignore

@@ -1 +1,11 @@
-node_modules
+.DS_Store
+node_modules
+build
+.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.temp-files

examples/counter-library/package.json

@@ -23,12 +23,12 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
+		"@sveltejs/kit": "^1.12.0",
 		"@sveltejs/package": "^2.0.0",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"publint": "^0.1.9",
-		"svelte": "^3.54.0",
+		"svelte": "^3.57.0",
 		"svelte-check": "^3.0.1",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",

examples/sveltekit-file-uploads-nodejs/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/sveltekit-file-uploads-nodejs/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'prettier'],
+	plugins: ['svelte3'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

examples/sveltekit-file-uploads-nodejs/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/sveltekit-file-uploads-nodejs/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

examples/sveltekit-file-uploads-nodejs/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/sveltekit-file-uploads-nodejs/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

examples/sveltekit-file-uploads-nodejs/README.md

@@ -0,0 +1,26 @@
+# SvelteKit file uploads using Node.js
+
+This example demonstrates how you can upload files with SvelteKit and Node.js in two different ways.
+
+**Note:** This code makes use of the `Readable.fromWeb()` API to convert between web streams and Node.js streams so Node.js >= 17.0.0 is required.
+
+Both forms write files to the local disk into a directory specified by the `FILES_DIR` environment variable. Uploaded files are served through the `src/routes/files/[name]/+server.js` endpoint.
+
+## Form 1: Small files
+
+This first form sends the file as `FormData` to the SvelteKit server.
+
+- It works with and without JavaScript
+- It uses FormData and SvelteKit's form actions
+- It should only be used for small files such as avatar images because the whole file first needs to be parsed in memory with `event.request.formData()` and there is no upload progress indicator.
+
+## Form 2: Small and large files
+
+The second form for both small and large files uses a custom store and posts the raw file body to the `upload/+server.js` endpoint.
+
+- JavaScript is required for this to work
+- A custom store handles the request and calculates the upload progress
+- `XMLHTTPRequest` is used to make the requests because `fetch` cannot be used (yet) to calculate the upload progress
+- The file object from the file input element is used as the body of the request
+- Additional information such as the file's name is passed to the server using custom request headers such as `x-file-name`
+- If a file with the same name has already been uploaded before the endpoint closes the connection by calling `event.body.cancel()`

examples/sveltekit-file-uploads-nodejs/jsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}