Feature request: Simple upload images and files like in django-ckeditor

[shtalinberg]

Usually clients wants to upload file and generate source code for uploaded images via editor

[matthiask]

Thanks for the issue. I don't think I'm going to add an image upload because there's so much infrastructure work to do for image handling, and also, generally, I have documented my views on this here:
https://github.com/matthiask/django-prose-editor?tab=readme-ov-file#about-rich-text-editors

[shtalinberg]

but it works in django-prose
maybe they won't mind sharing a ready-to-use solution?

[matthiask]

django-prose builds on Trix (https://trix-editor.org/), that's a completely different foundation to build an editor on, so we couldn't just use it 1:1.

Still interesting to look at their implementation of the upload view. It seems there's no media library, it's just attachments without a way to browse the uploads later. That seems quite straightforward to implement.

I'm still thinking about ways to extend the editor in project-specific environments, I'd want to solve that first.

[matthiask]

Yes, that would probably be the way to implement it.

[matthiask]

The prose editor bundle still doesn't contain the Image extension but it would be relatively easy to add it; this wouldn't help too much because we still wouldn't have a way to actually upload images. The FileHandler extension is a pro extension unfortunately so I cannot bundle it, and it wouldn't add the server part either for that matter.

At least the client side would be less work than it would have been before 0.10.

[samsplunks]

Hi all and Matthias, I understand your point of view and agree on the philosophy but users just want to paste/drop things.

It could be achieved in a simple way and wish to help.

[matthiask]

Images are somewhat supported now. You have to build your own editor preset and use the Figure, Caption and Image extensions. There's no upload functionality, but you can copy paste the src attribute of the image. I know that this probably will not make everyone happy, but a upload functionality is still somewhat out of scope for now.

Using the django-cabinet media library works fine, but as I said, you have to copy paste URLs.

[corentinbettiol]

Hi, I needed a way to add images through their url, and I ended up writing this:

In my settings:

DJANGO_PROSE_EDITOR_EXTENSIONS = [
    {
        "js": [
            "/static/js/prose/image.js"
        ],
        "extensions": {
            "AddImage": html_tags(
                tags=["img"],
                attributes={"img": ["src", "alt", "title", "width", "height"]}
            )
        }
    },
]

In static/js/prose/image.js:

import { Node, updateAttrsDialog } from "django-prose-editor/editor";

const imageDialogImpl = (editor, attrs, options) => {
  const properties = {
    src: {
      type: "string",
      title: gettext("Source"),
      required: true,
    },
    alt: {
      type: "string",
      title: gettext("Alt Text"),
      required: true,
    },
    title: {
      type: "string",
      title: gettext("Title"),
    },
    width: {
      type: "number",
      title: gettext("Width"),
    },
    height: {
      type: "number",
      title: gettext("Height"),
    },
  };

  return updateAttrsDialog(properties, {
    title: gettext("Add or edit image"),
  })(editor, attrs);
};

const ImageDialog = async (editor, attrs, options) => {
  attrs = attrs || {};
  attrs = await imageDialogImpl(editor, attrs, options);
  if (attrs) {
    return attrs;
  }
};

export const AddImage = Node.create({
  name: "image",
  content: "inline*",
  group: "block",
  isolating: true,

  addAttributes() {
    return {
      src: {
        default: null,
      },
      alt: {
        default: null,
      },
      title: {
        default: null,
      },
      width: {
        default: null,
      },
      height: {
        default: null,
      },
    };
  },
  parseHTML() {
    return [
      {
        tag: "img[src]",
        getAttrs: (dom) => ({
          src: dom.getAttribute("src"),
          alt: dom.getAttribute("alt"),
          title: dom.getAttribute("title"),
          width: dom.getAttribute("width"),
          height: dom.getAttribute("height"),
        }),
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ["img", HTMLAttributes];
  },
  addMenuItems({ editor, buttons, menu }) {
    menu.defineItem({
      name: "addImage",
      groups: "link",
      command: (editor) => editor.chain().addImage().focus().run(),
      button: buttons.material("image", "Add image"),
      enabled: (editor) => true,
      active: (editor) => editor.isActive("image"),
    });
  },
  addCommands() {
    return {
      ...this.parent?.(),
      addImage:
        () =>
        ({ editor }) => {
          const attrs = editor.getAttributes(this.name);

          ImageDialog(editor, attrs, this.options).then((attrs) => {
            if (attrs) {
              editor
                .chain()
                .focus()
                .insertContent({
                  type: "image",
                  attrs: attrs,
                })
                .run();
            }
          });
        },
    };
  },
});

Result:

[matthiask]

Nice! That's basically what I have as well.

  active: (editor) => editor.isActive("addImage"),

That should probably be editor.isActive("image")?

[corentinbettiol]

Oh yes my bad, I updated my comment, thank you :)

[pablodiegoss]

Hi, I needed a way to add images through their url, and I ended up writing this:

In my settings:

@corentinbettiol Thank you very much for this. I think this kind of image link should be included on django-prose-editor as an extension, I was trying to build my own then found this issue and your comment, exactly what I was looking for!

[corentinbettiol]

Hi @matthiask, I just realized that I was working on something that was already implemented (using django cabinet binding to ckeditor to add images to prose editor), thank you for this work, it's amazing!

However, I would like to know if I could also select the thumbnail size (from the django imagefield config) in order to display optimized images, instead of the full-size ones I sent to cabinet. It's something I'm accustomed to, from the other file manager I use during work hours (django-filer through djangocms-frontend image plugin, which allow to select the thumbnail size to use).

I also realized that I have an error while trying the feature on my dev server, because the image is added with a relative url (/media/cabinet/2026/04/002.webp), which the input does not seems to like. Is it possible to define the input as a text field to allow such urls to be used?

Are the caption, copyright info and alternative text going to be imported from cabinet if they are available?

[matthiask]

However, I would like to know if I could also select the thumbnail size (from the django imagefield config) in order to display optimized images, instead of the full-size ones I sent to cabinet. It's something I'm accustomed to, from the other file manager I use during work hours (django-filer through djangocms-frontend image plugin, which allow to select the thumbnail size to use).

That's an interesting question. I generally prefer linking to images from "real" file fields or foreign keys, not by adding <img> tags to some HTML blobs. Your request is very reasonable but I have to admit I don't immediately see a good way to implement this yet.

I also realized that I have an error while trying the feature on my dev server, because the image is added with a relative url (/media/cabinet/2026/04/002.webp), which the input does not seems to like. Is it possible to define the input as a text field to allow such urls to be used?

Yep, that should be possible too and is an oversight. I'm using an external media storage in my current projects so I haven't even noticed this, but I'd definitely appreciate a PR fixing this or I'll get to it myself later this or the following week (I hope).

Are the caption, copyright info and alternative text going to be imported from cabinet if they are available?

Oh, that's an excellent point, I didn't even think of this. We already have an attribute for the alt text and a contentDOM element for the caption so we could and should probably import the values from there. The default CKEditor 4 protocol doesn't allow passing along extra options, but since we're already shimming it anyway there's nothing stopping us from adding extra metadata in an additional argument. This does require a minor change in django-cabinet first and then we can do the handling in django-prose-editor. I think we should just pass an additional object (something like { caption, alternativeText, copyright }). If someone else wants to try implementing this, please go ahead!