Wiring up Our Project

This guide shows how to connect a local Flask backend (Image Optimizer) to a React frontend: configuring CORS, returning binary image data from Flask, and displaying both original and optimized images (with file sizes and reduction percentage) in React. It assumes both apps run locally during development. Keywords: Flask, React, CORS, image optimization, binary response, send_file, FormData, URL.createObjectURL Prerequisites

Flask Image Optimizer runs locally (e.g., http://127.0.0.1:5000).
React app runs locally (e.g., http://localhost:5173).

1) Run the Flask app

Activate your Python virtual environment and start Flask:

# macOS / Linux example
source venv/bin/activate
flask run
# or if your project uses a run script:
# python -m flask run

By default, the Flask development server starts on http://127.0.0.1:5000. When the React dev server uses a different origin (for example http://localhost:5173), the browser will block cross-origin fetch requests unless the backend allows that origin. Install Flask-CORS in your virtual environment:

# inside the activated virtual environment
pip install flask-cors

Add CORS configuration to your Flask application factory (__init__.py or wherever you create the app). The following example allows requests only from your dev frontend origin and restricts methods and headers used by the client:

# __init__.py
from flask import Flask
from flask_cors import CORS

def create_app():
    app = Flask(__name__)
    CORS(app, resources={
        r"/*": {
            "origins": ["http://localhost:5173"],
            "methods": ["GET", "POST", "OPTIONS"],
            "allow_headers": ["Content-Type"]
        }
    })

    app.config['DEBUG'] = True

    from . import routes
    app.register_blueprint(routes.bp)

    return app

Allowing only specific origins is safer than CORS(app) which opens all origins. In production, set the allowed origin(s) via environment variables so you can update them without changing code.

Restart Flask after changing the configuration.

3) Verify the endpoint path

Confirm your React client posts to the exact route your Flask app expects. If your Flask route is /upload, make sure the client sends the request to http://127.0.0.1:5000/upload. Posting to the wrong path (e.g., /) results in a 404. Quick manual test using curl or Postman:

POST http://127.0.0.1:5000/upload
Body (form-data)
Key       Value
image     File    coolgirl.jpeg
quality   Text    1

Response
200 OK

4) React: POST image and handle binary (Blob) response

Below is an example App.jsx demonstrating best practices:

Build FormData with the selected file and other form values (e.g., quality).
Send the FormData using fetch to the Flask /upload endpoint.
Parse the response as a Blob because Flask returns raw image bytes.
Use URL.createObjectURL(blob) to display the optimized image in the browser.
Track and display original and optimized file sizes, and revoke object URLs to prevent memory leaks.

Replace or adapt your existing App.jsx with this pattern.

// App.jsx
import { useState, useEffect } from 'react';
import './App.css';

function formatFileSize(bytes) {
  if (!bytes && bytes !== 0) return '';
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  if (bytes === 0) return '0 Bytes';
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + ' ' + sizes[i];
}

function App() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [selectedImageUrl, setSelectedImageUrl] = useState(null);
  const [selectedImageSize, setSelectedImageSize] = useState(0);

  const [quality, setQuality] = useState(80);

  const [optimizedImageUrl, setOptimizedImageUrl] = useState(null);
  const [optimizedImageSize, setOptimizedImageSize] = useState(0);

  useEffect(() => {
    // cleanup object URLs when component unmounts or url changes
    return () => {
      if (selectedImageUrl) {
        URL.revokeObjectURL(selectedImageUrl);
      }
      if (optimizedImageUrl) {
        URL.revokeObjectURL(optimizedImageUrl);
      }
    };
  }, [selectedImageUrl, optimizedImageUrl]);

  const handleImageSelect = (e) => {
    const file = e.target.files && e.target.files[0];
    if (file) {
      setSelectedImage(file);
      setSelectedImageSize(file.size);
      const url = URL.createObjectURL(file);
      setSelectedImageUrl(url);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!selectedImage) {
      alert('Please select an image first');
      return;
    }

    const formData = new FormData();
    formData.append('image', selectedImage);
    formData.append('quality', quality);

    try {
      const response = await fetch('http://127.0.0.1:5000/upload', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        throw new Error('Upload failed');
      }

      // The backend returns binary image data; parse as Blob
      const blob = await response.blob();
      const imageUrl = URL.createObjectURL(blob);

      // Update optimized image and its size
      setOptimizedImageUrl(imageUrl);
      setOptimizedImageSize(blob.size);
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  return (
    <div className="container">
      <header className="header">
        <h1>Image Optimizer</h1>
      </header>

      <main className="main-content">
        <form onSubmit={handleSubmit} className="upload-form">
          <div className="upload-section">
            <label htmlFor="image-upload">Upload Image</label>
            <input
              id="image-upload"
              type="file"
              accept="image/*"
              onChange={handleImageSelect}
            />
          </div>

          <div className="controls">
            <label htmlFor="quality">Quality ({quality}%)</label>
            <input
              id="quality"
              type="range"
              min="1"
              max="100"
              value={quality}
              onChange={(e) => setQuality(parseInt(e.target.value, 10))}
            />
          </div>

          <button type="submit">Optimize Image</button>
        </form>

        <section className="comparison">
          <div className="original">
            <h3>Original</h3>
            {selectedImageUrl && (
              <>
                <img src={selectedImageUrl} alt="original" />
                <p>Size: {formatFileSize(selectedImageSize)}</p>
              </>
            )}
          </div>

          <div className="optimized">
            <h3>Optimized</h3>
            {optimizedImageUrl && (
              <>
                <img src={optimizedImageUrl} alt="optimized" />
                <p>Size: {formatFileSize(optimizedImageSize)}</p>
                {selectedImageSize > 0 && optimizedImageSize > 0 && (
                  <p>
                    Reduction:{' '}
                    {Math.round(((selectedImageSize - optimizedImageSize) / selectedImageSize) * 100)}%
                  </p>
                )}
              </>
            )}
          </div>
        </section>
      </main>
    </div>
  );
}

export default App;

Notes on the React client

Use response.blob() because the Flask backend returns binary image bytes. Parsing as JSON will cause a SyntaxError.
Display the returned image by creating an object URL with URL.createObjectURL(blob).
Use file.size for the original file and blob.size for the optimized result.
Revoke object URLs in useEffect cleanup to avoid memory leaks.

5) Backend: return binary image bytes (not JSON)

Ensure the Flask endpoint accepts multipart/form-data, processes the image (for example, using Pillow), and returns raw image bytes with the correct Content-Type header (e.g., image/jpeg or image/png). If you intend the client to use the response as an image, return the binary stream — do not wrap the image bytes in JSON. Example minimal route (conceptual):

# routes.py (conceptual)
from flask import Blueprint, request, send_file
from io import BytesIO
from PIL import Image

bp = Blueprint('routes', __name__)

@bp.route('/upload', methods=['POST'])
def upload():
    file = request.files.get('image')
    quality = int(request.form.get('quality', 80))
    img = Image.open(file.stream)

    # example: convert to JPEG and adjust quality
    buf = BytesIO()
    img.save(buf, format='JPEG', quality=quality)
    buf.seek(0)

    # Use send_file to return binary image with correct mimetype
    return send_file(buf, mimetype='image/jpeg')

Tips

Set the correct mimetype to match the returned bytes.
If you need to support multiple output formats, choose the format dynamically and set mimetype accordingly.
When debugging, verify the response headers and payload with Postman or curl to confirm raw bytes are returned.

6) Avoid hard-coding the API URL

Do not embed the API base URL in application code for production. Use environment variables or a configuration approach.

Store the backend API URL in an environment variable (e.g., VITE_API_URL with Vite) and reference it in the frontend. This simplifies switching between development, staging, and production.

Example using Vite:

Create .env (not committed) with VITE_API_URL=http://127.0.0.1:5000.
Use it in React: const api = import.meta.env.VITE_API_URL || 'http://127.0.0.1:5000';

Quick troubleshooting table

Symptom	Likely cause	How to check / fix
CORS error in browser console	Backend did not allow the frontend origin	Verify `flask-cors` config; ensure the origin shown in the console is in `origins` list
404 when posting	Wrong route path	Confirm React fetch URL matches Flask route (e.g., `/upload`)
UI shows blank optimized image	Backend returned non-image content (JSON or error HTML)	Inspect network response headers and body in DevTools or Postman; ensure `Content-Type` is `image/*` and body is binary
”Upload failed” or response not OK	Server error	Check Flask logs for exceptions; test with curl/Postman

Final checklist before deployment

Start and test the Flask server (flask run) and verify /upload with Postman or curl.
Start React dev server (npm run dev) and test the UI upload flow.
Replace all local URLs with environment-managed values for production.
Lock down CORS to only the production frontend origin(s).
Keep documentation up-to-date with any structural or endpoint changes.

Useful links and references

A screenshot of a GitHub repository page titled "Super-Image-Optimizer" in dark mode. It shows the repo file list and README section on the left with project details (license, languages, releases) in the right-hand sidebar.

Course Introduction

Introduction to AI-Assisted Development

Planning Phase

Development Phase - Backend

Development Phase - Frontend

Project Completion

Wiring up Our Project

1) Run the Flask app

3) Verify the endpoint path

4) React: POST image and handle binary (Blob) response

5) Backend: return binary image bytes (not JSON)

6) Avoid hard-coding the API URL

Quick troubleshooting table

Final checklist before deployment

Watch Video

​1) Run the Flask app

​2) Handle CORS (Cross-Origin Resource Sharing)

​3) Verify the endpoint path

​4) React: POST image and handle binary (Blob) response

​5) Backend: return binary image bytes (not JSON)

​6) Avoid hard-coding the API URL

​Quick troubleshooting table

​Final checklist before deployment

Watch Video

1) Run the Flask app

2) Handle CORS (Cross-Origin Resource Sharing)

3) Verify the endpoint path

4) React: POST image and handle binary (Blob) response

5) Backend: return binary image bytes (not JSON)

6) Avoid hard-coding the API URL

Quick troubleshooting table

Final checklist before deployment