Merge branch 'latest' into docs/replace-hilla-nonnull-usages

Author: taefi

articles/building-apps/cookbook.adoc

@@ -0,0 +1,19 @@
+---
+title: Cookbook
+page-title: Vaadin Cookbook | Code snippets for common tasks
+description: Code snippets for common tasks
+meta-description: A collection of solutions to common use cases you run into when developing business web applications with Vaadin.
+order: 50
+---
+
+
+= Vaadin Cookbook
+
+[IMPORTANT]
+Some solutions in this cookbook may not follow the latest best practices.
+
+The https://cookbook.vaadin.com/[Vaadin Cookbook] is a collection of solutions for common challenges in business web application development with Vaadin.
+
+Solutions are implemented using Java, TypeScript, or a combination of both, depending on what's most suitable. The emphasis is on solving the problem, rather than the implementation details.
+
+https://cookbook.vaadin.com/[Open Cookbook, role="button primary water"]

articles/hilla/guides/uploads-downloads.adoc

@@ -1,15 +1,42 @@
 ---
-title: File Downloading
-page-title: How to implement file downloading in Hilla React applications | Vaadin
-description: How to implement file downloading in Hilla React applications.
-meta-description: Learn how to implement file downloading in Vaadin Hilla.
+title: Uploading pass:[&] Downloading
+page-title: How to implement file uploading and downloading in Hilla React applications | Vaadin
+description: How to implement file uploading and downloading in Hilla React applications.
+meta-description: Learn how to implement file uploading and downloading in Vaadin Hilla.
 order: 73
 ---
 
 
-# Downloading Files
+= Uploading & 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.
+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.
+
+
+[role="since:com.vaadin:[email protected]"]
+== Uploading Files
+
+Hilla supports the https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/multipart/MultipartFile.html[MultipartFile] class from Spring to handle file uploads. It maps to the standard https://developer.mozilla.org/en-US/docs/Web/API/File[File] interface in the generated TypeScript code.
+
+The following example demonstrates how to implement such a service and connect it to the <</components/upload#,Upload>> component in a view:
+
+[.example]
+--
+[source,tsx]
+.`upload.tsx`
+----
+include::{root}/frontend/demo/fusion/forms/upload/upload.tsx[tags=snippet,indent=0]
+----
+[source,java]
+.`UploadService.java`
+----
+include::{root}/src/main/java/com/vaadin/demo/fusion/upload/UploadService.java[tags=snippet,indent=0]
+----
+--
+
+
+== 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.
 

articles/hilla/lit/guides/endpoints.adoc

@@ -417,6 +417,31 @@ When a request is cancelled programmatically, the endpoint call promise resolves
 endif::[]
 
 
+== Request Options
+
+All regular Hilla requests support some options as the last parameter. They're listed in the sections here.
+
+
+=== Abort Signal
+
+You can pass an https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal[AbortSignal] object to the call to cancel a request. This is useful when you want to cancel a request, perhaps because you've decide you don't need it after all or because it's taking too long.
+
+[source,typescript]
+----
+include::{root}{root-fix}/frontend/demo/fusion/options/request-options.ts[tag=abort,indent=0]
+----
+
+
+=== Suppress Connection State
+
+By default, when a request takes too long, Hilla shows a progress bar to the user at the top of the page. You can suppress this by setting the `mute` option to `true`.
+
+[source,typescript]
+----
+include::{root}{root-fix}/frontend/demo/fusion/options/request-options.ts[tag=mute,indent=0]
+----
+
+
 == Code Completion in IDEs
 
 As you can see in the earlier [filename]`CounterEndpoint.ts` example, the Javadoc for the `@Endpoint` class is copied to the generated TypeScript file, and the type definitions are maintained. This helps code completion to work -- at least in Visual Studio Code and IntelliJ IDEA Ultimate Edition.

articles/tools/designer/getting-started/build-your-contact-form.adoc

@@ -1,6 +1,6 @@
 ---
 title: Build Contact Form
-page-title: How to use build a contact form with Vaadin Designer
+page-title: How to build a contact form with Vaadin Designer
 meta-description: Learn how to build a contact form with Vaadin Designer. Follow this step-by-step guide to create visually stunning UIs with ease.
 order: 7
 ---

frontend/demo/fusion/forms/upload/upload.tsx

@@ -0,0 +1,28 @@
+import {
+  Notification,
+  Upload,
+  type UploadElement,
+  type UploadRequestEvent,
+} from '@vaadin/react-components';
+import { UploadService } from 'Frontend/generated/endpoints';
+
+export default function UploadView() {
+  // tag::snippet[]
+  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} />;
+  // end::snippet[]
+}

frontend/demo/fusion/options/request-options.ts

@@ -0,0 +1,23 @@
+import { SlowService } from 'Frontend/generated/endpoints';
+
+export function abortCall() {
+  // tag::abort[]
+  const controller = new AbortController();
+
+  SlowService.takesTime({ signal: controller.signal }).then((msg) => console.log(msg));
+
+  // The `AbortController` can be used to abort the request, for example after a timeout
+  // or an user action like a button click
+  const timeoutId = setTimeout(() => {
+    controller.abort();
+  }, 5000);
+  // end::abort[]
+
+  return () => clearTimeout(timeoutId);
+}
+
+export function muteCall() {
+  // tag::mute[]
+  SlowService.takesTime({ mute: true }).then((msg) => console.log(msg));
+  // end::mute[]
+}