Ways to retrieve files that are not located in the public directory in Next.js

Question

Ways to retrieve files that are not located in the public directory in Next.js

I'm currently working on a project using Next.js and storing files in the root directory under /uploads/qr/myimage.png. How can I access this file within the project? I attempted to create a route /api/getImg/route.js dedicated to serving image files, and included the following code:

import fs from 'fs';
import { NextResponse } from 'next/server';
import path from 'path';

export async function GET(req) {
  const { searchParams } = new URL(req.url);
        const id = searchParams.get("id");
  const imagePath = path.join(process.cwd(), 'uploads', 'qr', `${id}.png`);

  try {
    const data = fs.readFileSync(imagePath);
    return NextResponse.send(data);
  } catch (error) {
    console.error(error);
    return NextResponse.send('Image not found');
  }
}

Unfortunately, I encountered an error that reads:

next_dist_server_web_exports_next_response__WEBPACK_IMPORTED_MODULE_1__.default.send is not a function

javascript next.js file-upload

Answer 1

Answer №1

After some experimentation, I have managed to solve the problem. The key was to send the response in a different format.

import fs from 'fs';
import { NextResponse } from 'next/server';
import path from 'path';

export async function GET(req) {
    const { searchParams } = new URL(req.url);
    const id = searchParams.get("id");
    try {
        // Read the image file from the uploads/qr directory
        const imagePath = path.join(process.cwd(), 'uploads', 'qr', `${id}.png`);
        const fileContents = fs.readFileSync(imagePath);

        return new NextResponse(fileContents, { status: 200, headers: new Headers({ "content-type": "image/png", }) })
    } catch (error) {
        console.error('Error serving image:', error);
        return NextResponse.json(error)
    }
}

Answer 2

After some experimentation, I have managed to solve the problem. The key was to send the response in a different format.

import fs from 'fs';
import { NextResponse } from 'next/server';
import path from 'path';

export async function GET(req) {
    const { searchParams } = new URL(req.url);
    const id = searchParams.get("id");
    try {
        // Read the image file from the uploads/qr directory
        const imagePath = path.join(process.cwd(), 'uploads', 'qr', `${id}.png`);
        const fileContents = fs.readFileSync(imagePath);

        return new NextResponse(fileContents, { status: 200, headers: new Headers({ "content-type": "image/png", }) })
    } catch (error) {
        console.error('Error serving image:', error);
        return NextResponse.json(error)
    }
}

Ways to retrieve files that are not located in the public directory in Next.js

Answer №1

Similar questions

Alter the arrow to dynamically point towards the location of the click source

How can an HTML5 application be configured to enable access to intranet and local files?

Promise and Determination failing to produce results

Tips on customizing the appearance of mat-card-title within a mat-card

Ways to connect images located outside of the Next.js project directory

Utilizing JSONLOADER in Three.js allows for efficient loading and

What is the best way to create a selection input using buttons and save the chosen option in the state?

Display the contents in a textarea with modal, not as a string

A step-by-step guide on integrating vuetify-component into codeceptjs

Facing issue with receiving uploaded files in Spring controller

A guide to incorporating a textview into a React application using the Google Maps API

Disabling 'Input Number' feature is ineffective in Firefox browser

Encountering an issue with Nextjs pagination when it comes to the

Learn the secrets of displaying a pop-up alert message seamlessly without interrupting the page's rendering process. Additionally, discover how to effortlessly refresh a chart every

Using Fullcalendar Moment to retrieve the current time plus an additional 2 hours

Guide on displaying the AJAX response within an HTML or JSP element pulled from a database

getting value of object property using a function that is located within the same object

If the Request does not recognize the OAuth key, generate a fresh new key

How can you verify user identity in Firebase when making a call to a cloud function on a

Leveraging the back button in an AngularJS Mobile SPA