Cloudinary_from_front.jsx

//make a state for the image file
 const [image, setImage] = useState(null);
// Make a input of type file
  <label>
          Project Image:
          <input
            type="file"
            name="image"
            onChange={(e) => setImage(e.target.files[0])}
          />
  </label>
//make a function to create a FormData that appends three things
//1. The image state with the key of 'file'
//2. The 'upload_preset' with the value of the name of the preset on your cloudinary dashboard
//3. The 'cloud_name' with the value of the cloud name on your cloudinary dashboard

//Then make a post request to the cloudinary base URL and change the name of the cloud to your name
//Cloudinary Base URL: "https://api.cloudinary.com/v1_1/{Your cloud name}/image/upload"
// after you make a post request with the body as the form data that you appended all the info to, you should receive a response with the 
//secure URL that is the https that you then want to save in your DB
      //this is where we handle the image
      const data = new FormData();
      data.append("file", image);
      data.append("upload_preset", "Ironhack");
      data.append("cloud_name", "dxurcuyga");
      const response = await axios.post(
        "https://api.cloudinary.com/v1_1/dxurcuyga/image/upload",
        data
      );
      console.log("res: ", response.data);
      //*************with fetch************
      // const cloudinaryResponse = await fetch(
      //   "https://api.cloudinary.com/v1_1/dxurcuyga/image/upload",
      //   {
      //     method: "POST",
      //     body: data,
      //   }
      // );
      // const data2 = await cloudinaryResponse.json();

//*************Youtube video that goes step by step*********
//https://www.youtube.com/watch?v=maXqEICuPIE