cant access dynamically uploaded images without dev or build

[dukesx]

I am making a blog like dev.to where most of the stuff is dynamic especially images. The WYSIWYG editor uploads the images through "/api/" based route to the "public" folder.

Now , in dev mode, when i upload the image, its fine, accessible but then when i run the app after building it using npm run build and then try to upload image using WYSIWYG editor, the app shows 404 on accessing the newly uploaded image. What could be the reason ? i am doing SSR only.

However, now after uploading the image, if i then rebuild my app, i can then access the image. Is this normal ?

[alanqchen]

The public folder is only used to store static content, and not dynamic content. That's why when you rebuild the files will be available.

[dukesx]

Oh I see, any solution then for dynamic images?

[alanqchen]

I always have used an external API for dealing with uploads (such as s3 or a custom server). There may be a way to do it using the /api route support in NextJS, but I don't have experience using it.

[dukesx]

Thank you 👍

[mmahalwy]

Trying to do this but no luck. Any thoughts?

import { NextApiResponse, NextApiRequest } from 'next';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const url = req.query.url;
    const response = await fetch(decodeURIComponent(url as string));
    const r = await response.text();
    
    res.setHeader('Content-Type', response.headers.get('content-type'));
    res.setHeader('Content-Disposition', 'inline');
    // res.setHeader('Content-Transfer-Encoding', 'base64');
    res.send(Buffer.from(r));
  } catch (e) {
    
    res.status(500).json({ error: e });
  }
};

[dukesx]

Trying to do this but no luck. Any thoughts?

import { NextApiResponse, NextApiRequest } from 'next';

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const url = req.query.url;
    const response = await fetch(decodeURIComponent(url as string));
    const r = await response.text();
    
    res.setHeader('Content-Type', response.headers.get('content-type'));
    res.setHeader('Content-Disposition', 'inline');
    // res.setHeader('Content-Transfer-Encoding', 'base64');
    res.send(Buffer.from(r));
  } catch (e) {
    
    res.status(500).json({ error: e });
  }
};

Are you fetching a file from url and sending it back as a buffer?

[marcin-codelabs]

@dukesx Did you find a solution?

[looks-pk]

did any one find the solution ?

[Alief321]

I found a solution about this. I changed next/Image to img to dynamically upload images from users and added a server.js filename in the root directory (not in the app). I saved the images in public/uploads/[folder-day]/[imageUploadedFromUser]. I am using Next.js 14

this is my code for server .js

require('dotenv').config();
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');
const serveStatic = require('serve-static');
const path = require('path');

const dev = process.env.NODE_ENV !== 'production';
console.log('dev', dev, process.env.NODE_ENV);
const app = next({ dev });
const handle = app.getRequestHandler();

const staticFileMiddleware = serveStatic(path.join(__dirname, 'public/uploads'), {
  maxAge: '30d', // Cache images for 30 days
  extensions: ['jpeg', 'jpg', 'png', 'gif', 'webp'], // Serve these extensions
});

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    // Serve images from the /uploads directory
    if (pathname.startsWith('/uploads/')) {
      req.url = pathname.replace('/uploads', ''); // Adjust the path to match the static directory
      staticFileMiddleware(req, res, () => {
        res.statusCode = 404;
        res.end('Image not found');
      });
    } else {
      // Let Next.js handle all other requests
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

then i modify package.json scripts start like this

{
  "name": "{app-name}",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "node server.js",

[chinmaysk1]

You need to be rewarded. I've been trying to find a solution for the past entire week and you've saved me countless more wasted hours. Thank you.

[zackyjameldev]

It worked, @Alief321 this guy need OSCAR, thank you so much bro,