vaadin / hilla

Build better business applications, faster. No more juggling REST endpoints or deciphering GraphQL queries. Hilla seamlessly connects Spring Boot and React to accelerate application development.
https://hilla.dev
Apache License 2.0
894 stars 56 forks source link

Support uploading files/blobs to the server #532

Open tarekoraby opened 2 years ago

tarekoraby commented 2 years ago

Is your feature request related to a problem? Please describe. If I want to enable the user to upload files to the server, I currently have to create a separate Spring REST endpoint to do that (as described in this cookbook recipe). This is, however, not obvious to the developer as it is not consistent with the way client-server communication works in Hilla endpoints.

Describe the solution you'd like It would be nice if one could send files to the server from an upload component just by calling a Hilla endpoint method that looks something like:

public void uploadFile(byte[] file)
Legioth commented 2 years ago

Even though sending binary data in an efficient way means that the request would have to be handled in a slightly special way (multipart), we should probably make sure that such methods otherwise work like any other Hilla RPC method. This does for instance man that it should also be possible to pass multiple arguments of different types, passing multiple byte[] arguments, and having a return value.

A more demanding example endpoint method would thus look like this

public String sendThings(byte[] file1, int somethingElse, byte[] file2)
gitgdako commented 1 year ago

Using the current implementation we managed to create a Hilla Endpoint using a byte[] parameter for the file data (which afaik is also used by the Vaadin File Upload component https://hilla.dev/docs/react/components/upload). Frontendwise a standard html input type='file' yields a blob which is converted using Array.from(new Uint8Array(event.target?.result as ArrayBuffer)) As stated above this isnt documented very well and not intuitive at all as well as not using the more modern approach of multipart data. We would suggest using any multipart implementation (like org.springframework.web.multipart.MultipartFile) which is renders an endpoint that accepts a blob/js file