I was wondering why I can't fetch the image from cloudinary, I want to post an image as an background,apparently I'm not fetching the image correctly.
function Post({post}){
return(
<div className='PostBlock'
style={{backgroundImage: `url(${post.getImage})`}}>
<div>
{console.log(post.getImage)}
<h3>genere:{post.getGenere}</h3>
</div>
<div>
<h3>Title: {post.getTitle}</h3>
</div>
<div>
<p>{post.getBody}</p>
</div>
</div>
)
}
export default Post
my PostForm which is a modal,this is where I succesfully upload my images after I click "save post", although the problem relies on fetching and showing the image url, which apparently I'm not doing so correctly, scroll down to the "Post" component code snippet
import { useState } from "react"
import Axios from "axios"
function PostFormModal({onAdd}){
let [getGenere,setGenere]=useState('Travel')
const [getTitle,setTitle]=useState('')
const [getBody,setBody]=useState('')
let [getImage,setImage]=useState('')
const uploadImage = () => {
const formData = new FormData()
formData.append("file",getImage)
formData.append("upload_preset","ddyy5zbx")
Axios.post("https://api.cloudinary.com/v1_1/dk5lv4qj5/image/upload",formData)
.then((res)=>console.log(res))
.catch((e)=>console.log(e))
}
//const genere = ['Travel','LifeStyle','Business','Food','Work']
const onSubmit=(e)=>{
e.preventDefault()
onAdd({getGenere,getTitle,getBody,getImage})
}
return(
<div className='formStyle' >
<form onSubmit={onSubmit} >
<div className="formStyleInner">
<label>Choose a genere: </label>
<select value={getGenere} onChange={e=>setGenere(e.target.value)}>
<option value='Travel'>Travel</option>
<option value='Lifestyle'>LifeStyle</option>
<option value='Business'>Business</option>
<option value='Food'>Food</option>
<option value='Work'>Work</option>
</ select>
</div>
<div className="formStyleInner">
<label>Title:</label>
<input type="text"
value={getTitle}
placeholder='add a title!'
onChange={(e)=>setTitle(e.target.value)}>
</input>
</div>
<div className="formStyleInner">
<label>Background Image:</label>
<input type="file"
onChange={(e)=>setImage(e.target.files[0])}>
</input>
</div>
<div className="formStyleInner">
<textarea type='textarea'
rows='10'
cols="35"
value={getBody}
placeholder='add text!'
onChange={(e)=>setBody(e.target.value)}>
</textarea>
</div>
<input type="submit" value="Save post" onClick={uploadImage}/>
</form>
</div>
)
}
export default PostFormModal
here's my App()
import { useState } from "react";
import PostList from "./component/PostList";
import PostModalBtn from "./component/postModalBtn";
import PostFormModal from "./component/PostFormModal";
import FilterButton from "./component/FilterButton";
//Filter MAP
const FilterMap = {
All:() => true,
Travel: genSel => genSel.Travel,
LifeStyle:genSel=> genSel.LifeStyle,
Business:genSel=> genSel.Business,
Food:genSel=> genSel.Food,
Work:genSel=>genSel.Work
}
const FilterNames=Object.keys(FilterMap)
function App({onAdd}) {
const [isModalDisplayed,setIsModalDisplayed]=useState(false)
const[filter, setFilter]= useState('All')
const[posts,setPosts]=useState(
[
{
id:1,
getTitle:'Titulo Generico',
getGenere:'Travel',
getBody:'Prueba de body'
},
]
)
//FilterList
const filterList = FilterNames.map(name=>(
<FilterButton
key={name}
name={name}
isPressed={name === filter}
setFilter={setFilter}/>
))
//addPost action
const addPost = (post)=>{
const id= Math.floor(Math.random()*1000)+1
const getPost = {id,...post}
setPosts([...posts,getPost])
}
return (
<>
<div className='headerTitle'>
<h5>Making your life easier</h5>
</div>
<div className='titleCont'>
<h1>Discovering the world</h1>
</div>
<div className='FilterBtnStyle'>
{filterList}
</div>
<div className='buttonCont'>
<PostModalBtn onClick={onAdd}/>
</div>
<PostFormModal onAdd={addPost}/>
<PostList posts={posts}/>
</>
);
}
export default App;
"Post" Component, this is where the background image is supposed to be brought dynamically, apparently I'm not calling it correctly because It's not fetching the right path...
function Post({post}){
return(
<div className='PostBlock'
style={{backgroundImage: `url(${post.getImage})`}}>
<div>
{console.log(post.getImage)}
<h3>genere:{post.getGenere}</h3>
</div>
<div>
<h3>Title: {post.getTitle}</h3>
</div>
<div>
<p>{post.getBody}</p>
</div>
</div>
)
}
export default Post
Inspecting the upload from the console, we can see that the object uploaded to cloudinary indeed has an url for us to use
What I'm actually fetching is an object appended to "getImage" and not an "url"
From what I've been reading, I cannot bring up images from cloudinary unless I use the IMAGE tag from cloudinary-react and cloudinary-core libraries, but I have NO clue how to implement that into an background-image
