Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

How can I use the upload into a richText?

default discord avatar
kevstroskylast year
6

I want to add an image inside the RichText but I don't know how to actually use this functionality, could you help me to implement it please? thank you very much.



Here's my code:




import { CollectionConfig } from "payload/types";


import path from "path";



const Noticias: CollectionConfig = {


slug: "noticias",


admin: {


defaultColumns: ["titulo", "ciudad"],


useAsTitle: "titulo",


},


upload: {


staticDir: path.resolve(__dirname, "../../media"),


adminThumbnail: "noticia",


imageSizes: [


{


name: "noticia",


width: 960,


height: undefined,


crop: "center",


},


],


mimeTypes: ["image/png", "image/jpeg", "image/gif", "image/webp"],


},


access: {


read: () => true,


create: () => true,


delete: () => true,


update: () => true,


},


fields: [


{


name: "titulo",


type: "text",


required: true,


},


{


name: "ciudad",


type: "relationship",


relationTo: "ciudades",


},


{


name: "autores",


type: "relationship",


relationTo: "autores",


},


{


name: "content",


type: "richText",


required: true,


},


{


name: "estado",


type: "select",


options: [


{


value: "borrador",


label: "Borrador",


},


{


value: "finalizada",


label: "Finalizada",


},


],


defaultValue: "borrador",


admin: {


position: "sidebar",


},


},


],


};



export default Noticias;

  • discord user avatar
    tylandavis
    last year

    Hey

    @191019604544323585

    , as long as you have an upload-enabled collection defined in your Payload config, you should be able to add uploads in your rich text editor. Are you able to choose a file after selecting the upload icon?

  • default discord avatar
    kevstroskylast year

    No, when I click on a window this section opens

  • discord user avatar
    tylandavis
    last year

    I see. Your

    Noticias

    collection is actually an upload-enabled collection, which is why you are seeing those as options.



    You will want to add another upload-enabled collection to your Payload config, and it should automatically be available to select in your richText editors.



    To prevent the

    Noticias

    collection from being an option in richText, set the collection admin options of

    enableRichTextLink

    and

    enableRichTextRelationship

    to false in your collection config:


    admin: {
      enableRichTextLink: false,
      enableRichTextRelationship: false,
    }
  • default discord avatar
    kevstroskylast year

    Ohhh, I see how it works. I have created a new collection to upload the images of the news, however, when I create a new image I get the whole list with the elements created and then let me create a new one. do you know how I can skip the step where I see all the elements and just go to the step of creating a new one directly?



    This is what I see now if I click on the upload images icon



    And when I click on create new item, this tab is opened

  • discord user avatar
    tylandavis
    last year

    By default, there's no way to skip those steps. Uploads within the richText field are technically relations to the upload collection, so you always have the option to select any of those from that collection.

  • default discord avatar
    kevstroskylast year

    Ohhh I see, thanks a lot man!!!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.