Upload a file in front end

Enonic version: Enonic XP 6.14.1
OS: Windows 10


How can I add a component to upload a file in front end? Could somebody help me up?


Hi Jorge,

I haven’t tried this myself, but instead of no answer you’ll at least get some directions until somebody else steps in.

You’ll be using the lib-content (docs) to create a content inside Content Studio from the upload. That could be the form data (inputs). The file itself would be created as an attachment on this content. You will need to make sure your form posts multipart content, and have the upload button, you’ll read the image from the form and store it.


But, again, I’m only vaguely familiar with the theory behind it, I haven’t tried it myself. But it’s absolutely doable, and many sites out there lets visitors upload files.

Hi Bobby,

Thanks for replying. Is there any way I could see a full example of a simple form in front end? even if it’s just a textbox which I could complete with other elements as a file uploader.


Hi Jorge

We have an app that you can investigate to see how upload of local files works: https://market.enonic.com/vendors/alan-semenov/com.enonic.app.imagexpert. This is a simple image library where you can upload local images to XP storage and categorise them into albums.

Client-side code that submits data is here (createNewAlbum method).

Backend service that does all the saving is here

Good luck!

1 Like

Thanks a lot. I’ll have a look.

I would be really careful about storing user-generated data through the content-lib, as this is desinged for editorial content. However using the node api should be perfect.

Check out this app, it stores audio files and some properties in the node API: