How can I use the upload into a richText?

default discord avatar
kevstrosky
last week
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
    Payload Team
    last week

    Hey @kevstrosky, 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
    kevstrosky
    last week

    No, when I click on a window this section opens

    image.png
  • discord user avatar
    tylandavis
    Payload Team
    last week

    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
    kevstrosky
    last week

    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

    image.png
    image.png
  • discord user avatar
    tylandavis
    Payload Team
    last week

    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
    kevstrosky
    last week

    Ohhh I see, thanks a lot man!!!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.