How to build a website that user can upload images with hugo?

Hello guys, I need some help about uploading images with hugo.

I want to build a simple website that users can upload their images and download the images after some processing. Can I do this with hogo?

Really thank you guys!

If it were me, I’d take a look at the PHP and Perl scripts over at HotScripts and choose something that suited my needs.

Then, I’d either use Hugo to build the other pages or try to integrate the script into my Hugo site build. The latter would likely be easier with PHP, as it’s basically HTML with extra code and a different file extension.

You might also be able to find a remotely hosted service you could just link to, but that would likely have a price attached due to the bandwidth used.

Thank your reply. I don’t have any experience about PHP or Perl. But I’m familiar with Python. Do you have some tips about how to integrate the script into Hugo site?

I’m new to Hugo myself, so I only have a vague idea of how to integrate scripts into the static sites it builds.

Perl is more similar to Python than PHP is. It will likely be harder to find a host that supports Python scripts if you really want to use that. If you could find an existing script that does what you want, you wouldn’t need to know the language well.

You’d likely find it easier to put a Perl or Python script in the static directory so that Hugo copies it to your public directory without changes. Your host will likely want the script uploaded inside a cgi-bin directory and have the file permissions set to 755.

You could do the same with a PHP document, or create a new section for it, so Hugo could add theme styling for you. You may need to experiment with the latter method more to prevent Hugo breaking the PHP code. PHP documents can usually be uploaded anywhere in the public_html directory of your hosting account and rarely need the permissions changed (check the script docs though).

I’ve used WordPress for this purpose, where users uploaded images, then I pull them over into Hugo at build time using the REST API and getJSON.

I am a fan of media processing in WordPress, since one can hook into the upload and do all kinds of neat stuff with it. :slight_smile:

OK, I’ll try to find some useful scripts. Thank you.:grin:

Could you give me some details or a tutorial link? It seems a bit complicated for me. I want to achieve the purpose quickly. :laughing:

Sorry, that isn’t likely to happen. You’d need to know about WordPress, and I don’t recommend you taking that path if you are DIY and short on time.

My recommendation is either to choose something other than Hugo, as it doesn’t do what you want, or hire a developer to help ya out. :slight_smile:

If you want to let users to upload files on a HUGO site you are going to need an API to take care of the upload and a place to store them. I know of a tool called Upload care that may be just what you need. You can embed a form on your website where users can load their images and you can make automatic transformations to the images, or even let users make them themselves. It looks pretty simple. They even have a free plan. Never tried it myself though.

I had to dig for that! I didn’t remember the name of that tool. I hope it helps! And please let us know if it worked for you.

It’s relatively simple to integrate something that uses javascript, to a static site like one generated by Hugo.

One example is this:

https://fineuploader.com/index.html

You’d need to make sure the script can write to whatever folder you’ll store the images in, but this uses the viewer’s browser’s javascript to resize the images.

These PHP tutorials and JavaScript tutorials might help you get started.