Manual image uploads on convex dashboard
Hey there everyone!
Here's my schema:
ItemTable: defineTable({
name: v.string(),
category: v.optional(v.string()),
questionDesc: v.optional(v.string()),
questionType: v.optional(v.string()),
chartData: v.optional(v.string()),
}),
What I am trying to do is to upload a .jpeg / .png file manually from the convex dashboard, and the chartData (see above) should get that image as its value.
How can I achieve this? is giving v.string() as hartData's value wrong? How am I going to link the image to chartData on convex dashboard?
Please, help!7 Replies
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>
))}hey @KomaSattarov ! you'd generally need to do two things. 1. get the storageId when you upload the image in the dashboard and then 2. insert a record into a convex table somewhere linking that storageId to your other data
then you would display the image using the hosted url of the image within an
<img> tag
not by literally downloading the image data in your query functionsee the serving files example here: https://docs.convex.dev/file-storage/serve-files
Serving Files | Convex Developer Hub
Files stored in Convex can be served to your users by generating a URL pointing
it demonstrate this with an image
and shows you a query that uses
storage.getUrl to return the hosted permanent URL of the image from the query. that url is then embedded in an HTML <img> tag
(as the src property)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
okay, sorry you didn't find it helpful. perhaps this codebase that seems to implement exactly what you're trying to do would be useful: https://github.com/get-convex/convex-demos/tree/main/file-storage-with-http
GitHub
convex-demos/file-storage-with-http at main · get-convex/convex-demos
Demo apps built on Convex. Contribute to get-convex/convex-demos development by creating an account on GitHub.
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,
}
}))
}
});
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>
))}
</>
);
}
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?
what can I do to make this work? Please, give a "code" answer, no more links, please