Modal box on the node js

Asked by At

I have the file upload api, which send out the SUCCESS message on the file upload and the FAILURE message when the file not selected.

app.js

    const express = require("express");
    const app = express();
    const http = require("http").Server(app).listen(3000);
    const upload = require("express-fileupload");
    const request = require("request");

    app.use(express.urlencoded());
    app.use(express.json());
    app.use(upload({
    useTempFiles: true,
    tempFileDir: '/tmp/'
    }));

    console.log("Server Started");

    // To load both HTML and CSS files on the root call
    app.use(express.static(__dirname + "/public"));

    app.get("/", function (req, res) {
    res.sendFile(__dirname + "/index.html");
    }
    )

    app.post("/", function (req, res) {
    if (req.files.filename.name) {
        res.send("uploaded");
    }
    else
        res.send("Please select the file to upload!");
    })

Instead res.send(), i want to display some modal box defined on my html code. Need a help on how to incorporate or shown this modal box upon my post request.

index.html

    <link rel="stylesheet" href="index.css">

    <div class="hdngTab">
    <h1 style="align-content: center"> Utility</h1>
    </div>


    <div class="test">

    <form label="upload" method="post" enctype="multipart/form-data" action="/">
        <div class="sf-ref">
        <label> Ticket Reference </label>
        <input type="text" name="sftext"> </input>
        </div>
        <br><br>
        <input style="font-size: 20px; padding-left: 180px" type="file" name="filename">
        <!--input style="font-size: 20px" type="submit" value="Upload"-->
        <button class="trigger" style="font-size: 20px" value="Upload">
        Upload </button>
    </form>
    </div>

    <div class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h1>Hello, I am a modal!</h1>
    </div>
    </div>

0 Answers