Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Node-Fetch Project to Download Images From URL in Express.js

Posted on December 19, 2022

 

 

Welcome folks today in this blog post we will be downloading images from url using node-fetch library in express.js. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the node-fetch library using the npm command a shown below

 

 

npm i node-fetch

 

 

npm i express

 

 

After this you need to make an index.js file and copy paste the following code

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const fs = require("fs"); // Built-in filesystem package for Node.js
const fetch = require("node-fetch");
const express = require("express");
const bodyparser = require('body-parser')
 
const app = express();
 
app.use(bodyparser.urlencoded({extended:false}))
app.use(bodyparser.json())
 
app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});
 
app.post("/downloadimage", (req, res) => {
  const imageUrl = req.body.url
  let outputPath = Date.now() + "output.png"
 
  fetch(imageUrl).then((res) =>
    res.body.pipe(fs.createWriteStream(outputPath))
  );
 
  res.download(outputPath,(req,res) => {
 
  })
});
 
const port = 5000;
 
app.listen(port, () => {
  console.log("App is listening on port 5000");
});

 

 

As you can see we are loading the node-fetch and express library. And also we are including the body parser middleware since we are working with html forms. And now we are loading the index.html file when the user go to the index page and then we are also writing the post request when the users submits the form inside this we are making a request to the url that we receive using the node-fetch module and after that inside the promise we are saving the file first of all inside the local drive and then downloading it as an attachment using the download() method of express

 

Now you need to create the index.html file which will contain the simple form

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download Image From URL in Node-fetch</title>
</head>
<body>
    <form action="/downloadimage" method="post">
        <input type="text" name="url" placeholder="Enter URL of Image" required id="">
        <input type="submit" value="Download Image">
    </form>
</body>
</html>

 

 

 

 

Recent Posts

  • React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript
  • Android Java Tutorial to Change Styles & Visibility of System Bars (Top, Action & Status) Full Example
  • Android Java Project to Display & Play Audio Files From Storage inside ListView Using MediaPlayer Class
  • Android Java Project to Build MP4 Video to MP3 Audio Converter Using MediaMuxer Class
  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme