0

I was successful in storing images in mongodb using the base64 url. But when I tried to do so with PDFs, it gave an url which does not work. Wait, let me explain, when I put the image base64 url in the req.body of the POST request, the special signs would get disappeared, so I tried encodeURIComponent() method to make it error free. After that I found that storing the huge string in mongodb was too short to fit in the db, so I tried: app.use(express.json({limit: '50mb'})); app.use(express.urlencoded({limit: '50mb', extended: false })); and It worked! but when the client requests the base64 url, it would come encoded, so I put decodeURIComponent() to decode it and was not a great issue nd I got the desired result, yet with the Image one.

The main issue issue is when it comes to PDF. I don't know why it's happening with PDF only! when I make base64 url in CLIENT side and test it, it works fine, but when it comes to server side, all the mess happens. please help me deal with this.

Note: "I don't want to use Gridfs, formidabe, multer etc for file things"

here's my piece of code:

  $('#seasonForm').submit(async function (e) {
                e.preventDefault();
                const form = $(this);

                const ImgFile = document.getElementById('seasonThumbnail').files[0];
                const PDFFile = document.getElementById('seasonPDF').files[0];

                const imgurl = encodeURIComponent(await getBase64(ImgFile));
                const PDFurl = encodeURIComponent(await getBase64(PDFFile));
                const url = '/uploadSeason';

                $.ajax({
                    type: "POST",
                    url: url,
                    data: form.serialize()+`&Version=<%- NxtSeasons %>&image=${imgurl}&PDF=${PDFurl}`,
                    success: data => {
                        console.log(data.message);
                        if (data.status == "error") {
                            showIt(".alert", data.message, "error");



                        } else {
                            showIt(".alert", data.message, "success");
                        }
                    }
                });
            })

wait, now don't get confused with getBase64() and showIt. these are my functions. getBase64() is a promice which returns base64 url of the file and showIt() is type of alert which I made. Now if you don't know what is base64 url, this is the getBase64 one's code:

 const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

My nodejs code:

app.post("/uploadSeason", admin, async (req, res) => {
    try {
        const { Name, Desctiption, Version, image, PDF } = req.body;
        const newSeason = new Season({
            Name,
            Desctiption,
            Version,
            image: encodeURIComponent(image),
            PDF: encodeURIComponent(PDF),
        });
        

        await newSeason.save();
        res.json({
            status: "success",
            message: "Season added successfully"
        });

    } catch (e) {
        console.log(e);
        res.json({
            status: "error",
            message: e
        });
    }
});

0 Answers0