adrianhajdin / project_ai_mern_image_generation

Build and Deploy a Full Stack MERN AI Image Generation App MidJourney & DALL E Clone
https://jsmastery.pro
1.08k stars 302 forks source link

Solution Provided for : issue #2 File Saver npm Package not working after hosting #74

Open ItsAnkitPatel opened 5 months ago

ItsAnkitPatel commented 5 months ago

Inside utils/index.js update the downloadImage function

export async function downloadImage(_id, photo) {
  const securePhotoUrl = photo.replace('http://', 'https://');
  const imageBlob = await fetch(securePhotoUrl)
    .then((response) => response.arrayBuffer())
    .then((buffer) => new Blob([buffer], { type: "image/jpg" }));
  const url = URL.createObjectURL(imageBlob)
  FileSaver.saveAs(url, `download-${_id}.jpg`);
}

This worked for me.

The error message I was facing is due to the "Mixed Content" policy enforced by modern browsers. This policy disallows loading insecure (HTTP) content from a secure (HTTPS) site.

Your site is served over HTTPS, but it's trying to load an image from an HTTP URL. This is what's causing the error.

To fix this, you need to ensure that all resources are loaded over HTTPS.