KomaSattarov Comments - Convex Community

KomaSattarov

•Created by KomaSattarov on 2/28/2024 in #support-community

Langchain + Convex, please...

Thanks for the response. However, can you help me break down what needs to be done, like step-by-step, please. I am very new to coding, thus, I do not possess experience or in-depth understanding of programming... I checked out the links you've shared, but they seem a bit confusing and a bit different to what I am trying to build.

4 replies

CCConvex Community

•Created by KomaSattarov on 12/29/2023 in #support-community

how to display an uploaded image? [beginner]

LOL, you are a savage, but thank you. Like, thank you very very much! And, happy new year!!!

12 replies

CCConvex Community

•Created by KomaSattarov on 12/29/2023 in #support-community

how to display an uploaded image? [beginner]

Here's what GPT says: The runtime error you're encountering indicates that Next.js is trying to optimize an image hosted on a domain that has not been listed in the next.config.js configuration file. Next.js requires you to specify which domains are allowed to host images for the Image component to process them. To resolve the error, you need to update your next.config.js file to include the domain utmost-ferret-183.convex.cloud in the images.domains array. Here's an example of how you could modify your next.config.js:

module.exports = {
  images: {
    domains: ['utmost-ferret-183.convex.cloud'],
  },
  // ... other Next.js config
};

After adding the domain to the config file, restart your Next.js server for the changes to take effect. This should resolve the error and allow Next.js to optimize images from the specified domain. AND, here's my config:

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

12 replies

CCConvex Community

•Created by KomaSattarov on 12/29/2023 in #support-community

how to display an uploaded image? [beginner]

Here's the error msg I am getting when I use Image from next/image:

Unhandled Runtime Error
Error: Invalid src prop (https://utmost-ferret-183.convex.cloud/api/storage/ab8dbe9d-7c43-41b2-b644-434fce701fd5) on

next/image, hostname "utmost-ferret-183.convex.cloud" is not configured under images in your next.config.js


See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

12 replies

CCConvex Community

•Created by KomaSattarov on 12/29/2023 in #support-community

how to display an uploaded image? [beginner]

BTW, this code is working when I used <img /> instead of <Image /> from next/image:

return (
    <>
      {taskOneEssays.map((essay) => (
        <Card
          key={essay._id}
          className={cn(
            "w-380px hover:shadow-xl cursor-pointer shadow-none dark:shadow-slate-700 group snap-center focus:outline-none",
            className
          )}
          {...props}
        >
          <CardHeader className="grid items-center pt-10 space-y-0 ">
            <CardDescription className="flex justify-between text-base">
              <p className="line-clamp-5 pl-4 font-heading leading-6 w-full text-card-foreground">
                {essay.name}
              </p>
            </CardDescription>
            <p>Supportive task question description.</p>
          </CardHeader>
          <CardContent>
            {essay.chartData && (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={

${essay.chartData}

} width={300} height={300} alt="chart image" />
            )}
          </CardContent>
        </Card>
      ))}
    </>
  );

12 replies

CCConvex Community

•Created by KomaSattarov on 12/29/2023 in #support-community

how to display an uploaded image? [beginner]

BTW, I am using NextJs

12 replies

CCConvex Community

•Created by KomaSattarov on 12/29/2023 in #support-community

how to display an uploaded image? [beginner]

Here's where I want to display it: export function TestCardTaskOne({ className, ...props }: CardProps) { const taskOneEssays = useQuery(api.taskOne.getTaskOneEssays); if (!taskOneEssays) { return <div>Loading...</div>; } return ( <> {taskOneEssays.map((essay) => ( <Card key={essay._id} className={cn( "w-380px hover:shadow-xl cursor-pointer shadow-none dark:shadow-slate-700 group snap-center focus:outline-none", className )} {...props} > <CardHeader className="grid items-center pt-10 space-y-0 "> <CardDescription className="flex justify-between text-base"> <p className="line-clamp-5 pl-4 font-heading leading-6 w-full text-card-foreground"> {essay.name} </p> </CardDescription> <p>Supportive task question description.</p> </CardHeader> <CardContent> {essay.chartData && ( <Image alt="Chart Data" src={essay.chartData} width={300} height={300} /> )} </CardContent> </Card> ))} </> ); }` Please, give me an answer in a code sample, no referrals to links that would further complicate the process.

12 replies

CCConvex Community

•Created by KomaSattarov on 12/29/2023 in #support-community

how to display an uploaded image? [beginner]

I want to use convex dashboard to upload an image and get it stored as a value for one of my table instances. Here's the table:

taskOneTitles: defineTable({
    name: v.string(),
    category: v.optional(v.string()),
    questionDesc: v.optional(v.string()),
    questionType: v.optional(v.string()),
    chartData: v.string(), // How to get img for this
  }),

Here's the query as described in the docs:

`import { query } from "./_generated/server";

export const getTaskOneEssays = query({
    args: {},
    handler: async (ctx) => {
        const taskOneEssay = await ctx.db.query('taskOneTitles').collect();

        return Promise.all(taskOneEssay.map(async (essay) => {
            const imageUrl = await ctx.storage.getUrl(essay.chartData);

            return {
                ...essay,
                chartData: imageUrl,
            }
        }))
    }
});

12 replies

CCConvex Community

•Created by KomaSattarov on 12/23/2023 in #support-community

Manual image uploads on convex dashboard

what can I do to make this work? Please, give a "code" answer, no more links, please

15 replies

CCConvex Community

•Created by KomaSattarov on 12/23/2023 in #support-community

Manual image uploads on convex dashboard

Please, give me an answer in a code sample, why even if I created the query as described in the docs, why is still not working?

15 replies

CCConvex Community

•Created by KomaSattarov on 12/23/2023 in #support-community

Manual image uploads on convex dashboard

and the page:

export function TestCardTaskOne({ className, ...props }: CardProps) {
  const taskOneEssays = useQuery(api.taskOne.getTaskOneEssays);

  if (!taskOneEssays) {
    return <div>Loading...</div>;
  }

  return (
    <>
      {taskOneEssays.map((essay) => (
        <Card
          key={essay._id}
          className={cn(
            "w-380px hover:shadow-xl cursor-pointer shadow-none dark:shadow-slate-700 group snap-center focus:outline-none",
            className
          )}
          {...props}
        >
          <CardHeader className="grid items-center pt-10 space-y-0 ">
            <CardDescription className="flex justify-between text-base">
              <p className="line-clamp-5 pl-4 font-heading leading-6 w-full text-card-foreground">
                {essay.name}
              </p>
            </CardDescription>
            <p>Supportive task question description.</p>
          </CardHeader>
          <CardContent>
            {essay.chartData && (
              <Image
                alt="Chart Data"
                src={essay.chartData}
                width={300}
                height={300}
              />
            )}
          </CardContent>
        </Card>
      ))}
    </>
  );
}

15 replies

CCConvex Community

•Created by KomaSattarov on 12/23/2023 in #support-community

Manual image uploads on convex dashboard

Jamie, please, let's have a human-to-human conversation. Here's the table:

taskOneTitles: defineTable({
    name: v.string(),
    category: v.optional(v.string()),
    questionDesc: v.optional(v.string()),
    questionType: v.optional(v.string()),
    chartData: v.string(), // How to get img for this
  }),

And, the query:

import { query } from "./_generated/server";

export const getTaskOneEssays = query({
    args: {},
    handler: async (ctx) => {
        const taskOneEssay = await ctx.db.query('taskOneTitles').collect();

        return Promise.all(taskOneEssay.map(async (essay) => {
            const imageUrl = await ctx.storage.getUrl(essay.chartData);

            return {
                ...essay,
                chartData: imageUrl,
            }
        }))
    }
});

15 replies

CCConvex Community

•Created by KomaSattarov on 12/23/2023 in #support-community

Manual image uploads on convex dashboard

I didn't find your answer helpful. It is as confusing as explained in the docs. Thanks for the effort, but, GPT can give a similar answer and I would still spend much time trying to figure out how to make that work

15 replies

CCConvex Community

•Created by KomaSattarov on 12/23/2023 in #support-community

Manual image uploads on convex dashboard

And, here's the query:

export const getTaskOneTitle = query({
    args: {},
    handler: async (ctx) => {
        return await ctx.db.query("taskOneTitles").collect();
    },
})

And, displaying it in the card:

{taskOneTitles?.map((title) => (
        <Card
          key={title._id}
        >
          <CardHeader>
            <CardTitle>{title.name}</CardTitle>
          </CardHeader>
          <CardContent>{title.chartData}</CardContent>
        </Card>
      ))}

15 replies

CCConvex Community

•Created by KomaSattarov on 12/9/2023 in #support-community

What's wrong with the following simple line of code?

Thank you for the feedback. I decided to delete and re-create the table and the query. It worked. However, I am still not sure why it didnt work at the initial attempts. The table is the same, however, the query looks a little different:

export const collectTitles = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("readyTitles").collect();
  },
});

4 replies

CCConvex Community

•Created by KomaSattarov on 12/5/2023 in #support-community

Occasional onvex error:

when i delete a document, the page redirects back to the main page, usually. However, the error I mentioned happens from time to time, thats why I think this error has something to do with convex.. If not, then I don't know what might be causing this issue to appear ocassionally

5 replies

CCConvex Community

•Created by KomaSattarov on 11/28/2023 in #support-community

Need help creating and organizing my schema:

Essays with chart data can have one or more charts, should I create an additional table for charts?. Also, if we assume that each essay can either be of Type-A or Type-B, and can also relate to one or more categories (i.e. economics, business, science, and/or tech), how can I achieve this? BTW, thank you very much for your response

6 replies