Handling File Uploads in a Remix Application

In this blog, I will explain about handling file uploads in Shopify Remix App.

File uploads are a common requirement in web applications, and handling them efficiently and securely is crucial. Remix, a modern framework for building React applications, offers a seamless way to manage file uploads through its UploadHandler API.

In this post, we will walk through setting up a simple file upload handler in a Remix application.

Steps to Set Up File Upload Handler in Remix App:

Before we dive into the code, make sure you have a Remix application set up. If you haven’t already, you can create a new Remix application by running:

shopify app init

Step 1: Creating the Upload Route

First, we need to set up an endpoint that will handle the file uploads. This involves creating a route and configuring the UploadHandler to process incoming files.

Create a new file in your routes directory, for example, upload.jsx.

// app/routes/upload.jsx

import {
    unstable_composeUploadHandlers,
    unstable_createMemoryUploadHandler,
    unstable_parseMultipartFormData,
    unstable_createFileUploadHandler,
} from "@remix-run/node";

import { json } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";

// Define a file upload handler to save files to the public/Files directory
export const standardFileUploadHandler = unstable_createFileUploadHandler({
    directory: "public/Files",
});
export const fileUploadHandler = (args) => {
    return standardFileUploadHandler(args);
};

export async function action({ request }) {
    const url = new URL(request.url);
    const shop = url.searchParams.get('shop')?.toString();

    const uploadHandler = unstable_composeUploadHandlers(
        async ({ name, contentType, data, filename }) => {
            const uploadedImage = await fileUploadHandler({
                name,
                data,
                filename,
                contentType,
            });
            return uploadedImage;
        },
        unstable_createMemoryUploadHandler()
    );
    const formData = await unstable_parseMultipartFormData(
        request,
        uploadHandler
    );

    const fields = {};
    for (const [name, value] of formData.entries()) {
        fields[name] = value;
    }

    const fileName = fields.file?.name;
    return json({ fileName });
}

export default function UploadPage() {
    const actionData = useActionData();

    return (
        <div>
            <h1>Upload a File</h1>
            <Form method="post" encType="multipart/form-data">
                <input type="file" name="file" />
                <button type="submit">Upload</button>
            </Form>

            {actionData?.fileName && (
                <p>Uploaded file: {actionData.fileName}</p>
            )}
        </div>
    );
}

Step 2: Setting Up the Upload Directory

Ensure that the directory where files will be uploaded exists. In this case, we’re using ./public/Files. You might need to create this directory if it doesn’t already exist:

Step 3: Handling File Uploads

In the upload.jsx file, the uploadHandler is defined to handle the file stream and save it to the public/ Files directory. The unstable_parseMultipartFormData function is used to parse the incoming form data and process the file upload.

Step 4: Creating the Upload Form

The UploadPage component includes a simple form with an input field of type file and a submit button. The form uses encType=”multipart/form-data” to ensure that file data is correctly encoded when submitted.

Step 5: Displaying the Uploaded File Path

After the file is uploaded, the path to the file name is displayed on the page.

Conclusion

In this post, we covered how to handle file uploads in a Remix application using the UploadHandler. This involved setting up an upload route, defining an upload handler to save the file, and creating a simple form to upload files. With this setup, you can now extend and customize the file upload functionality to fit your application’s needs.

Happy Coding!