​
Overview

Trieve provides a simple way to integrate image search into your application. This guide will walk you through the steps to set up image search with Trieve.

For a full implementation example, take a look at the way we implement image search in our search component.

​
Uploading an Image

​
1. Allow Users to Select an Image

To let users upload an image, use an <input> element with a file picker. Here’s a simple React component for an image uploader:

import React, { useState, useRef } from 'react';
import { uploadFile, getPresignedUrl } from 'trieve-sdk';

export const ImageUploader = ({ trieveSDK }) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = event.target.files?.[0];
    if (selectedFile) {
      handleFileUpload(selectedFile);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        ref={fileInputRef}
        accept="image/*"
        onChange={handleFileSelect}
        className="hidden"
      />
      <button onClick={() => fileInputRef.current?.click()}>
        Upload Image
      </button>
    </div>
  );
};

​
2. Upload the Image to Trieve

After the user selects an image, you can either upload it to Trieve and get a URL for it or use your own CDN. Here’s how you can do it with Trieve:

const handleFileUpload = async (selectedFile: File) => {
  try {
    // Convert the file to a base64 string
    const base64 = await convertToBase64(selectedFile);
    
    // Upload the file to Trieve and get a unique file ID
    const fileId = await uploadFile(trieveSDK, selectedFile.name, base64, {
      create_chunks: false // Set to false to ensure that your file isn't indexed
    });

    // Get a public URL for the uploaded image
    const imageUrl = await getPresignedUrl(trieveSDK, fileId);
    
    return imageUrl;
  } catch (error) {
    console.error('Image upload failed:', error);
    return null;
  }
};

Once you have the uploaded image’s URL, you can use it to search for visually similar images.

Pass the image URL into a search query using Trieve’s SDK:

const performImageSearch = async (imageUrl: string) => {
  try {
    const searchResults = await trieveSDK.search({
      query: { image_url: imageUrl },
      search_type: 'semantic',
      page_size: 10, // Adjust as needed
    });

    return searchResults.chunks;
  } catch (error) {
    console.error('Image search failed:', error);
    return [];
  }
};

​
2. Display Search Results

Once you get the results, you can display them in your UI as thumbnails, links, or however you’d like.

Was this page helpful?

Raise issue
Setup Voice SearchBuild Search for a Job Board