NoMongo: Replace Base64 Storage with MinIO Client in AdvertisementRegister.tsx

[NishantSinghhhhh]

Problem
The Talawa Admin currently uses Base64 encoding for images, leading to increased payload size, performance issues, and inefficient storage.

Solution
Replace Base64-based image handling with MinIO client integration. Images should be uploaded to MinIO, and only the file URL should be stored in the database.

Alternatives Considered

• Storing images in a local filesystem (scalability issues).
• Using AWS S3 (MinIO offers a self-hosted alternative).

Approach

1. Identify and replace Base64 encoding with MinIO uploads.
2. Store only MinIO file URLs instead of Base64 strings.
3. Implement proper error handling and security measures.

Additional Context
This will optimize image storage, improve performance, and reduce bandwidth usage.

---

NOTE

1. We recently discovered a flaw in the code base where there are some XSS and CORS vulnerabilities. This occurs when the API and Admin servers run on different machines.

2. You will notice this if you configure your Admin app on your local machine to use the API running on https://test.talawa.io/graphql.

3. The errors in your browser will look like this:

   

4. As part of this issue you will need to ensure that the browser only interacts with the API through the Admin server and never with the API direclty.

[github-actions]

Congratulations on making your first Issue! 🎊 If you haven't already, check out our Contributing Guidelines and Issue Reporting Guidelines to ensure that you are following our guidelines for contributing and making issues.

[udayempire]

This gets fixed in #3557

[Cioppolo14]

@udayempire Should I assign this to you?

[udayempire]

As I already mentioned the solution in my pr #3742

I will explain the workflow here to know if this was the correct way to this issue.

In Frontend
Earlier the attachments type was string because of base64 encoding.
I changed it to a File[] which is a js file api.File[] is an array of File objects, where each File is an object containing details like name, size, type, lastModified, etc.

Then in AdvertisementRegister.tsx I took the files in an attachment array and sent to backend with the formData

In Backend-
In backend zod validates the FormData and makes the files available as an array in FileUpload object.
A metadata is created for each file in our database with name,mimetype,creatorId,advertisementId.
We have an attachments array that holds all the FileUpload objects.
Then the server iterates over this array uses createReadStream method so that data is read in small chunks and then this stream is passed to MinIO client’s putObject method to upload the file to our storage bucket.

I have already implemented this in the PR and its fully working.

I want to confirm is this what is to be done in this issue or all the Replace base64 issues recently created?

[palisadoes]

Please refer to other parts of the code base that use MINIO as a reference

[palisadoes]

PTAL at the XSS and CORS vulnerabilities mentioned above that you will need to address as part of this.