Xata•15mo ago

Next.js file attachment

Hi, I'm trying to upload file using Next.js, but it doesn't work. I have upladed a file, then I converted it to base64, and finally I have sent it to Xata using XataFile like this: photos: [XataFile.fromBase64(photo-base64)]

17 Replies

alihammadOP•15mo ago

I got it, there's no need to use XataFile as recommended in the Code snippets. Instead, I used it as recommended in the documentation like this:

{
    "name": "sample.png",
    "mediaType": "image/png",
    "base64Content": "iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVR42mNk+M9QzwAEjDAGACCDAv8cI7IoAAAAAElFTkSuQmCC"
  }

kostas•15mo ago

Thank you for raising this and glad you found a successful approach already. Could you perhaps provide a code sample how you used XataFile.fromBase64 so we can check why it didn't work?

alihammadOP•15mo ago

Sure, XataFile.fromBase64 accepts base64 string, but the XataFile can't recognize the name and the type of the file. Also, the base64Content key in XataFile object is empty. So it saves empty data of the file to the server. Here's the function for inserting a product for example:

"use server";
import { getXataClient } from "./xata";
import { XataFile } from "@xata.io/client"; // Generated with CLI

const xata = getXataClient();

export default async function addProduct(data) {
  await xata.db.products.create({
    ...data,
    store: process.env.STORE_ID,
    photos: [XataFile.fromBase64("SGVsbG8gV29ybGQ=")],
  });
}

alihammadOP•15mo ago

And this is how XataFile formats the file in base64

kostas•15mo ago

Thank you very much, we will have a look and get back to you

alihammadOP•15mo ago

SferaDev•15mo ago

Hey @alihammad .

export default async function addProduct(data) {
  await xata.db.products.create(
    {
      ...data,
      store: process.env.STORE_ID,
      photos: [XataFile.fromBase64('SGVsbG8gV29ybGQ=', { name: 'foo.txt', mediaType: 'text/plain' })]
    },
    ['*', 'photos.base64Content']
  );
}

export default async function addProduct(data) {
  await xata.db.products.create(
    {
      ...data,
      store: process.env.STORE_ID,
      photos: [XataFile.fromBase64('SGVsbG8gV29ybGQ=', { name: 'foo.txt', mediaType: 'text/plain' })]
    },
    ['*', 'photos.base64Content']
  );
}

You can include and mediaType in the XataFile.fromBase64 method. And since base64Content is not included by default in the payload (to minimize network traffic) you can expand it as a normal column.

teri•10mo ago

First time trying to use the file attachments to upload an image in Next.js. I don't know if this code is correct.

"use server";

import { getXataClient } from "@/src/xata";
// import { XataFile } from "@xata.io/client";

const xata = getXataClient();

export async function notesData(name, description, type, rating, img) {
  const record = await xata.db.notes.create(
    {
      name: name,
      description: description,
      type: type,
      rating: parseInt(rating),
      img: { base64Content: "" },
    },
    ["img.uploadUrl"]
  );
  console.log(record.img.uploadUrl);
}

"use server";

import { getXataClient } from "@/src/xata";
// import { XataFile } from "@xata.io/client";

const xata = getXataClient();

export async function notesData(name, description, type, rating, img) {
  const record = await xata.db.notes.create(
    {
      name: name,
      description: description,
      type: type,
      rating: parseInt(rating),
      img: { base64Content: "" },
    },
    ["img.uploadUrl"]
  );
  console.log(record.img.uploadUrl);
}

@kostas @alihammad

teri•10mo ago

Getting this error when i click on send to the database

kostas•10mo ago

The code looks correct except that it doesn't return the uploadUrl, only prints it out in the console. You can find a NextJS example for an app that creates a record from the server requesting an uploadUrl for it and then passes it to the client to upload a file, here: https://github.com/xataio/examples/blob/main/apps/sample-nextjs-upload-file/app/page.tsx https://github.com/xataio/examples/blob/main/apps/sample-nextjs-upload-file/components/upload.tsx

teri•10mo ago

is this correct? i am getting 500 server error.

"use server";

import { getXataClient } from "@/src/xata";

const xata = getXataClient();

export async function notesData(name, description, type, rating) {
  const record = await xata.db.notes.create(
    {
      name: name,
      description: description,
      type: type,
      rating: parseInt(rating),
      img: { mediaType, base64Content: "" },
    },
    ["*", "img.uploadUrl"]
  );
  return { uploadUrl: record.img?.uploadUrl };
}

"use server";

import { getXataClient } from "@/src/xata";

const xata = getXataClient();

export async function notesData(name, description, type, rating) {
  const record = await xata.db.notes.create(
    {
      name: name,
      description: description,
      type: type,
      rating: parseInt(rating),
      img: { mediaType, base64Content: "" },
    },
    ["*", "img.uploadUrl"]
  );
  return { uploadUrl: record.img?.uploadUrl };
}

client.txt

kostas•10mo ago

server side the function has fewer arguments than the ones passed to it client side, which adds the img notesData(name, description, type, rating) vs await notesData( name, description, type, rating, img.type );

teri•10mo ago

I will continue to try it till i get it.

teri•10mo ago

I need help as the uploaded image file is not displaying as I want in my notes table. https://github.com/Terieyenike/track-trip-dashboard-with-xata-next/blob/main/utils/notes-data.js https://github.com/Terieyenike/track-trip-dashboard-with-xata-next/blob/main/app/(custom)/dashboard/note/create/page.js

GitHub

track-trip-dashboard-with-xata-next/utils/notes-data.js at main · T...

Keep track of all your adventures, never forget the amazing memories. - Terieyenike/track-trip-dashboard-with-xata-next

GitHub

track-trip-dashboard-with-xata-next/app/(custom)/dashboard/note/cre...

Keep track of all your adventures, never forget the amazing memories. - Terieyenike/track-trip-dashboard-with-xata-next

kostas•10mo ago

Looks like the notesData function does not return the url value for the client to upload the file to that url. Please see here: https://github.com/xataio/examples/blob/main/apps/sample-nextjs-upload-file/app/page.tsx#L16 The createImage function in our sample app is the equivalent to your notesData function. It returns the uploadUrl. When createImage is called by the client in our sample app: https://github.com/xataio/examples/blob/main/apps/sample-nextjs-upload-file/components/upload.tsx#L40 it retrieves the uploadUrl from it, and then does a fetch on it https://github.com/xataio/examples/blob/main/apps/sample-nextjs-upload-file/components/upload.tsx#L52 which is the actual file upload step.

teri•10mo ago

i will try it again and revert. It worked. I got it which get the data in Xata especially the uploaded image.

kostas•10mo ago

Awesome! Glad to read things worked!

Gaming

Programming

Next.js file attachment

Did you find this page helpful?