Send file as response #15453
-
|
As titled, is this possible? Using nodejs + express, i can do it like this But i see that Next's response doesn't have sendFile method, and i tried the above like the following But it didn't work. My idea is to serve an image file from a folder located on same level as public folder in NextJS directory and return it as response to the user. But im not sure if res.send() can do that. |
Beta Was this translation helpful? Give feedback.
Replies: 12 comments 32 replies
-
|
Hi @Corouna. The var filePath = path.join(__dirname, 'myfile.mp3');
var stat = fileSystem.statSync(filePath);
response.writeHead(200, {
'Content-Type': 'audio/mpeg',
'Content-Length': stat.size
});
var readStream = fileSystem.createReadStream(filePath);
// We replaced all the event handlers with a simple call to readStream.pipe()
readStream.pipe(response);Also be sure to access the file via |
Beta Was this translation helpful? Give feedback.
-
|
Instead of await new Promise(function (resolve) {
downloadStream.pipe(res)
downloadStream.on('end', resolve)
})Otherwise, the following warning will show up: API resolved without sending a response for /api/some/route, this may result in stalled requests.Note that the whole API method needs to be async for that to work: export default async (req, res) => {...}
// ↑↑↑↑ |
Beta Was this translation helpful? Give feedback.
-
|
I am sorry but this does not work. I am have The errors received are...
The code that I have use is import { readFileSync } from "fs";
export function GET(req: Request, res: Response) {
const defPath = `e:\\anshlab\\upload`
const q = new URL( req.url )
const path = q.searchParams.get('path')
const img = q.searchParams.get('img')
const file = `${defPath}\\${path}\\${img}`
const imgBuf = readFileSync(file)
console.log(file);
try {
const imageBuffer = readFileSync(file);
res.setHeader('Content-Type', 'image/png');
res.send(imageBuffer);
} catch (e: any) {
console.log(e.message);
res.status(400).json({ error: true, message: 'Image not found' });
}
//console.log(res);
} |
Beta Was this translation helpful? Give feedback.
-
|
@gajendhir you are conflating:
Your code is using API routes syntax in a route handler. You may either want to use the route handler syntax from answer below or use an API route. |
Beta Was this translation helpful? Give feedback.
-
|
It's technically possible, but I'm not sure if it will work on all deployment platforms. As @jamesmosier said, you can send a buffer using Example: /*
Project structure:
.
├── images_folder
│ └── next.jpg
├── package.json
├── pages
│ ├── api
│ │ └── image.js
│ └── index.js
├── README.md
└── yarn.lock
*/
// pages/api/image.js
import fs from 'fs'
import path from 'path'
const filePath = path.resolve('.', 'images_folder/next.jpg')
const imageBuffer = fs.readFileSync(filePath)
export default function(req, res) {
res.setHeader('Content-Type', 'image/jpg')
res.send(imageBuffer)
}Out of curiosity, why do you need to serve files outside of Next's |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Already tested and it works 💯 It seems using |
Beta Was this translation helpful? Give feedback.
-
Coz the image is dynamically generated... user send the b64 file and the API will process and write the file inside the destination folder. Then i will return back the processed file back to the user, and delete the file from the destination folder. |
Beta Was this translation helpful? Give feedback.
-
|
@jamesmosier @cristiand391 thanks for the reply. Im still on vacation now but will definitely give that a try once im back. Many thanks again 😄 |
Beta Was this translation helpful? Give feedback.
-
|
My use case is for safari push notifications. I have to serve a zip file from a POST request. Static files won't cut it as it's not possible to serve https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/NotificationProgrammingGuideForWebsites/PushNotifications/PushNotifications.html @Corouna |
Beta Was this translation helpful? Give feedback.
-
|
For future googlers, Here's the full working code. Live demo: https://stackblitz.com/edit/nextjs-image-api?file=pages/api/[id].js import fs from 'fs';
import path from 'path';
export default function(req, res) {
const id = req.query.id;
const filePath = path.join(process.cwd(), `/public/images/${id}.svg`);
try {
const imageBuffer = fs.readFileSync(filePath);
res.setHeader('Content-Type', 'image/svg+xml');
res.send(imageBuffer);
} catch (e) {
res.status(400).json({ error: true, message: 'Image not found' });
}
} |
Beta Was this translation helpful? Give feedback.
-
|
In general it's recommended to pipe the stream instead of reading a file synchronously (this will block every request from processing as it's not async). As shown in: #15453 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens I might be doing something wrong, but it doesn't work. It just returns empty. import fs from 'fs';
import path from 'path';
export default async function(req, res) {
const id = req.query.id;
const filePath = path.join(process.cwd(), `/public/images/${id}.svg`);
try {
const imageBuffer = fs.createReadStream(filePath);
await new Promise(function(resolve) {
res.setHeader('Content-Type', 'image/svg+xml');
imageBuffer.pipe(res);
imageBuffer.on('end', resolve);
});
} catch (e) {
res.status(400).json({ error: true, message: e });
}
}Can you tell me what's wrong here? I'm new to this. |
Beta Was this translation helpful? Give feedback.
-
|
It works now :) Added error handling for import fs from 'fs';
import path from 'path';
export default async function(req, res) {
const id = req.query.id;
try {
const filePath = path.join(process.cwd(), `/public/images/${id}.svg`);
const imageBuffer = fs.createReadStream(filePath);
await new Promise(function(resolve) {
res.setHeader('Content-Type', 'image/svg+xml');
imageBuffer.pipe(res);
imageBuffer.on('end', resolve);
imageBuffer.on('error', function(err) {
if (err.code === 'ENOENT') {
res.status(400).json({
error: true,
message: 'Sorry we could not find the file you requested!'
});
res.end();
} else {
res
.status(500)
.json({ error: true, message: 'Sorry, something went wrong!' });
res.end();
}
});
});
} catch (err) {
res.status(400).json({ error: true, message: err });
res.end();
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Could someone please show a working example of how to save this data on the client side pages. i keep getting a corrupted file with this method const data = await axios.get("/api/shipments/downloadManifest");
const pdfBlob = new Blob([data.data], { type: "application/xlsx" });
return saveAs(pdfBlob, "manifest.xlsx"); |
Beta Was this translation helpful? Give feedback.
-
|
adding { responseType: "blob" }fixed it for me const data = await axios.get("/api/shipments/downloadManifest", {
responseType: "blob",
});
const pdfBlob = new Blob([data.data], { type: "application/xlsx" });
return saveAs(pdfBlob, "manifest.xlsx"); |
Beta Was this translation helpful? Give feedback.
-
|
Hi all, been trying to get an API route to send an image based on a URL within a database object. code is like this: export default async function handler(req, res) {
const { id } = req.query;
let canSeeImage = false; // there is more behind this, but its not relevant.
const image = await get(id);
if(canSeeImage) {
const imageRes = fetch(image.url);
// how to send it back?
// tried this:
// const blob = await imageResponse.blob();
// const blobUrl = URL.createObjectURL(blob);
// const imageBlob = new Blob([blob], { type: 'image/jpeg' });
// res.setHeader('Content-Type', imageBlob.type);
// res.setHeader('Content-Length', imageBlob.size);
// res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
// res.status(200).send(imageBlob);
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Alright, as always: stackoverflow comes in clutch: Found this for a simple node express app, and it works for Next as well. Requires the writehead 200 otherwise next will think it has not send a response. res.writeHead(200, { 'Content-Type': 'image/jpeg' });
if (image.url.startsWith('https'))
https.get(image.url, (stream) => {
stream.pipe(res);
});
else {
http.get(image.url, (stream) => {
stream.pipe(res);
});
} |
Beta Was this translation helpful? Give feedback.
-
|
@m10rten in case you still want to still use const imageResponse = await fetch(image.url);
if (!imageResponse.ok) {
return res.status(404);
}
res.writeHead(200, {
'Content-Type': `image/jpeg`,
'Cache-Control': `public, immutable, no-transform, s-maxage=31536000, max-age=31536000`
});
res.end(Buffer.from(await imageResponse.arrayBuffer())); |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your answer, however I'm satisfied with my solution and it works perfectly. |
Beta Was this translation helpful? Give feedback.
-
|
Does anyone know a solution that works with the newer App router? API routes are different and don’t give you an res object and as far as i can tell, require you to return a NextReponse object. I need to pipe a video through an api route and I can’t figure out how to do it with this App router API routes… |
Beta Was this translation helpful? Give feedback.
-
|
See relevant Reddit thread but with no clear answer: https://www.reddit.com/r/nextjs/comments/13toeob/nextjs_response_with_a_stream/ I found some docs though with a demo using OpenAI: https://nextjs.org/docs/app/building-your-application/routing/router-handlers#streaming |
Beta Was this translation helpful? Give feedback.
-
|
@eric-burel the socket error you mentioned on SO might also be because of this - https://nextjs.org/docs/messages/api-routes-response-size-limit. API Routes apparently have a 4mb limit, and anything above that throws out an error. I've tried sending files using |
Beta Was this translation helpful? Give feedback.
-
|
Interesting, in my case I was sending a 344b file so definitely under the threshold but perhaps my stream never correctly ends since the syntax is messed up. I wonder if this limitation applies to streams? Since the whole point is to not send 4mb in one go. But perhaps this is summed over the file size. Anyway I am below this threshold here + in a Node.js environment so it's perhaps a different issue. |
Beta Was this translation helpful? Give feedback.
-
|
@eric-burel were you able to figure out how to pipe a stream to NextResponse object though? I also increased my container memory to 500 mb from 200mb, and coded a limit to the max size of a file which can be transferred (just 4 mb) from an api route, and it has been working fine for now. I'll keep on monitoring and increasing limits. but the best case scenario is to pipe the data to a NextResponse itself :( |
Beta Was this translation helpful? Give feedback.
-
|
@rohithandique made some progress on the stream part, see https://stackoverflow.com/a/76780381/5513532 The ECONNRESET error is probably just a consequence of the first error. Related: #38736 (@leerob if by any chance we could have an official answer on this this would be awesome 🙏) |
Beta Was this translation helpful? Give feedback.
-
|
Below is an updated answer for Next 13 Route Handlers. This answer uses streams, in order to avoid bloating your server RAM for big files or high request volumes. You may get more information about the conversion from Node.js logic (Next.js API routes) to web platform logic used by route handlers (needed so they work both in Node.js and the Edge runtime) in this Stack Overflow answer. See an example usage in the State of JavaScript codebase, to download a CSV+JSON zip out of a Mongo database. In particular, you'll want to set the "Content-Size" header properly with the file size. Bonus: we have also tried to convert Regarding file download: // @see https://github.com/vercel/next.js/discussions/15453#discussioncomment-6226391
import fs from "fs"
/**
* Took this syntax from https://github.com/MattMorgis/async-stream-generator
* Didn't find proper documentation: how come you can iterate on a Node.js ReadableStream via "of" operator?
* What's "for await"?
*/
async function* nodeStreamToIterator(stream: fs.ReadStream) {
for await (const chunk of stream) {
yield chunk;
}
}
/**
* Taken from Next.js doc
* https://nextjs.org/docs/app/building-your-application/routing/router-handlers#streaming
* Itself taken from mozilla doc
* https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
*/
function iteratorToStream(iterator): ReadableStream {
return new ReadableStream({
async pull(controller) {
const { value, done } = await iterator.next()
if (done) {
controller.close()
} else {
// conversion to Uint8Array is important here otherwise the stream is not readable
// @see https://github.com/vercel/next.js/issues/38736
controller.enqueue(new Uint8Array(value))
}
},
})
}
export function streamFile(path: string): ReadableStream {
const downloadStream = fs.createReadStream(path);
const data: ReadableStream = iteratorToStream(nodeStreamToIterator(downloadStream))
return data
}Usage: const stats = await fsPromises.stat(zipFilePath);
const data: ReadableStream = streamFile(zipFilePath)
const res = new NextResponse(data, {
status: 200,
headers: new Headers({
"content-disposition": `attachment; filename=${path.basename(
zipFilePath
)}`,
"content-type": "application/zip",
"content-length": stats.size + "",
})
})
return resThanks @rohithandique for the feedback and the many people whose code I had to copy paste and merge to produce this beauty. |
Beta Was this translation helpful? Give feedback.
-
|
Yoo, Wall_Naive here from the reddit question (https://www.reddit.com/r/nextjs/comments/13toeob/nextjs_response_with_a_stream/ Heres how I setup the streaming from the file. I just added the events when we got dada, when we ended, and when we got an error. It works with the given .iso file. The given example is with NextJS 13 with Typescript. Credit to eric-burel I couldn't figure out the NextJS Response headers. Still trying to figure out etags import fs, { Stats } from "fs";
import { NextRequest, NextResponse } from "next/server";
import path from "path";
import { ReadableOptions } from "stream";
function streamFile(path: string, options?: ReadableOptions): ReadableStream<Uint8Array> {
const downloadStream = fs.createReadStream(path, options);
return new ReadableStream({
start(controller) {
downloadStream.on("data", (chunk: Buffer) => controller.enqueue(new Uint8Array(chunk)));
downloadStream.on("end", () => controller.close());
downloadStream.on("error", (error: NodeJS.ErrnoException) => controller.error(error));
},
cancel() {
downloadStream.destroy();
},
});
}
export async function GET(req: NextRequest): Promise<NextResponse> {
const uri = req.nextUrl.searchParams.get("uri");
const file = "/home/manjaro/Downloads/manjaro-kde-22.1.3-230529-linux61.iso"; // req.nextUrl.searchParams.get("file");
const stats: Stats = await fs.promises.stat(file);
const data: ReadableStream<Uint8Array> = streamFile(file); //Stream the file with a 1kb chunk
const res = new NextResponse(data, {
status: 200,
headers: new Headers({
"content-disposition": `attachment; filename=${path.basename(file)}`,
"content-type": "application/iso",
"content-length": stats.size + "",
}),
});
return res;
}
|
Beta Was this translation helpful? Give feedback.
-
Is it possible to delete / destroy the file after response is sent? Something like |
Beta Was this translation helpful? Give feedback.
-
|
@shennan-wong-partior you might want to look for discussions talking about doing operations after a response is sent in general, or even open a new issue/discussion. In API routes, or Express for instance, what you can do is send the request but return only later on: res.send(...) // notice that you don't return here, while in Next.js Route handler you have to return the response so its sent to the end user
fs.unlink(...)But in route handler the thing is that the part that actually send the response is internal to Next.js, you only create a Response object but you don't control when it is sent. No idea how to bypass this yet, you may give a shot at registering an event handler on the ReadableStream end maybe? I'll think about it |
Beta Was this translation helpful? Give feedback.
-
|
@rohithandique I didn't go as far as testing the actual impact indeed, you might want to open an issue with repro if you do notice a spike even when using a stream. Also make sure to test on a built app (in dev the first call to your API endpoint will provoke a spike but due to the build) |
Beta Was this translation helpful? Give feedback.
-
|
@Lrios4403 |
Beta Was this translation helpful? Give feedback.
-
|
dont worry about asking new questions this isn't StackOverflow. (also im newish so may not be any better) In Next 13 there are pages.tsx (or jsx or whatever language your using) and route.tsx. With route.tsx you can handle HTTP methods like GET and POST requested from the user and return a Response object. If you want to GET data from a webserver (like a webpage, a file, etc) you can request said file and do whatever you want with it (for example, show a website in html and have the browser render it). In order to POST (or submit data) to the webserver you can make a HTTP request with POST. In any HTTP method function it doesent matter what happens inside said funciton as long as you return a Response or a NextResponse. TLDR; nextjs allows you to GET and POST to a webserver with In the code I provided is code to a
import fs, { Stats } from "fs";
import { NextRequest, NextResponse } from "next/server";
import path from "path";
import { ReadableOptions } from "stream";
/**
* Return a stream from the disk
* @param {string} path - The location of the file
* @param {ReadableOptions} options - The streamable options for the stream (ie how big are the chunks, start, end, etc).
* @returns {ReadableStream} A readable stream of the file
*/
function streamFile(path: string, options?: ReadableOptions): ReadableStream<Uint8Array> {
const downloadStream = fs.createReadStream(path, options);
return new ReadableStream({
start(controller) {
downloadStream.on("data", (chunk: Buffer) => controller.enqueue(new Uint8Array(chunk)));
downloadStream.on("end", () => controller.close());
downloadStream.on("error", (error: NodeJS.ErrnoException) => controller.error(error));
},
cancel() {
downloadStream.destroy();
},
});
}
/**
* Return a NextRequest with the downloaded file
* @param {NextRequest} req - The HTTP request
* @param {ReadableOptions} options - The streamable options for the stream (ie how big are the chunks, start, end, etc).
* @returns {Promise<NextResponse>} A NextResponse with the downloadable file
*/
export async function GET(req: NextRequest): Promise<NextResponse> {
const uri = req.nextUrl.searchParams.get("uri"); // Get the `uri` from the search parameters (for example, `https://google.com/download?uri=asdf` will return `asdf`)
const file = "/home/manjaro/Downloads/manjaro-kde-22.1.3-230529-linux61.iso"; // The manjaro iso file that I want people to download
const stats: Stats = await fs.promises.stat(file); // Get the file size
const data: ReadableStream<Uint8Array> = streamFile(file); // Stream the file with a 1kb chunk
const res = new NextResponse(data, { // Create a new NextResponse for the file with the given stream from the disk
status: 200, //STATUS 200: HTTP - Ok
headers: new Headers({ //Headers
"content-disposition": `attachment; filename=${path.basename(file)}`, //State that this is a file attachment
"content-type": "application/iso", //Set the file type to an iso
"content-length": stats.size + "", //State the file size
}),
});
return res; // Return the NextResponse with the file so NextJS can send the file to the user
} |
Beta Was this translation helpful? Give feedback.
-
|
I recently ran into the same issue. I want an equivalent to |
Beta Was this translation helpful? Give feedback.
-
|
@eric-burel - Thank you very much for highlighting the difference between the Please help me with the last part of this query...
In the current usage, |
Beta Was this translation helpful? Give feedback.
-
|
Hey folks, I've worked up a simpler solution thanks to @karlhorky feedback, Node.js has a Live demo: https://nextpatterns.dev/p/gems/route-handlers-file-streaming import fs from "fs/promises"
import path from "path"
export async function GET(request: Request) {
const filePath = path.resolve("/path-to-your-image.jpg")
const stats = await fs.stat(filePath);
const fileHandle = await fs.open(filePath)
const stream = fileHandle.readableWebStream(
{ type: "bytes" }
)
return new Response(stream, {
status: 200,
headers: new Headers({
"content-type": "image/jpeg",
"content-length": stats.size + "",
})
})
// needs next 15 with next/after
after(() => { fileHandle.close() })
}In case you have a doubt about perf impact, the first spike on the left is the RAM impact of the proper solution (small spike), the second is the RAM impact of the wrong solution (big spike). Screenshot is actually from an Astro app and without proper file closing but you get the point, in the stream implementation, the big file is not copied in memory, in the copy then stream implementation, it bloats the RAM.
See nodejs/node#54041 and #68109 |
Beta Was this translation helpful? Give feedback.
-
|
You could always do the transformation via the iterator protocol like this: import * as fs from "fs";
import { ReadableStream } from "stream/web";
const rs = fs.createReadStream("./package.json");
const ws = ReadableStream.from(rs);
for await (const x of ws) {
console.log(x.toString());
}Since node readable streams are async iterators, you can use the ReadableStream.from method to get a web stream and this should cover error handling, back pressure and finalization. |
Beta Was this translation helpful? Give feedback.
Hi @Corouna. The
resobject is Node's built in response object, so if you wanted to send a file you could follow something like this exampleAlso be sure to access the file via
process.cwd()as described here https://nextjs.org/docs/basic-features/data-fetching#reading-files-use-processcwd