feat: Avoid uploading images to S3 in the listing process

[NwinNwin]

Description

• Right now, when user upload a image in the listing process, image will automatically upload to S3 bucket.
• This is inefficient, and open for spam attack.
• Complete this task will help us save the cost of saving data significantly for ZotNFound!

Goal

• Only upload the image to S3 once the user done placing the pin on the map (or finish the listing process)

To do

• Remove the functionality in the step 4 to upload image directly to S3.
• Instead, save the image in memory using something like FileReader to generate data URL
  • Doing this, we will avoid uploading image to server

Something I cooked up in GPT, idk if this will work lol:

import React, { useState } from "react";

const ImageUploadPreview = () => {
  const [imagePreview, setImagePreview] = useState(null);

  const handleImageUpload = (event) => {
    const file = event.target.files[0]; // Get the uploaded file
    if (file) {
      const reader = new FileReader();

      // Read the file and set the image preview once loaded
      reader.onload = () => {
        setImagePreview(reader.result);
      };
      reader.readAsDataURL(file); // Read the file as a data URL
    }
  };

  return (
    <div>
      <h2>Upload and Preview Image</h2>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      {imagePreview && (
        <div>
          <h3>Image Preview:</h3>
          <img
            src={imagePreview}
            alt="Uploaded Preview"
            style={{ width: "300px", height: "auto", marginTop: "10px" }}
          />
        </div>
      )}
    </div>
  );
};

export default ImageUploadPreview;