If you are building a user profile page into your project and giving option users to upload or edit profile picture then you have to make an image uploader API to connect with S3 or any image hosting website.
So, to make it simple you can build NoCodeAPI of Cloudinary API by giving your cloud_name, api_key & api_secret and your API is ready to use on front-end.
Let’s make cloudinary endpoints without code.
- First make your NoCodeAPI here is documentation
Below the example of your Cloudinary NoCodeAPI Endpoint that we will use on the front-end side.
-
HTML Code
Here is html code snippet to choose file as input.
<input accept="image/*" id="imageInput" type="file" name="imageInput" />JavaScript code when input field will change.
const imageUpload = document.getElementById("imageInput")
imageUpload.onchange = function () {
const inputFile = this.files[0]
const formData = new FormData()
formData.append("file", inputFile)
fetch(`<your_coudinary_nocodeapi>`, {
method: "POST",
body: formData,
})
.then((images) => {
console.log(images.url) // here you can save image url into your database
})
.catch((err) => {
console.log(err)
})
}Yes, that’s all you have to do for image solution.
If you are using React into your project then code will less.
function App() {
const handleUploadImages = (e) => {
const formData = new FormData()
formData.append("file", e.target.files[0])
fetch(`<your_coudinary_nocodeapi>`, {
method: "POST",
body: formData,
})
.then((images) => {
console.log(images)
})
.catch((err) => {
console.log(err)
})
}
return (
<div className="App">
<input
accept="image/*"
id="imageInput"
type="file"
name="imageInput"
onChange={handleUploadImages}
/>
</div>
)
}Yes, That’s all. If you have any other use cases then let us know about that. So, we can make an blog post about that.
If you are looking for Image Editing online for Free, try Adobe Editor
