# Easy image upload using render hooks

**URL:** <https://discourse.gohugo.io/t/easy-image-upload-using-render-hooks/52026>\
**Category:** tips & tricks\
**Created:** [October 19, 2024, 4:59am UTC](https://discourse.gohugo.io/t/easy-image-upload-using-render-hooks/52026 "2024-10-19T04:59:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dmyates](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dmyates/32/3477_2.png) [@dmyates](https://discourse.gohugo.io/u/dmyates)\
**Post date:** [October 19, 2024, 4:59am UTC](https://discourse.gohugo.io/t/easy-image-upload-using-render-hooks/52026/1 "2024-10-19T04:59:20Z")

</div>

I’ve been [playing](https://davidyat.es/2024/10/06/deprecating-shortcodes/) [around](https://davidyat.es/2024/10/18/render-hook-syntax-highlighting/) [with](https://davidyat.es/2024/10/19/render-hook-image-upload/) Hugo’s markdown render hooks recently to do some increasingly convoluted things. My most successful project is this:

[Hugo Image Uploader](https://github.com/dmyates/hugo-image-uploader)

It’s a way to upload images to `static` while writing a blog post, directly from the browser. It works by changing the HTML for images with empty paths and injecting some JavaScript when Hugo’s in dev mode + running a NodeJS upload server. The repo has a video demonstration.

The upload directory scheme is hard-coded to according to my own blog’s peculiarities and there’s no support for e.g. page bundles.

---

<div class="post-metadata">

**Author:** ![frjo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/frjo/32/18626_2.png) [@frjo](https://discourse.gohugo.io/u/frjo)\
**Post date:** [October 19, 2024, 8:05am UTC](https://discourse.gohugo.io/t/easy-image-upload-using-render-hooks/52026/2 "2024-10-19T08:05:50Z")

</div>

That is some pretty neat functionality. Really like that there are no dependencies!

Instead of adding it as a git submodule I would point people to add it as a Hugo module. A personal preference, but I have never liked git submodules. Hugo modules on the other hand are a pleasure to use.

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [October 19, 2024, 8:27am UTC](https://discourse.gohugo.io/t/easy-image-upload-using-render-hooks/52026/3 "2024-10-19T08:27:12Z")

</div>

brillant. thanks

---

<div class="post-metadata">

**Author:** ![dmyates](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dmyates/32/3477_2.png) [@dmyates](https://discourse.gohugo.io/u/dmyates)\
**Post date:** [October 19, 2024, 12:19pm UTC](https://discourse.gohugo.io/t/easy-image-upload-using-render-hooks/52026/4 "2024-10-19T12:19:38Z")

</div>

Thank you! It does depend on nodejs, but I strove to avoid making anyone run `npm i` in their Hugo site directory. Thanks for the tip on Hugo modules, I’ve updated the readme with some alternatives for managing the dependency.