file-upload-express
file-upload-express copied to clipboard
Published
20 hours ago •
jecfish
jecfish
API: get image by ID, not all get requests are fulfilled, request status is forever pending?
Hello,
I followed the tutorial. All the API's works fine however when API to retrieve images by ID isn't working for multiple images. Most of get requests are pending on server (status is pending in Network panel of Chrome Dev tools).
The requests never gets completed once in pending state (forever pending) and server gets stuck in that.
Here is the screenshot of pending-network-requests-chrome-dev-tools:
###API to Retrieve Image by Id
app.get('/images/:id', async (req, res) => {
try {
const col = await loadCollection(COLLECTION_NAME, db);
const result = col.get(req.params.id);
if (!result) {
res.sendStatus(404);
return;
};
res.setHeader('Content-Type', result.mimetype);
fs.createReadStream(path.join(UPLOAD_PATH, result.filename)).pipe(res);
} catch (err) {
res.sendStatus(400);
}
})
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fetch Image (NodeJS-LokiJS API) - Example</title>
<style>
.photo {
width: 100px;
display: block;
margin-bottom: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>HTML Example</h1>
<p>
JPEG:<br>
<img class="photo" src="http://localhost:3000/images/1">
<img class="photo" src="http://localhost:3000/images/2">
<img class="photo" src="http://localhost:3000/images/3">
<img class="photo" src="http://localhost:3000/images/4">
<img class="photo" src="http://localhost:3000/images/5">
<img class="photo" src="http://localhost:3000/images/6">
</p>
</body>
</html>
