Upload a file

Questions
1

Hi,

I am in the process of upgrading a dashboard from V13 to 17, I can’t seem to work out how to create my own custom uploader.

Can someone point me in the direction of how to do a file uploader?

Ta

Darren

2

Where are you storing the file?

I usually use the file upload control:

But you need to wire the processing of the file and what you want with it yourself. The idea would be:

  • Create a custom endpoint in the management api
  • When someone uploads a file, call that endpoint and pass the file data
  • Do whatever you need to do with the file.
4

Creating your own file uploader in Angular 17 depends on whether you’re using the new reactive API (HttpClient with functions) or the classic approach. Starting with Angular 15+, developers are strongly encouraged to use `provideHttpClient()` instead of `HttpClientModule`.

5

Hi @Trizabella , welcome to the forum and thanks for chiming in to help!

Just a quick heads-up on the tech stack: since Darren is upgrading to Umbraco 17, Angular actually doesn’t apply here anymore.

Starting with version 14, Umbraco completely rebuilt the backoffice. They moved entirely away from Angular and shifted to a new architecture based on Web Components (using Lit and TypeScript). Because of that change, any custom dashboards or property editors in V17 need to be built natively as Web Components rather than Angular apps.

@Luuk 's suggestion to use the <uui-input-file> component from the Umbraco UI Library is the right path forward for the modern backoffice.

Regards,
Shekhar

6

I think we answered your question in your other topic: