{"id":27993,"date":"2022-06-09T09:06:22","date_gmt":"2022-06-09T09:06:22","guid":{"rendered":"http:\/\/add-tags-to-images-before-upload-with-imagga"},"modified":"2025-03-23T11:38:21","modified_gmt":"2025-03-23T18:38:21","slug":"add-tags-to-images-before-upload-with-imagga","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/add-tags-to-images-before-upload-with-imagga\/","title":{"rendered":"Add Tags to Images before Upload with Imagga"},"content":{"rendered":"

Image tagging is the process of labeling images based on figures within that image – the labels are known as tags. This has the obvious benefit of providing some level of organization to an image library, as it is easier to find images with tags. Additionally, image tag metadata can be used for a variety of purposes ranging from web accessibility to SEO<\/a>. The release of image tagging<\/a> software makes it possible to automate the tagging process, thus enjoying all these benefits while saving valuable time.<\/p>\n

In this tutorial, we will use Imagga<\/a> to add tags to images that have been uploaded to our Cloudinary store. Additionally, we will render the images in a gallery, providing a list of tags that the user can click to filter the rendered images. Cloudinary provides an add-on<\/a> for Imagga\u2019s automatic image tagging capabilities, fully integrated into its image management and transformation pipeline, and that is what we will be using.<\/p>\n

For UI components in our application, we will use antd<\/a> while axios<\/a> will be used for uploading our images to our Cloudinary store. React router<\/a> will be used to transition between pages.<\/p>\n

Here is a link<\/a> to the demo CodeSandbox.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Project Setup<\/h2>\n

Create a new React app using the following command:<\/p>\n

npx create-react-app cloudinary-imagga\n<\/code><\/span><\/pre>\n
Next, add the project dependencies using the following command:<\/p>\n
npm<\/span> install<\/span> antd<\/span> @ant-design<\/span>\/icons axios react-router-dom cloudinary-react\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Next, we need to import the antd CSS. To do this, open src\/App.css<\/code> and edit its content to match the following:<\/p>\n
@import<\/span> \"~antd\/dist\/antd.css\"<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Setting up Cloudinary<\/h2>\n
To use Cloudinary\u2019s provisioned services, you need to sign up for a free Cloudinary account<\/a> if you don\u2019t have one already. Displayed on your account\u2019s Management Console (aka Dashboard) are important details: your cloud name, API key, etc.<\/p>\n
\"\"<\/p>\n
For this tutorial, we will be sending images to Cloudinary via unsigned POST requests. To do this, we need our account cloud name and an unsigned upload preset<\/a>. To create one, log into the Management Console<\/a> and select Settings<\/strong> > Upload<\/strong> and then scroll to the Upload presets<\/strong>\nsection. Create a new upload preset by clicking Add upload preset<\/strong> at the bottom of the upload preset list. In the displayed form, make sure the Signing Mode<\/strong> is set to Unsigned<\/strong> as shown below.<\/p>\n
\"\"<\/p>\n
In the Media Analysis and AI<\/strong> section, ensure that Imagga Auto Tagging<\/strong> is selected. With the selection of Imagga auto tagging, you also have the option to specify a confidence level threshold for generated tags.<\/p>\n
\"\"<\/p>\n
Click Save<\/strong> to complete the upload preset definition, then copy the upload preset name as displayed on the Upload<\/strong> Settings page.<\/p>\n
Next, let\u2019s create environment variables to hold the details of our Cloudinary account. Create a new file called .env<\/code> at the root of your project and add the following to it:<\/p>\n
REACT_APP_CLOUD_NAME = \"INSERT YOUR CLOUD NAME HERE\"<\/span>;\nREACT_APP_UPLOAD_PRESET = \"INSERT YOUR UNSIGNED UPLOAD PRESET KEY HERE\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will be used as a default when the project is set up on another system. To update your local environment, create a copy of the .env<\/code> file using the following command:<\/p>\n
cp<\/span>.env<\/span>.env<\/span>.local<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
By default, this local file resides in the .gitignore folder, mitigating the security risk of inadvertently exposing secret credentials to the public. You can update the .env.local<\/code> file with your Cloudinary credentials.<\/p>\n
To register, click on the Add-ons<\/strong> link in the header of the management console on your Cloudinary dashboard.<\/p>\n
\"\"<\/p>\n
You should see the Cloudinary Add-ons page with a list of all available add-ons. Select the Imagga Auto Tagging add-on<\/strong> and subscribe to the free plan, which allows 15 artworks monthly, or you can select your preferred plan.<\/p>\n
\"\"<\/p>\n
In the src<\/code> directory of the project, create a new folder named cloudinary<\/code>. This folder will hold all the Cloudinary related helper classes we will need in our components. In the cloudinary<\/code> folder, create a new file called cloudinaryConfig.js<\/code>. This file will give access to the environment variables and prevent repeated process.env.<\/code> calls throughout the project. Add the following to thecloudinaryConfig.js<\/code> file:<\/p>\n
export<\/span> const<\/span> cloudName = process.env.REACT_APP_CLOUD_NAME;\nexport<\/span> const<\/span> uploadPreset = process.env.REACT_APP_UPLOAD_PRESET;\nexport<\/span> const<\/span> defaultUploadTag = \"cloudinary_imagga\"<\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Create Helper Class for API Requests<\/h2>\n
Let\u2019s write a helper function that we will use to upload images to Cloudinary and another to delete an image from Cloudinary. In the cloudinary<\/code> folder, create a new file named cloudinaryHelper.js<\/code> and add the following to it:<\/p>\n
import<\/span> axios from<\/span> \"axios\"<\/span>;\nimport<\/span> { cloudName, defaultUploadTag, uploadPreset } from<\/span> \".\/cloudinaryConfig\"<\/span>;\n\nexport<\/span> const<\/span> uploadImage = ({ file, successCallback }<\/span>) =><\/span> {\n  const<\/span> url = `https:\/\/api.cloudinary.com\/v1_1\/${cloudName}<\/span>\/image\/upload`<\/span>;\n  const<\/span> data = new<\/span> FormData();\n  data.append(\"file\"<\/span>, file);\n  data.append(\"upload_preset\"<\/span>, uploadPreset);\n  data.append(\"tags\"<\/span>, defaultUploadTag);\n\n  axios\n    .post(url, data, {\n      headers<\/span>: {\n        \"Content-Type\"<\/span>: \"multipart\/form-data\"<\/span>,\n      },\n    })\n    .then((response<\/span>) =><\/span> successCallback(response.data));\n};\n\nexport<\/span> const<\/span> getImages = ({ successCallback, imageTag }<\/span>) =><\/span> {\n  axios\n    .get(\n      `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/image\/list\/${\n        imageTag || defaultUploadTag\n      }<\/span>.json`<\/span>\n    )\n    .then((response<\/span>) =><\/span> successCallback(response.data.resources));\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The uploadImage<\/code> function is used to upload an image to our Cloudinary store. In addition to the image file and the upload preset, we append a tag to the image. This will allow us to retrieve all the images without a backend API, as we will see later.<\/p>\n
NOTE<\/strong>: To ensure that this feature is available on your Cloudinary account, you must ensure that the Resource list option is enabled. By default, the list delivery type is restricted. To enable it, open the Security settings in your Management console and clear the Resource list<\/strong> item under Restricted image types<\/strong>. You may want to clear this option only temporarily, as needed. Alternatively, you can bypass this (and any) delivery type restriction using a signed URL.<\/p>\n
\"\"<\/p>\n
Adding Hooks<\/h2>\n
Next, let\u2019s add some hooks to provide the functionality for our image upload. Create a new folder called hooks<\/code> in the\u2019 src\u2019 directory. In the src\/hooks<\/code> folder, create a new file named useFilePreview.js<\/code> and add the following to it:<\/p>\n
import<\/span> { Modal } from<\/span> \"antd\"<\/span>;\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\n\nconst<\/span> useFilePreview = ()<\/span> =><\/span> {\n  const<\/span> [previewVisibility, setPreviewVisibility] = useState(false<\/span>);\n  const<\/span> [previewImage, setPreviewImage] = useState(null<\/span>);\n  const<\/span> [previewTitle, setPreviewTitle] = useState(\"\"<\/span>);\n\n  const<\/span> getBase64Representation = (file<\/span>) =><\/span>\n    new<\/span> Promise<\/span>((resolve, reject<\/span>) =><\/span> {\n      const<\/span> reader = new<\/span> FileReader();\n      reader.readAsDataURL(file);\n      reader.onload = ()<\/span> =><\/span> resolve(reader.result);\n      reader.onerror = (error<\/span>) =><\/span> reject(error);\n    });\n\n  const<\/span> handlePreview = async<\/span> (file) => {\n    if<\/span> (!file.url && !file.preview) {\n      file.preview = await<\/span> getBase64Representation(file.originFileObj);\n    }\n    setPreviewImage(file.url || file.preview);\n    setPreviewVisibility(true<\/span>);\n    setPreviewTitle(\n      file.name || file.url.substring(file.url.lastIndexOf(\"\/\"<\/span>) + 1<\/span>)\n    );\n  };\n\n  const<\/span> hidePreview = ()<\/span> =><\/span> {\n    setPreviewVisibility(false<\/span>);\n  };\n\n  const<\/span> previewContent = (\n    <Modal<\/span>\n      visible<\/span>={previewVisibility}<\/span>\n      title<\/span>={previewTitle}<\/span>\n      footer<\/span>={null}<\/span>\n      onCancel<\/span>={hidePreview}<\/span>\n    ><\/span>\n      <img<\/span> alt<\/span>={previewTitle}<\/span> style<\/span>={{<\/span> width:<\/span> \"100<\/span>%\" }} src<\/span>={previewImage}<\/span> \/><\/span>\n    <\/Modal<\/span>><\/span><\/span>\n  );\n\n  return<\/span> [handlePreview, previewContent];\n};\n\nexport<\/span> default<\/span> useFilePreview;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This hook provides the functionality to allow us to preview selected images before uploading by generating a base64 string representation of the file and rendering it in a modal when required.<\/p>\n
Next, in the src\/hooks<\/code> directory, create a new file called useFileSelection.js<\/code> and add the following to it:<\/p>\n
import<\/span> { message } from<\/span> \"antd\"<\/span>;\nimport<\/span> { uploadImage } from<\/span> \"..\/cloudinary\/cloudinaryHelper\"<\/span>;\nimport<\/span> { defaultUploadTag } from<\/span> \"..\/cloudinary\/cloudinaryConfig\"<\/span>;\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { useNavigate } from<\/span> \"react-router-dom\"<\/span>;\n\nconst<\/span> useFileSelection = ()<\/span> =><\/span> {\n  const<\/span> [selectedFiles, setSelectedFiles] = useState([]);\n  const<\/span> [isUploading, setIsUploading] = useState(false<\/span>);\n\n  const<\/span> navigate = useNavigate();\n\n  const<\/span> addFile = (file<\/span>) =><\/span> {\n    setSelectedFiles((currentSelection<\/span>) =><\/span> [...currentSelection, file]);\n  };\n\n  const<\/span> removeFile = (file<\/span>) =><\/span> {\n    setSelectedFiles((currentSelection<\/span>) =><\/span> {\n      const<\/span> newSelection = currentSelection.slice();\n      const<\/span> fileIndex = currentSelection.indexOf(file);\n      newSelection.splice(fileIndex, 1<\/span>);\n      return<\/span> newSelection;\n    });\n  };\n\n  const<\/span> uploadSelection = ()<\/span> =><\/span> {\n    if<\/span> (selectedFiles.length === 0<\/span>) {\n      message.error(\"You need to select at least one image\"<\/span>);\n      return<\/span>;\n    }\n\n    setIsUploading(true<\/span>);\n    const<\/span> uploadResults = [];\n    const<\/span> returnedTags = [];\n\n    selectedFiles.forEach((file<\/span>) =><\/span> {\n      uploadImage({\n        file,\n        successCallback<\/span>: (response<\/span>) =><\/span> {\n          returnedTags.push(...response.tags);\n          uploadResults.push(response);\n          if<\/span> (uploadResults.length === selectedFiles.length) {\n            setIsUploading(false<\/span>);\n            const<\/span> tags = new<\/span> Set<\/span>(returnedTags);\n            tags.delete(defaultUploadTag);\n            message.success(\"Images uploaded successfully\"<\/span>);\n            navigate(\"\/gallery\"<\/span>, { state<\/span>: [...tags] });\n          }\n        },\n      });\n    });\n  };\n\n  return<\/span> [addFile, removeFile, isUploading, uploadSelection];\n};\n\nexport<\/span> default<\/span> useFileSelection;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
NOTE:<\/strong> Cloudinary also provides an Admin API<\/a>, which among other things, can retrieve all the tags<\/a> currently used for a specified resource type.<\/p>\n
With our hooks in place, let\u2019s build our components.<\/p>\n
Adding Components<\/h2>\n
In the src<\/code> directory, create a new folder named components<\/code>. In the src\/components<\/code> folder, create a new file named DragAndDrop.js<\/code> and add the following to it:<\/p>\n
import<\/span> { Upload } from<\/span> \"antd\"<\/span>;\nimport<\/span> { PlusOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\nimport<\/span> useFilePreview from<\/span> \"..\/hooks\/useFilePreview\"<\/span>;\n\nconst<\/span> { Dragger } = Upload;\n\nconst<\/span> DragAndDrop = ({ addFile, removeFile }<\/span>) =><\/span> {\n  const<\/span> [handlePreview, previewContent] = useFilePreview();\n\n  const<\/span> beforeUploadHandler = (file<\/span>) =><\/span> {\n    addFile(file);\n    return<\/span> false<\/span>;\n  };\n\n  return<\/span> (\n    <><\/span>\n      <Dragger<\/span>\n        multiple<\/span>={true}<\/span>\n        onRemove<\/span>={removeFile}<\/span>\n        showUploadList<\/span>={true}<\/span>\n        listType<\/span>=\"picture-card\"<\/span>\n        beforeUpload<\/span>={beforeUploadHandler}<\/span>\n        onPreview<\/span>={handlePreview}<\/span>\n        accept<\/span>=\"image\/*\"<\/span>\n      ><\/span>\n        <p<\/span> className<\/span>=\"ant-upload-drag-icon\"<\/span>><\/span>\n          <PlusOutlined<\/span> \/><\/span>\n        <\/p<\/span>><\/span>\n        <p<\/span> className<\/span>=\"ant-upload-text\"<\/span>><\/span>\n          Click this area or drag files to upload\n        <\/p<\/span>><\/span>\n      <\/Dragger<\/span>><\/span>\n      {previewContent}\n    <\/><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> DragAndDrop;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, in the src\/components<\/code> directory, create a new file named ImageUpload.js<\/code> and add the following to it:<\/p>\n
import<\/span> useFileSelection from<\/span> \"..\/hooks\/useFileSelection\"<\/span>;\nimport<\/span> { Button, Card } from<\/span> \"antd\"<\/span>;\nimport<\/span> DragAndDrop from<\/span> \".\/DragAndDrop\"<\/span>;\n\nconst<\/span> ImageUpload = ()<\/span> =><\/span> {\n  const<\/span> [addFile, removeFile, isUploading, uploadSelection] =\n    useFileSelection();\n\n  return<\/span> (\n    <Card<\/span>\n      style<\/span>={{<\/span> margin:<\/span> \"auto<\/span>\", width:<\/span> \"50<\/span>%\" }}\n      actions<\/span>={[<\/span>\n        <Button<\/span> type<\/span>=\"primary\"<\/span> loading<\/span>={isUploading}<\/span> onClick<\/span>={uploadSelection}<\/span>><\/span>\n          Submit\n        <\/Button<\/span>><\/span>,\n      ]}\n    >\n      <DragAndDrop<\/span> addFile<\/span>={addFile}<\/span> removeFile<\/span>={removeFile}<\/span> \/><\/span>\n    <\/Card<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> ImageUpload;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This component builds on the DragAndDrop<\/code> component and adds a submit button which triggers the upload process. The useFileSelection<\/code> hook provides the functionality for adding files, removing files, and uploading the selection.<\/p>\n
Next, let\u2019s create a component to render the tags returned by Imagga. In the src\/components<\/code> folder, create a new file named Tags.js<\/code> and add the following to it:<\/p>\n
import<\/span> { Tag } from<\/span> \"antd\"<\/span>;\n\nconst<\/span> tagColours = [\n  \"magenta\"<\/span>,\n  \"red\"<\/span>,\n  \"volcano\"<\/span>,\n  \"orange\"<\/span>,\n  \"gold\"<\/span>,\n  \"lime\"<\/span>,\n  \"green\"<\/span>,\n  \"cyan\"<\/span>,\n  \"blue\"<\/span>,\n  \"geekblue\"<\/span>,\n  \"purple\"<\/span>,\n];\n\nconst<\/span> getTagColour = ()<\/span> =><\/span>\n  tagColours[Math<\/span>.floor(Math<\/span>.random() * tagColours.length)];\n\nconst<\/span> Tags = ({ tags, setActiveTag }<\/span>) =><\/span> {\n  if<\/span> (tags.length === 0<\/span>) {\n    return<\/span> <><\/span><\/><\/span><\/span>;\n  }\n  return<\/span> (\n    <div<\/span> style<\/span>={{<\/span> width:<\/span> \"80<\/span>%\", margin:<\/span> \"auto<\/span>\", marginBottom:<\/span> \"5px<\/span>\" }}><\/span>\n      {tags.map((tag, index) => (\n        <Tag<\/span>\n          color<\/span>={getTagColour()}<\/span>\n          key<\/span>={index}<\/span>\n          style<\/span>={{<\/span> cursor:<\/span> \"pointer<\/span>\", margin:<\/span> \"5px<\/span>\" }}\n        ><\/span>\n          <span<\/span>\n            onClick<\/span>={()<\/span> =><\/span> {\n              setActiveTag(tag);\n            }}\n          >\n            {tag}\n          <\/span<\/span>><\/span>\n        <\/Tag<\/span>><\/span>\n      ))}\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Tags;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We start by declaring an array of colors and a function to return a random color from the array.<\/p>\n
The Tags<\/code> component takes two props – the tags<\/code> array and a setActiveTag<\/code> callback which is triggered when a tag is clicked.<\/p>\n
The next component we will build is one to display the uploaded images. In the src\/components<\/code> folder, create a new file named Gallery.js<\/code> and add the following to it:<\/p>\n
import<\/span> { getImages } from<\/span> \"..\/cloudinary\/cloudinaryHelper\"<\/span>;\nimport<\/span> { useEffect, useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { Image, Transformation } from<\/span> \"cloudinary-react\"<\/span>;\nimport<\/span> { cloudName, uploadPreset } from<\/span> \"..\/cloudinary\/cloudinaryConfig\"<\/span>;\nimport<\/span> { useLocation } from<\/span> \"react-router-dom\"<\/span>;\nimport<\/span> { Row, Col } from<\/span> \"antd\"<\/span>;\nimport<\/span> Tags from<\/span> \".\/Tags\"<\/span>;\n\nconst<\/span> Gallery = ()<\/span> =><\/span> {\n  const<\/span> [images, setImages] = useState([]);\n  const<\/span> location = useLocation();\n  const<\/span> uploadResultTags = location.state ?? [];\n  const<\/span> tags = [\"All\"<\/span>, ...uploadResultTags];\n  const<\/span> [activeTag, setActiveTag] = useState(\"All\"<\/span>);\n\n  useEffect(()<\/span> =><\/span> {\n    getImages({\n      successCallback<\/span>: setImages,\n      imageTag<\/span>: activeTag === \"All\"<\/span> ? null<\/span> : activeTag,\n    });\n  }, [activeTag]);\n\n  useEffect(()<\/span> =><\/span> {\n    getImages({\n      successCallback<\/span>: setImages,\n    });\n  }, []);\n\n  return<\/span> (\n    <><\/span>\n      <Row<\/span>><\/span>\n        <Tags<\/span> tags<\/span>={tags}<\/span> setActiveTag<\/span>={setActiveTag}<\/span> \/><\/span>\n      <\/Row<\/span>><\/span>\n\n      <Row<\/span> gutter<\/span>={[0,<\/span> 16<\/span>]} align<\/span>=\"middle\"<\/span>><\/span>\n        {images.map((image, index) => (\n          <Col<\/span> span<\/span>={6}<\/span> key<\/span>={index}<\/span>><\/span>\n            <Image<\/span>\n              publicId<\/span>={image.public_id}<\/span>\n              cloudName<\/span>={cloudName}<\/span>\n              upload_preset<\/span>={uploadPreset}<\/span>\n              secure<\/span>={true}<\/span>\n              alt<\/span>={image.originalFilename}<\/span>\n            ><\/span>\n              <Transformation<\/span> width<\/span>={300}<\/span> height<\/span>={300}<\/span> crop<\/span>=\"scale\"<\/span> \/><\/span>\n            <\/Image<\/span>><\/span>\n          <\/Col<\/span>><\/span>\n        ))}\n      <\/Row<\/span>><\/span>\n    <\/><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Gallery;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Upon mounting, this component retrieves all the images uploaded (using the default upload tag) and renders them via the functionality provided by the Cloudinary React SDK. Additionally, it renders the tags passed to it by the useFileSelection<\/code> hook and listen for changes to the active tag – in the event of a change, a request is made to pull images corresponding to the selected tag.<\/p>\n
To make navigation between the ImageUpload<\/code> and Gallery<\/code> components easier, let\u2019s add a menu to our application. In the src\/components<\/code> folder, create a new file named Menu.js<\/code> and add the following to it:<\/p>\n
import<\/span> { Menu as<\/span> AntDMenu } from<\/span> \"antd\"<\/span>;\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> { Link } from<\/span> \"react-router-dom\"<\/span>;\nimport<\/span> { PictureOutlined, UploadOutlined } from<\/span> \"@ant-design\/icons\"<\/span>;\n\nconst<\/span> Menu = ()<\/span> =><\/span> {\n  const<\/span> [currentlySelected, setCurrentlySelected] = useState(\"upload\"<\/span>);\n\n  const<\/span> handleMenuSelection = (e<\/span>) =><\/span> {\n    setCurrentlySelected(e.key);\n  };\n\n  const<\/span> items = [\n    {\n      label<\/span>: <Link<\/span> to<\/span>=\"\/\"<\/span>><\/span>Upload Images<\/Link<\/span>><\/span><\/span>,\n      key<\/span>: \"upload\"<\/span>,\n      icon<\/span>: <UploadOutlined<\/span> \/><\/span><\/span>,\n    },\n    {\n      label<\/span>: <Link<\/span> to<\/span>=\"\/gallery\"<\/span>><\/span>Gallery<\/Link<\/span>><\/span><\/span>,\n      key<\/span>: \"gallery\"<\/span>,\n      icon<\/span>: <PictureOutlined<\/span> \/><\/span><\/span>,\n    },\n  ];\n  return<\/span> (\n    <AntDMenu<\/span>\n      mode<\/span>=\"horizontal\"<\/span>\n      onClick<\/span>={handleMenuSelection}<\/span>\n      selectedKeys<\/span>={[currentlySelected]}<\/span>\n      items<\/span>={items}<\/span>\n    \/><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Menu;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Add Routing<\/h2>\n
With our components in place, let\u2019s add routing to handle the switching between components based on the selected route. In the src<\/code> folder, create a new file named routes.js<\/code> and add the following to it:<\/p>\n
import<\/span> Gallery from<\/span> \".\/components\/Gallery\"<\/span>;\nimport<\/span> ImageUpload from<\/span> \".\/components\/ImageUpload\"<\/span>;\n\nconst<\/span> routes = [\n  {\n    path<\/span>: \"\/\"<\/span>,\n    element<\/span>: <ImageUpload<\/span> \/><\/span><\/span>,\n  },\n  {\n    path<\/span>: \"\/gallery\"<\/span>,\n    element<\/span>: <Gallery<\/span> \/><\/span><\/span>,\n  },\n];\n\nexport<\/span> default<\/span> routes;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here we declare two routes and the element to be rendered when the route is hit. Next, update the src\/App.js<\/code> file to match the following:<\/p>\n
import<\/span> \".\/App.css\"<\/span>;\nimport<\/span> { useRoutes } from<\/span> \"react-router-dom\"<\/span>;\nimport<\/span> routes from<\/span> \".\/routes\"<\/span>;\nimport<\/span> Menu from<\/span> \".\/components\/Menu\"<\/span>;\nimport<\/span> { Col, Row } from<\/span> \"antd\"<\/span>;\n\nconst<\/span> App = ()<\/span> =><\/span> {\n  const<\/span> router = useRoutes(routes);\n\n  return<\/span> (\n    <div<\/span> style<\/span>={{<\/span> margin:<\/span> \"1<\/span>%\" }}><\/span>\n      <Menu<\/span> \/><\/span>\n      <div<\/span> style<\/span>={{<\/span> textAlign:<\/span> \"center<\/span>\" }}><\/span>\n        <Row<\/span> justify<\/span>=\"center\"<\/span> align<\/span>=\"middle\"<\/span> style<\/span>={{<\/span> textAlign:<\/span> \"center<\/span>\" }}><\/span>\n          <Col<\/span> style<\/span>={{<\/span> width:<\/span> \"100<\/span>%\", margin:<\/span> \"2<\/span>%\" }}><\/span>{router}<\/Col<\/span>><\/span>\n        <\/Row<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we render the menu and the router – which renders the relevant component based on the current route.<\/p>\n
Finally, update the src\/index.js<\/code> to match the following:<\/p>\n
import<\/span> React from<\/span> \"react\"<\/span>;\nimport<\/span> ReactDOM from<\/span> \"react-dom\/client\"<\/span>;\nimport<\/span> \".\/index.css\"<\/span>;\nimport<\/span> App from<\/span> \".\/App\"<\/span>;\nimport<\/span> reportWebVitals from<\/span> \".\/reportWebVitals\"<\/span>;\nimport<\/span> { BrowserRouter } from<\/span> \"react-router-dom\"<\/span>;\n\nconst<\/span> root = ReactDOM.createRoot(document<\/span>.getElementById(\"root\"<\/span>));\n\nroot.render(\n  <React.StrictMode<\/span>><\/span>\n    <BrowserRouter<\/span>><\/span>\n      <App<\/span> \/><\/span>\n    <\/BrowserRouter<\/span>><\/span>\n  <\/React.StrictMode<\/span>><\/span><\/span>\n);\n\nreportWebVitals();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With everything in place, run your application using the following command:<\/p>\n
npm start\n<\/code><\/span><\/pre>\n
By default, the application will be available at http:\/\/localhost:3000\/<\/a>. The final result will look like the gif shown below.<\/p>\n
\"\"<\/p>\n
Find the complete project here<\/a> on GitHub.<\/p>\n
Conclusion<\/h2>\n
In this article, we looked at how to take advantage of Imagga to automatically add tags to images uploaded to Cloudinary. Taking advantage of the flexibility of the Cloudinary API, we were able to build an application equipped with the tagging functionality and retrieve images based on tags – all without a backend.<\/p>\n
Cloudinary also offers even more robust features which can take our application further by allowing us to retrieve ALL<\/strong> the tags used to upload images, thereby giving our application even more control over the tags instead of being restricted to recently classified tags.<\/p>\n
Resources you may find helpful:<\/strong><\/p>\n
Next, we iterate through the tags and render an AntD Tag<\/a> component with an onClick<\/code> handler that calls the setActiveTag<\/code> function.<\/p>\n
The DragAndDrop<\/code> component wraps the AntD Upload<\/a> component and uses the useFilePreview<\/code> hook to add the required functionality for us to preview files before uploading.<\/p>\n
This hook helps us keep track of the files selected we want to upload, as well as add or remove files. It also provides a function that allows us to upload the selected files to Cloudinary using the uploadImage<\/code> function declared earlier. In the successCallback<\/code> provided, we retrieve the tags provided from the Cloudinary upload response and add them to an array. Once all the images have been uploaded, we generate a Set<\/a> object, which removes duplicate tags and passes the destructured Set object to the component rendered by the \/gallery<\/code> route. This is a workaround to access the generated tags temporarily.<\/p>\n
In the getImages<\/code> function, we use the Client-side asset lists<\/a> feature to retrieve the list of images with our set tag. Where a tag is specified in the imageTag<\/code> key, a subset of images – classified by Imagga to match that tag; are retrieved from our Cloudinary store. If no tag is provided, then the default tag is used to retrieve all the images tagged by our application during the upload process.<\/p>\n
When we sign up for a Cloudinary account, we don\u2019t immediately get access to the add-ons<\/a>. To access the Imagga Auto Tagging add-on, you need to register. Each add-on gives us a variety of plans and their associated pricing. Fortunately, most of them also have free plans, which is what we will be using for our application.<\/p>\n