Upload with react

bit of a noob question so forgive me. im used to in react uplaoding a file with onChange handler. with the Upload component, i cant seem to get the upload working and the docs dont seem to provide the description on how to achieve this?

cheers!

Docs could definitely be improved, this section kind of outlines what to do: https://hilla.dev/docs/react/components/upload#handling-upload-requests-client-side-only
So you would want to create some upload handler in your backend, for example a REST controller. The controller should have a method for receiving file data that is mapped to some URL like /upload and HTTP method like POST.
Then configure the URL and method in the component:

<Upload target={'/upload'} method={'POST'}></Upload>

By default, the component should then automatically upload files to that URL when a file is selected.

i was under the assumption that the desired pattern to follow would be to import the endpoints to use from your server side java endpoints. unless i use the target as the endpoint handler… all i was trying to achieve is to have a further button which then launches the uri call to the backend, so state is needed to acheive that

That should be possible as well, but would void some features of the upload like showing upload progress, as it doesn’t have control over the actual upload anymore.
One approach is to base64 encode the file content and send that to a Hilla endpoint. Not sure if Hilla endpoints support byte[], otherwise that might be an options as well. Accessing the file data and preventing the upload component from starting a request itself should look like this:

  <Upload
    onUploadBefore={(event) => {
      event.preventDefault();
      const file = event.detail.file;
      file.arrayBuffer(); // Do something with the file data
    }}
  />;

Using an endpoint as a target directly is not straight-forward I believe, as the actual URL for endpoint calls is kind of cryptic. There isn’t an out of the box integration of the upload component with endpoints at the moment unfortunately.

thanks for the input. i sorted this by creating my own rest endpoint and using the action=/api/upload to fix this with a File multipart form. this works and i think for the time being i will stick to it

Sounds good, I think that is the cleanest approach at the moment

thanks for your help :+1: