API for file uploads gets aborted #33706

br0kenpixel · 2025-11-13T14:07:15Z

br0kenpixel
Nov 13, 2025

I'm working on an app that allows file uploads to a SQLite databse. The file contents are stored as a BLOB in the database itself.

I have made an API to handle this on the server side:

import { PrismaClient } from "@prisma/client";

export default defineEventHandler(async (event) => {
    const prisma = new PrismaClient();
    const config = useRuntimeConfig();

    // Check if public uploads are allowed
    if (!config.public.allowPublicUploads) {
        throw createError({
            statusCode: 403,
            statusMessage: "Public uploads are not allowed"
        });
    }

    // Parse multipart form data
    const formData = await readFormData(event);
    const file = formData.get('file') as File | null;
    const note = (formData.get('note') as string | null) || null;

    if (!file) {
        throw createError({
            statusCode: 400,
            statusMessage: "Bad Request: No file provided"
        });
    }

    // Check file size
    if (file.size > config.public.maxFileSize) {
        throw createError({
            statusCode: 413,
            statusMessage: `File too large. Maximum size is ${config.public.maxFileSize} bytes`
        });
    }

    // Read file content
    const arrayBuffer = await file.arrayBuffer();
    const content = Buffer.from(arrayBuffer);

    // Handle upload date
    const upload_date = new Date();
    upload_date.setHours(0, 0, 0, 0);

    // Create file record in database
    await prisma.file.create({
        data: {
            name: file.name,
            size: BigInt(file.size),
            note: note,
            public: true,
            downloadable: true,
            content: content,
            upload_date: upload_date,
        }
    });

    setResponseStatus(event, 204);
    return null;
});

And here's the component that handles uploads on the client:

<script setup lang="ts">
import { FetchError } from 'ofetch';

const file = ref<File | null>();
const note = ref("");

const loading = ref(false);
const error = ref<string | null>(null);

const emit = defineEmits<{
    success: []
}>();

function handleFileSelect(event: Event) {
    const target = event.target as HTMLInputElement;

    if (target.files && target.files.length > 0) {
        file.value = target.files[0];
        error.value = null;
    } else {
        file.value = null;
    }
}

async function handleUpload() {
    if (!file.value) {
        error.value = "Please select a file";
        return;
    }

    loading.value = true;
    error.value = null;

    const formData = new FormData();
    formData.append('file', file.value);
    if (note.value) {
        formData.append('note', note.value);
    }

    try {
        await $fetch('/api/files/public/upload', {
            method: 'PUT',
            body: formData,
        });

        // Success - reset form and emit event
        file.value = null;
        note.value = "";
        error.value = null;
        emit('success');

        // Reset file input
        const fileInput = document.getElementById('file') as HTMLInputElement;
        if (fileInput) {
            fileInput.value = '';
        }

        alert("Upload done");
    } catch (e) {
        if (e instanceof FetchError) {
            error.value = e.message;
        } else {
            error.value = "Unknown";
        }
        alert(error.value);
    } finally {
        loading.value = false;
    }
}
</script>

<template>
    <div id="box">
        <h4>Quick upload</h4>

        <p v-show="loading">Please wait, processing...</p>
        <p v-show="error" style="color: red;">Error: {{ error }}</p>

        <form v-show="!loading" @submit="handleUpload">
            <label for="file">Select file: </label>
            <input type="file" id="file" v-on:change="handleFileSelect"></input>

            <div v-show="file" id="fileinfo">
                <table class="tg">
                    <tbody>
                        <tr>
                            <td class="tg-yla0">Name:</td>
                            <td class="tg-cly1">{{ file?.name }}</td>
                        </tr>
                        <tr>
                            <td class="tg-yla0">Size:</td>
                            <td class="tg-cly1">{{ file?.size }} bytes</td>
                        </tr>
                        <tr>
                            <td class="tg-yla0">Note:</td>
                            <td class="tg-cly1">
                                <input type="text" id="note" v-model="note"></input>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <input type="submit" value="Upload" id="submit-btn"></input>
            </div>
        </form>
    </div>
</template>

The issue is that while smaller files (<1MB) work just fine, larger ones (>20MB) fail with the following error being displayed on the server console:

ERROR  [request error] [unhandled] [PUT] http://localhost:3000/api/files/public/upload           3:03:37 PM

 
ℹ Error: aborted

 ⁃ at abortIncoming (node:_http_server:825:17)
 ⁃ at socketOnClose (node:_http_server:819:3)
 ⁃ at Socket.emit (node:events:531:35)
 ⁃ at Pipe.<anonymous> (node:net:346:12)
 ⁃ at Pipe.callbackTrampoline (node:internal/async_hooks:130:17)

[CAUSE]
Error {
  stack: 'aborted\n' +
  '    at abortIncoming (node:_http_server:825:17)\n' +
  '    at socketOnClose (node:_http_server:819:3)\n' +
  '    at Socket.emit (node:events:531:35)\n' +
  '    at Pipe.<anonymous> (node:net:346:12)\n' +
  '    at Pipe.callbackTrampoline (node:internal/async_hooks:130:17)',
  message: 'aborted',
  code: 'ECONNRESET',
}

I also tried implementing the API using readMultipartFormData instead of readFormData, but that results in the same error. Is there some kind of body size limitation somewhere? AIs keep suggesting that, but I could not find anything in any documentation that would explain how to increase such a limit. The error is also too generic, so Googling won't help.

sewalsh · 2025-11-13T19:36:03Z

sewalsh
Nov 13, 2025

Sounds similar to this: prisma/prisma#21655

0 replies

br0kenpixel · 2025-11-13T19:58:15Z

br0kenpixel
Nov 13, 2025
Author

Luckily I managed to find the issue.

Firstly, @submit="handleUpload" should have been @submit.prevent="handleUpload" since submitting the form would reload the page, breaking a pending request to the upload API.

Secondly, it seems like neither readMultipartFormData or readFormData are suitable for handling large files. Possibly because they don't use streaming internally, or are just generally inefficient - I don't know. But formidable's parser is working just fine. There's also busboy, but it's parsing API seemed a little janky.

const form = formidable({
    maxFields: 2,
    maxFileSize: config.public.maxFileSize
});
let fields;
let files;

try {
    [fields, files] = await form.parse(event.node.req);
} catch (err: any) {
    console.log(err);
    throw createError({
        statusCode: 422,
        statusMessage: "Pailed to parse form data"
    });
}

const file = files.file?.at(0) || null;
const note = fields.note?.at(0) || null;

// Read file contents
const content = await fs.readFile(file.filepath);

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

API for file uploads gets aborted #33706

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

API for file uploads gets aborted #33706

Uh oh!

br0kenpixel Nov 13, 2025

Replies: 2 comments

Uh oh!

sewalsh Nov 13, 2025

Uh oh!

br0kenpixel Nov 13, 2025 Author

br0kenpixel
Nov 13, 2025

sewalsh
Nov 13, 2025

br0kenpixel
Nov 13, 2025
Author