// import './App.css';
// import { useEffect, useState } from 'react';
// import { Image } from 'cloudinary-react';

// function App() {

//   const [image, setImage] = useState('')
//   const [url, setUrl] = useState('')
//   let respData = null


//   useEffect(()=>{
 
//     image && setUrl(URL.createObjectURL(image))
 
//   },[image])


//   const uploadImage = (event) => {
    
//     event.preventDefault()

//     const imageObj = new FormData()
//     imageObj.append("file", image)
//     imageObj.append("upload_preset", "photoapp" )

//     return fetch("https://api.cloudinary.com/v1_1/photojam-nss/image/upload", 
//     {
//       method: "POST",
//       body: imageObj 
//     })
//     .then((res) => res.json())
//     .then((data) => {
//       console.log(data);
//       respData = data
//       })
//     .catch((err) => {console.log(err)})
//   }


//   /*
//     now that we have the photo uploaded to our api host, we can take what we need from it's response:
//       the public id
//       and maybe its object id?
      
//       take those data assets and post, it to my OWN json server, as an image obj! 
//   */



//   return (
//     `<div className="App">
//         <h1>Let's try this...</h1>
//         <div>
//           <input type='File' onChange={(event) => {
//               setImage(event.target.files[0]) 
//             }} 
//           />
//         </div>

//         {
//           url ? (
//             <div>
//               <img src={url} alt='Your Image Preview'></img>
//             </div>
//            ) 
//             : <></>
//         }
        
//         <button onClick={(event) => {uploadImage(event)}}> Upload </button>

        
//         <h2>Gallery Sample</h2>
//         <div>
//         <Image cloudName="photojam-nss" publicId="qvkblrd4tvuajdiu0yl6"/>
//         </div>



//     </div>`
//   );
// }

// export default App;