Send MMS Messages with Vite, React/Vue, Node.js and Infobip API

+-----------------+      +----------------------+      +----------------+
|  Vite Frontend  |----->|  Node.js/Express API |----->|  Infobip MMS API |
| (React/Vue)     |      |  (Handles Auth,      |      |                |
| - Input Form    |      |   File Upload,       |      |                |
| - File Selection|      |   Validation, API Call)|    |                |
+-----------------+      +----------------------+      +----------------+
     | User selects file      | API receives form data | API sends request
     | & submits form       | & file, validates,     | with media & data
     | (multipart/form-data)| forwards to Infobip    | to recipient

mkdir infobip-mms-app
cd infobip-mms-app
# Optional: Initialize Git
# git init
# echo "node_modules/" >> .gitignore
# echo ".env*" >> .gitignore
# echo "client/dist/" >> .gitignore
# echo "client/node_modules/" >> .gitignore
# echo "server/node_modules/" >> .gitignore

# Create the server directory
mkdir server
cd server

# Initialize Node.js project
npm init -y

# Install dependencies
npm install express axios dotenv multer cors libphonenumber-js form-data

# Install development dependencies (optional but recommended)
npm install --save-dev nodemon jest supertest

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^...",
    "cors": "^...",
    "dotenv": "^...",
    "express": "^...",
    "form-data": "^...",
    "libphonenumber-js": "^...",
    "multer": "^..."
  },
  "devDependencies": {
    "jest": "^...",
    "nodemon": "^...",
    "supertest": "^..."
  }
}

# server/.env

# Infobip Credentials (Get from Infobip Portal: https://portal.infobip.com/settings/accounts/api-keys)
INFOBIP_API_KEY=YOUR_INFOBIP_API_KEY
INFOBIP_BASE_URL=YOUR_INFOBIP_BASE_URL

# Your Infobip registered phone number (sender ID for MMS, check Infobip docs for specifics)
INFOBIP_SENDER_NUMBER=YOUR_INFOBIP_SENDER_PHONE_NUMBER

# Server Configuration
PORT=5001 # Port the backend API will run on
CLIENT_URL=http://localhost:5173 # Development URL of the Vite frontend

# From the server directory
cd ..

# Creates a 'client' directory with the Vite project
npm create vite@latest client -- --template react
# Or for Vue: npm create vite@latest client -- --template vue

cd client

# Install dependencies
npm install

# Install axios for making API calls from the frontend
npm install axios

# client/.env

# URL of the backend API
VITE_BACKEND_API_URL=http://localhost:5001

infobip-mms-app/
├── .gitignore
├── client/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   │   ├── App.css
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   ├── .env          # Optional: Frontend env vars (add to .gitignore!)
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
└── server/
    ├── node_modules/
    ├── tests/        # For tests (Section 13)
    ├── .env          # IMPORTANT: Contains secrets (add to .gitignore!)
    ├── package.json
    └── server.js     # Will be created in next step

// server/server.js
require('dotenv').config(); // Load .env variables early
const express = require('express');
const cors = require('cors');
const multer = require('multer');
const axios = require('axios');
const FormData = require('form-data'); // To construct multipart payload
const { parsePhoneNumberFromString } = require('libphonenumber-js');
const fs = require('fs');
const path = require('path');

const app = express();
const port = process.env.PORT || 5001;

// --- Middleware ---

// CORS Configuration
const corsOptions = {
    origin: process.env.CLIENT_URL, // Allow only the frontend origin
    optionsSuccessStatus: 200 // For legacy browser compatibility
};
app.use(cors(corsOptions));

// Basic JSON parsing (though less relevant for our multipart endpoint)
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Multer Configuration (for handling file uploads)
// **Warning:** `memoryStorage` loads the entire file into RAM. This is simple but
// not suitable for production environments handling large files or high traffic,
// as it can lead to excessive memory consumption. For production, strongly
// consider using `multer.diskStorage` or streaming uploads if possible.
const storage = multer.memoryStorage();
const upload = multer({
    storage: storage,
    limits: { fileSize: 10 * 1024 * 1024 }, // Example: 10MB limit (Adjust based on Infobip limits)
    fileFilter: (req, file, cb) => {
        // Basic image type check (enhance as needed)
        const allowedTypes = /jpeg|jpg|png|gif/;
        const mimetype = allowedTypes.test(file.mimetype);
        const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());

        if (mimetype && extname) {
            return cb(null, true);
        }
        cb(new Error(`Error: File upload only supports the following filetypes - ${allowedTypes}`));
    }
}).single('mediaFile'); // Expects a single file field named 'mediaFile' in the form data

// --- Infobip Configuration ---
const INFOBIP_API_KEY = process.env.INFOBIP_API_KEY;
const INFOBIP_BASE_URL = process.env.INFOBIP_BASE_URL;
const INFOBIP_SENDER_NUMBER = process.env.INFOBIP_SENDER_NUMBER; // Your registered Infobip sender

if (!INFOBIP_API_KEY || !INFOBIP_BASE_URL || !INFOBIP_SENDER_NUMBER) {
    console.error(""FATAL ERROR: Infobip API Key, Base URL, or Sender Number is missing in .env file."");
    process.exit(1); // Exit if essential config is missing
}

// --- Routes ---

app.get('/health', (req, res) => {
    res.status(200).json({ status: 'UP' });
});

app.post('/send-mms', (req, res) => {
    upload(req, res, async (err) => {
        // Handle Multer errors (file size, type, etc.)
        if (err instanceof multer.MulterError) {
            console.error('Multer Error:', err);
            return res.status(400).json({ success: false, error: 'File upload error: ' + err.message });
        } else if (err) {
            console.error('File Filter Error:', err);
            return res.status(400).json({ success: false, error: err.message });
        }

        // Check if file and other fields exist
        if (!req.file) {
            return res.status(400).json({ success: false, error: 'No media file uploaded.' });
        }
        const { to, text } = req.body;
        if (!to || !text) {
            return res.status(400).json({ success: false, error: 'Recipient number (to) and text message are required.' });
        }

        // Validate phone number
        const phoneNumber = parsePhoneNumberFromString(to); // Assumes E.164 if no default country specified
        if (!phoneNumber || !phoneNumber.isValid()) {
             console.warn(`Invalid phone number received: ${to}`);
             return res.status(400).json({ success: false, error: 'Invalid recipient phone number format. Please use international E.164 format (e.g., +447123456789).' });
        }
        const formattedNumber = phoneNumber.number; // Use the validated E.164 number

        // --- Prepare Infobip API Request ---
        // MMS Binary endpoint (Verify against current Infobip documentation: https://www.infobip.com/docs/api)
        const mmsEndpoint = `${INFOBIP_BASE_URL}/mms/1/binary`;
        // **Crucially, always verify this endpoint and the required payload structure
        // against the current official Infobip API documentation before deployment.**

        // Construct the multipart/form-data payload using 'form-data' library
        const formData = new FormData();

        // Append the JSON part (Infobip typically expects this as 'head') - CHECK DOCS
        const head = {
            from: INFOBIP_SENDER_NUMBER,
            to: formattedNumber, // Use validated number
            subject: 'MMS from App', // Optional subject
            // Add text here if required by the binary endpoint structure, or it might be separate
            // text: text, // Check Infobip docs if text goes in 'head' or as a separate part
        };
        formData.append('head', JSON.stringify(head), { contentType: 'application/json' });

        // Append the text part if needed as a separate field (CHECK DOCS)
        // formData.append('text', text);

        // Append the binary file part (Infobip typically expects this as 'media') - CHECK DOCS
        formData.append('media', req.file.buffer, {
            filename: req.file.originalname,
            contentType: req.file.mimetype,
        });


        // --- Make API Call to Infobip ---
        try {
            console.log(`Attempting to send MMS via Infobip to: ${formattedNumber}`);
            const response = await axios.post(mmsEndpoint, formData, {
                headers: {
                    'Authorization': `App ${INFOBIP_API_KEY}`,
                    ...formData.getHeaders() // IMPORTANT: Let form-data set the Content-Type and boundary
                },
                timeout: 30000, // 30 seconds timeout
            });

            console.log('Infobip API Response Status:', response.status);
            console.log('Infobip API Response Data:', response.data);
            res.status(response.status).json({ success: true, data: response.data });

        } catch (error) {
            const timestamp = new Date().toISOString();
            let errorMsg = 'Infobip API Error';
            let errorDetails = error.message;
            let infobipResponse = null;
            let infobipStatus = 500; // Default to internal server error

            if (error.response) {
                // Error response received from Infobip
                errorMsg = 'Error response from Infobip API';
                errorDetails = error.response.data;
                infobipStatus = error.response.status;
                infobipResponse = error.response.data;
                 console.error(`[${timestamp}] ${errorMsg} - Status: ${infobipStatus}`, errorDetails);
            } else if (error.request) {
                // Request made but no response received (timeout, network issue)
                errorMsg = 'No response received from Infobip API';
                 console.error(`[${timestamp}] ${errorMsg}`, error.request);
                 infobipStatus = 504; // Gateway Timeout might be appropriate
            } else {
                // Error setting up the request
                 console.error(`[${timestamp}] ${errorMsg} - Setup Error:`, error.message);
            }

             // Log structured error
            const errorLog = {
                timestamp: timestamp,
                message: errorMsg,
                errorDetails: errorDetails,
                infobipStatus: infobipStatus,
                requestData: { to: formattedNumber } // Log non-sensitive parts
            };
             console.error(""Detailed Error Log:"", JSON.stringify(errorLog));

            res.status(infobipStatus).json({ success: false, error: infobipResponse || { message: errorMsg } });
        }
    });
});

// --- Start Server ---
// Only start listening if the script is run directly (not required by a test runner)
if (require.main === module) {
    app.listen(port, () => {
        console.log(`Server listening at http://localhost:${port}`);
        console.log(`Accepting requests from: ${process.env.CLIENT_URL}`);
    });
}

// Export the app instance for testing purposes
module.exports = app;

// client/src/App.jsx
import React, { useState } from 'react';
import axios from 'axios';
import './App.css'; // We'll create this for basic styling

function App() {
  const [to, setTo] = useState('');
  const [text, setText] = useState('');
  const [mediaFile, setMediaFile] = useState(null);
  const [statusMessage, setStatusMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  // Get backend URL from environment variable, with fallback for local dev
  const backendUrl = import.meta.env.VITE_BACKEND_API_URL || 'http://localhost:5001';
  const sendMmsEndpoint = `${backendUrl}/send-mms`;

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    // Optional: Add basic client-side size check
    const maxSize = 10 * 1024 * 1024; // 10MB (match backend or slightly lower)
    if (file && file.size > maxSize) {
        setStatusMessage(`Error: File size exceeds ${maxSize / 1024 / 1024}MB limit.`);
        setIsError(true);
        setMediaFile(null);
        event.target.value = null; // Clear the input
        return;
    }
    setMediaFile(file);
    setStatusMessage(''); // Clear status on new file selection
    setIsError(false);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!to || !text || !mediaFile) {
      setStatusMessage('Please fill in all fields and select a valid media file.');
      setIsError(true);
      return;
    }

    // Basic client-side check for E.164 format (improves UX, but backend validation is key)
    // This regex is basic, libphonenumber-js on backend is more robust.
    if (!/^\+?[1-9]\d{1,14}$/.test(to)) {
        setStatusMessage('Please enter the recipient number in E.164 format (e.g., +447123456789).');
        setIsError(true);
        return;
    }


    setIsLoading(true);
    setStatusMessage('Sending MMS...');
    setIsError(false);

    // Use FormData to send multipart data
    const formData = new FormData();
    formData.append('to', to);
    formData.append('text', text);
    formData.append('mediaFile', mediaFile); // Key must match Multer config on backend

    try {
      const response = await axios.post(sendMmsEndpoint, formData, {
        headers: {
          // 'Content-Type': 'multipart/form-data' // Axios usually sets this automatically for FormData
        },
        timeout: 45000, // 45 seconds (allow for backend processing + Infobip call)
      });

      console.log('Backend Response:', response.data);
      // Extract a meaningful status from the Infobip response if possible
      const infobipStatus = response.data?.data?.messages?.[0]?.status?.name || 'SUBMITTED';
      setStatusMessage(`Successfully sent MMS! Infobip status: ${infobipStatus}`);
      setIsError(false);
      // Optionally clear the form
      // setTo('');
      // setText('');
      // setMediaFile(null);
      // event.target.reset(); // Reset file input if needed

    } catch (error) {
      console.error('Error sending MMS:', error);
      let errorMessage = 'Failed to send MMS.';
      if (error.response) {
        // Error from backend API
        const backendError = error.response.data?.error;
        errorMessage += ` Server Error (${error.response.status}): ${backendError?.message || JSON.stringify(backendError || error.response.data)}`;
      } else if (error.request) {
        // Request made but no response received (network issue, backend down?)
        errorMessage += ' No response received from the server. Is it running or unreachable?';
      } else {
        // Error setting up the request
        errorMessage += ` Request Setup Error: ${error.message}`;
      }
      setStatusMessage(errorMessage);
      setIsError(true);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="app-container">
      <h1>Send Infobip MMS</h1>
      <form onSubmit={handleSubmit} className="mms-form">
        <div className="form-group">
          <label htmlFor="to">Recipient Phone:</label>
          <input
            type="tel"
            id="to"
            value={to}
            onChange={(e) => setTo(e.target.value)}
            placeholder="e.g., +447123456789 (E.164 format)"
            required
            disabled={isLoading}
          />
        </div>
        <div className="form-group">
          <label htmlFor="text">Message Text:</label>
          <textarea
            id="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            rows="3"
            required
            disabled={isLoading}
          ></textarea>
        </div>
        <div className="form-group">
          <label htmlFor="mediaFile">Media File (Image):</label>
          <input
            type="file"
            id="mediaFile"
            accept="image/jpeg, image/png, image/gif" // Match backend filter
            onChange={handleFileChange}
            required // File input required attribute might behave differently across browsers
            disabled={isLoading}
          />
           {mediaFile && <p className="file-info">Selected: {mediaFile.name} ({(mediaFile.size / 1024 / 1024).toFixed(2)} MB)</p>}
        </div>
        <button type="submit" disabled={isLoading || !mediaFile}>
          {isLoading ? 'Sending...' : 'Send MMS'}
        </button>
      </form>
      {statusMessage && (
        <div className={`status-message ${isError ? 'error' : 'success'}`}>
          {statusMessage}
        </div>
      )}
      <p className="api-url-note">Sending requests to: <code>{sendMmsEndpoint}</code></p>
    </div>
  );
}

export default App;

/* client/src/App.css */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f7f6;
  color: #333;
}

.app-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #007bff; /* Infobip-like blue */
  margin-bottom: 30px;
}

.mms-form .form-group {
  margin-bottom: 20px;
}

.mms-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
}

.mms-form input[type="tel"],
.mms-form textarea,
.mms-form input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Include padding in width */
  font-size: 1rem;
}

.mms-form textarea {
  resize: vertical; /* Allow vertical resize */
  min-height: 60px;
}

.mms-form input[type="file"] {
  padding: 5px; /* Slightly less padding for file input */
}

.file-info {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.mms-form button {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mms-form button:hover:not(:disabled) {
  background-color: #0056b3;
}

.mms-form button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.status-message {
  margin-top: 25px;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  word-wrap: break-word; /* Prevent long error messages from overflowing */
}

.status-message.success {
  background-color: #e6ffed;
  color: #28a745;
  border: 1px solid #b8e6c3;
}

.status-message.error {
  background-color: #f8d7da;
  color: #dc3545;
  border: 1px solid #f5c6cb;
}

.api-url-note {
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
    text-align: center;
}
.api-url-note code {
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 3px;
}

// client/src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // Keep default index.css if needed
import './App.css'   // Import your App specific styles

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

# server/.env

# Infobip Credentials
INFOBIP_API_KEY=PASTE_YOUR_API_KEY_HERE
INFOBIP_BASE_URL=PASTE_YOUR_BASE_URL_HERE # e.g., abcde.api.infobip.com
INFOBIP_SENDER_NUMBER=PASTE_YOUR_INFOBIP_SENDER_NUMBER_HERE # e.g., +447123456789

# Server Configuration (already defined)
# PORT=5001
# CLIENT_URL=http://localhost:5173