How to Send an Image using Ajax ?

Last Updated : 06 Aug, 2024

Ajax stands for Asynchronous Javascript and XML and is used to make indirect requests to other origins. It can help you to perform a change to the web page dynamically.

We can make an AJAX request with a special object called XMLHttpRequest which provides us with different methods to create an HTTP requests.

Syntax:

xhr = new XMLHttpRequest();
xhr.onload = ()=>{...};
xhr.open(<method>,<url>);
xhr.send();

Methods Used:

open: This accepts 3 parameters:
- method: the HTTP method
- url: the resource path
- async / sync
send: Sends the final request
onload: To listen for the response

In this article, we will learn to upload an image using AJAX.

Approach:

To send an image we need to make a post request to the server and upload the image firstly by converting it into DATAURL format.

Steps:

Use a file input button to select an image
Add an oninput event listener which gets the uploaded file with e.target.files property
Using FileReader.readAsDataURL method converts the acquired file into dataurl.
Getting the input creates a new instance of XMLHttpRequest
Prepare the POST request and send the data in string format
On the server side, we are using express to listen for POST requests at localhost:3000

Example 1: Below is the implementation of the above steps:

Client: This is the client-side code that uploads the image to the server.

HTML

<html>   <body>       <input type="file"/>     <script type="text/javascript">         let result;         let input = document.getElementsByTagName('input')[0];         input.oninput=(e)=>{             console.log(e);             let file = e.target.files[0];              const reader = new FileReader();               reader.onload = (evt) => {                     console.log(evt.target.result);                     result = evt.target.result;                           const xhr = new XMLHttpRequest();       const url = 'http://localhost:3000/events';        xhr.open('POST', url);       xhr.send(result);               };               reader.readAsDataURL(file);         }     </script>   </body> </html>

Server: Accepting the Image with EXPRESS post listener

JavaScript

'use strict';  const express = require('express'); run().catch(err => console.log(err)); async function run() {     const app = express();      app.post('/events', (req, res) => {         res.set({             'Cache-Control': 'no-cache',             'Access-Control-Allow-Origin': '*'         });         req.on("data", (data) => {             console.log(data.toString());         })         res.send();     }) }

Output:

In the above GIF image, we find that the image is getting transferred in DATAURL format. The tabs on the left represent the client and the large black tab on the right represents the server.

We can select the image with the file input button and immediately the transfer takes place.

Example 2:

In this example, we will send an image and display the image which is reverted back from the server.

Project Structure:

Steps to Send an Image using Ajax using Express :

Step 1: Create a New Directory

First, create a new directory for your project and navigate into it.

mkdir Your_folder_name
cd Your_folder_name

Step 2: Initialize a New Node.js Project

After that, you have to Initialize a new node project using npm.

npm init -y

Step 3: Install the required packages

Then install the required package using npm.

npm install express ejs multer

Updated dependencies:

"dependencies": {
    "ejs": "^3.1.10",
    "express": "^4.19.2",
    "multer": "^1.4.5-lts.1"
  }
}

Example: Below is the code example of how to How to Send an Image using Ajax using Express

HTML

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Upload Image with Ajax</title>     <link rel="stylesheet" href="/style.css"> </head> <body>     <div class="container">         <h2>Upload Image</h2>         <form id="uploadForm" enctype="multipart/form-data">             <input type="file" id="image" name="image" accept="image/*" required>             <button type="submit">Upload</button>         </form>         <div id="response"></div>     </div>     <script src="/script.js"></script> </body> </html>

CSS

/* Write CSS Here */ body {     font-family: Arial, sans-serif;     display: flex;     justify-content: center;     align-items: center;     height: 100vh;     margin: 0;     background-color: #f4f4f4; }  .container {     background: white;     padding: 20px;     border-radius: 10px;     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);     text-align: center; }  h2 {     margin-bottom: 20px;     color: #14e777; }  input[type="file"] {     display: block;     margin: 0 auto 20px; }  button {     padding: 10px 20px;     background-color: #007bff;     color: white;     border: none;     border-radius: 5px;     cursor: pointer; }  button:hover {     background-color: #0056b3; }  img {     margin-top: 20px;     max-width: 100%;     height: auto;     border: 1px solid #ddd;     border-radius: 10px;     padding: 5px; }

JavaScript

// server.js code... const express = require('express'); const multer = require('multer'); const path = require('path');  const app = express(); const port = 3000;  // Set up storage engine const storage = multer.diskStorage({     destination: './uploads/',     filename: (req, file, cb) => {         cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));     } });  // Initialize upload const upload = multer({     storage: storage,     limits: { fileSize: 1000000 }, // Limit file size to 1MB     fileFilter: (req, file, cb) => {         checkFileType(file, cb);     } }).single('image');  // Check file type function checkFileType(file, cb) {     const filetypes = /jpeg|jpg|png|gif/;     const extname = filetypes.test(path.extname(file.originalname).toLowerCase());     const mimetype = filetypes.test(file.mimetype);      if (mimetype && extname) {         return cb(null, true);     } else {         cb('Error: Images Only!');     } }  // Set view engine app.set('view engine', 'ejs');  // Public folder app.use(express.static('./public')); app.use('/uploads', express.static(path.join(__dirname, 'uploads')));  // Routes app.get('/', (req, res) => res.render('index'));  app.post('/upload', (req, res) => {     upload(req, res, (err) => {         if (err) {             res.status(400).send({ msg: err });         } else {             if (req.file == undefined) {                 res.status(400).send({ msg: 'No file selected!' });             } else {                 res.status(200).send({                     msg: 'File uploaded successfully!',                     file: `uploads/${req.file.filename}`                 });             }         }     }); });  app.listen(port, () => console.log(`Server started on http://localhost:${port}`));

JavaScript

//script.js code   document.getElementById('uploadForm').addEventListener('submit', function(event) {     event.preventDefault();      let formData = new FormData();     let image = document.getElementById('image').files[0];     formData.append('image', image);      let xhr = new XMLHttpRequest();     xhr.open('POST', '/upload', true);      xhr.onload = function() {         let response = document.getElementById('response');         if (xhr.status === 200) {             let data = JSON.parse(xhr.responseText);             response.innerHTML = `<p>${data.msg}</p><img src="${data.file}" alt="Uploaded Image">`;         } else {             let data = JSON.parse(xhr.responseText);             response.innerHTML = `<p>${data.msg}</p>`;         }     };      xhr.send(formData); });