Uploading & Downloading Files

How to implement file uploading and downloading in Hilla React applications.

Uploading Files
Downloading Files

Transferring files between the client and server is a common requirement in web applications. This page demonstrates how to implement file uploading and downloading in Hilla React applications.

Uploading Files

Hilla supports the MultipartFile class from Spring to handle file uploads. It maps to the standard File interface in the generated TypeScript code.

The following example demonstrates how to implement such a service and connect it to the Upload component in a view:

Source code

upload.tsx
import {
  Notification,
  Upload,
  type UploadElement,
  type UploadRequestEvent,
} from '@vaadin/react-components';
import { UploadService } from 'Frontend/generated/endpoints';

export default function UploadView() {
  const handleUploadRequest = async (e: UploadRequestEvent) => {
    e.preventDefault();

    const uploadRef = e.target as UploadElement;

    const fileId = await UploadService.uploadFile(e.detail.file);
    uploadRef.files = uploadRef.files.map((file) => {
      file.status = '';
      file.complete = true;
      return file;
    });

    Notification.show(`Received file: ${fileId}`);
  };

  return <Upload maxFiles={1} onUploadRequest={handleUploadRequest} />;
}
UploadService.java
package com.vaadin.demo.fusion.upload;

import java.util.UUID;

import org.jspecify.annotations.NonNull;
import org.springframework.web.multipart.MultipartFile;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;

@BrowserCallable
@AnonymousAllowed
public class UploadService {

    /**
     * Simulates uploading a file.
     *
     * @param file the uploaded file
     * @return an identifier for the uploaded file
     */
    @NonNull
    public String uploadFile(@NonNull MultipartFile file) {
        // handle the file as needed
        return file.getOriginalFilename() + '_' + file.getSize() + '_' + UUID.randomUUID();
    }
}

Downloading Files

Hilla endpoints only respond to POST requests and don’t support file downloads. Since Hilla applications use Spring, though, you can leverage Spring’s capabilities to implement file downloading.

Select the server mapping that best suits your application. Then create an ad-hoc endpoint to handle file downloads.

Next, configure security using the usual Spring Security configuration semantics.

In the following example, the view downloads a file and passes an ID as a parameter. The endpoint generates the file and sends it to the client. The security is configured so that only authenticated users can download files.

Source code

download.tsx
import { useSignal } from '@vaadin/hilla-react-signals';
import { TextField } from '@vaadin/react-components';

export default function DownloadView() {
  const id = useSignal('');

  return (
    <div className="flex p-m gap-m items-end">
      <TextField
        label="ID"
        value={id.value}
        onValueChanged={(e) => {
          id.value = e.detail.value;
        }}
      />
      {id.value && (
        <a href={`/download/${id.value}`} download>
          Download
        </a>
      )}
    </div>
  );
}
FileDownloadEndpoint.java
package com.vaadin.demo.fusion.download;

import org.springframework.core.io.ByteArrayResource;
import org.springframework.core.io.Resource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class FileDownloadEndpoint {

    @RequestMapping(value = "/download/{id}", method = RequestMethod.GET)
    public ResponseEntity<Resource> downloadFile(@PathVariable("id") String id) {
        String content = "File content for ID: " + id;
        Resource file = new ByteArrayResource(content.getBytes());

        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"file_" + id + ".txt\"")
                .body(file);
    }
}
SecurityConfig.java
package com.vaadin.demo;

import com.vaadin.flow.spring.security.VaadinWebSecurity;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;

@EnableWebSecurity
@Configuration
public class SecurityConfig extends VaadinWebSecurity {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable();

        // Restrict access to FileDownloadEndpoint to authenticated users
        http.authorizeHttpRequests(authorize -> authorize
                .requestMatchers(new AntPathRequestMatcher("/download/**")).authenticated());
    }

}

Docs

Docs

Uploading & Downloading Files

Uploading Files

Downloading Files