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.

Below the example of your Cloudinary NoCodeAPI Endpoint that we will use on the front-end side.

Cloudinary Endpoint

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.