Setting up Sveltekit with Mdsvex

Richard Lee — Tue, 01 Feb 2022 04:55:21 +0000

I've been enjoying my time with Svelte that I've decided I'm going to rebuild my blog agian using SvelteKit and Mdsvex. I want this setup because I have some grand ambition (but high likelihood I'll never find the time to do it) to build interactive tutorials or pages.

Setting this up was pretty simple.

Start by installing a new SvelteKit project

npm init svelte@next new-blog
cd new-blog
npm install

We also need mdsvex.

npm i --save-dev mdsvex

Now that we have the two main parts, lets configure the project so that they work together. Edit the svelte.config.js, and add mdsvex to the Svelte preprocess. We will also add the the extension .svx to be processed.

import {mdsvex} from 'mdsvex';

const config = {
    extensions: ['.svelte', '.md', '.svx'],
    preprocess: [
        mdsvex({
            extensions: ['.md', '.svx'],
        })
    ],
    kit: {
        ...
    }
};

That's pretty much it!

Create the folder routes\posts and create a new md or svx file, for example, new-post.md. Inside this .md file you can write markdown as usual, but also import Svelte components.

// Example markdown file
<script>
  import Header from '../../components/posts/Header.svelte'
</script>

<Header title="Title of this post"></Header>

## Other typical markdown text

Resources

SvelteKit
mdsvex

Simple Image Upload with Express

Richard Lee — Sun, 13 Jun 2021 14:45:27 +0000

This is a very simple basic refresher to uploading photos from a html form to an express server and to save it into a folder.

Setup the server

We'll use express to run a simple server with an api route for uploading multiple images. Since the data will be coming over as a multi-part FormData we'll use a middleware handler called multer . multer will take the FormData and parse the content to store binary files while also being able to parse out other text fields.

npm i express multer

Create a new server file called server.js and setup the basic foundations for an app with a POST route called /upload. We will also use express to render static pages from a public folder, where we will create a single page that has the upload form.

const express = require("express");
const app = express();

app.use(express.static(path.join(__dirname, "public")));

// Route
app.post("/upload", function (req, res, next) {
  res.json({ 
        success: true,
        payload: [] 
    });
});

app.listen(8080, () => console.log("Server started on 8080"));

Configure Multer

Next we'll configure the middleware multer to handle the FormData. Add the following to server.js after const app = express().

const path = require("path");
const multer = require("multer");

const storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, "uploads");
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  },
});

const upload = multer({ storage: storage });

This will define the location where multer will store the file and to also define the file name to be the same as the existing. Realistically you would want to rename the file to have some form of unique name in case a different image with the same name is uploaded, you would not want this to overwrite the original.

But I don't care here, this is just a basic example. Now lets incorporate upload into the /upload route. We use the .array() method for multiple file uploads, and pass a String as the first parameter that defines the field name that is being used in the FormData to identify the files that are being uploaded. In this example we will use "images".

app.post("/upload", upload.array("images"), function (req, res, next) {
  res.json({
    success: true,
    payload: req.files,
  });
});

Prepare the form

Inside pubic folder, create a new file named index.html and add the following code.

<html>
  <head>
        <title>Basic Image Uploader</title>
    </head>
  <body>
    <h1>Image Uploader</h1>
    <form action="/upload" enctype="multipart/form-data" method="POST">
      <input type="file" name="images" multiple/>
      <button type="submit">Upload</button>
    </form>
  </body>
</html>

We are simply creating a form that has an action to POST the /upload api endpoint and to encode the data as a multi-part FormData. Defining the name attribute for the input field will be used for the field name in the FormData. This must be the same as the field name passed into the upload.array() middleware function in the server.js route for /upload.

Test the form

Run the server by running node server.js and visit the url http://localhost:8080/ to upload a file through the form. The file should end up in the project directory under the upload folder or whatever that was defined in the multer configuration.