> Markdown version of [Uploading & Downloading](https://vaadin.com/docs/next/hilla/guides/uploads-downloads). Section index: [llms.txt](https://vaadin.com/docs/next/hilla/llms.txt)

# Uploading & 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.

## <a id="uploading-files"></a>Uploading Files

Hilla supports the [MultipartFile](https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/multipart/MultipartFile.html) class from Spring to handle file uploads. It maps to the standard [File](https://developer.mozilla.org/en-US/docs/Web/API/File) interface in the generated TypeScript code.

The following example demonstrates how to implement such a service and connect it to the [Upload](https://vaadin.com/docs/next/components/upload.md) component in a view:

`upload.tsx`

`upload.tsx`

```tsx
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`

`UploadService.java`

```java
@NonNull
public String uploadFile(@NonNull MultipartFile file) {
    // handle the file as needed
    return file.getOriginalFilename() + '_' + file.getSize() + '_'
            + UUID.randomUUID();
}
```

## <a id="downloading-files"></a>Downloading Files

Browser-callable services 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 Spring controller 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 controller generates the file and sends it to the client. The security is configured so that only authenticated users can download files.

`download.tsx`

`download.tsx`

```tsx
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>
);
```

`FileDownloadController.java`

`FileDownloadController.java`

```java
@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`

`SecurityConfig.java`

```java
// Restrict access to FileDownloadController to authenticated users
http.authorizeHttpRequests(authorize -> authorize
        .requestMatchers("/download/**").authenticated());
```