A documentação da API usa **Swagger UI** e **ReDoc**, e cada um deles precisa de alguns arquivos JavaScript e CSS.

Por padrão, esses arquivos são fornecidos por um <abbr title="Content Delivery Network: Um serviço, normalmente composto por vários servidores, que fornece arquivos estáticos, como JavaScript e CSS. É comumente usado para providenciar esses arquivos do servidor mais próximo do cliente, melhorando o desempenho.">CDN</abbr>.

## Defina parâmetros de `File` e `Form`

Crie parâmetros de arquivo e formulário da mesma forma que você faria para `Body` ou `Query`:

```Python hl_lines="8"
{!../../docs_src/request_forms_and_files/tutorial001.py!}
```

Os arquivos e campos de formulário serão carregados como dados de formulário e você receberá os arquivos e campos de formulário.

E você pode declarar alguns dos arquivos como `bytes` e alguns como `UploadFile`.

# Arquivos Estáticos

Você pode servir arquivos estáticos automaticamente de um diretório usando `StaticFiles`.

## Use `StaticFiles`

* Importe `StaticFiles`.
* "Monte" uma instância de `StaticFiles()` em um caminho específico.

```Python hl_lines="2  6"
{!../../docs_src/static_files/tutorial001.py!}
```

/// note | "Detalhes técnicos"

Você também pode usar `from starlette.staticfiles import StaticFiles`.

/// note | "Detalhes técnicos"

Os dados dos formulários são normalmente codificados usando o "tipo de mídia" `application/x-www-form-urlencoded`.

 Mas quando o formulário inclui arquivos, ele é codificado como `multipart/form-data`. Você lerá sobre como lidar com arquivos no próximo capítulo.

///

## Separando testes

Em uma aplicação real, você provavelmente teria seus testes em um arquivo diferente.

E seu aplicativo **FastAPI** também pode ser composto de vários arquivos/módulos, etc.

### Arquivo do aplicativo **FastAPI**

Digamos que você tenha uma estrutura de arquivo conforme descrito em [Aplicativos maiores](bigger-applications.md){.internal-link target=_blank}:

```
.
├── app

de *operações de rota*

Mais para a frente, quando você ler sobre como estruturar aplicações maiores ([Bigger Applications - Multiple Files](../../tutorial/bigger-applications.md){.internal-link target=_blank}), possivelmente com múltiplos arquivos, você irá aprender a declarar um único parâmetro `dependencies` para um conjunto de *operações de rota*....

um rastreador (Crawler), que pode rastrear documentos em um [servidor web](https://fess.codelibs.org/14.17/admin/webconfig-guide.html), [sistema de arquivos](https://fess.codelibs.org/14.17/admin/fileconfig-guide.html) ou [Data Store](https://fess.codelibs.org/14.17/admin/dataconfig-guide.html) (como CSV ou banco de dados). Muitos formatos de arquivos são suportados, incluindo (mas não limitado a): Microsoft Office, PDF e zip.

*[Fess Site Search](https://github.com/codelibs/fess-site-search)*...

## Exemplo

Para um exemplos simples, vamos considerar uma estrutura de arquivos semelhante ao descrito em [Bigger Applications](../tutorial/bigger-applications.md){.internal-link target=_blank} e [Testing](../tutorial/testing.md){.internal-link target=_blank}:

```
.
├── app
│   ├── __init__.py
│   ├── main.py
│   └── test_main.py
```

O arquivo `main.py` teria:

```Python
{!../../docs_src/async_tests/main.py!}
```

ionsStart:"Selecione pelo menos",badNumberOfSelectedOptionsEnd:" alternativa(s)",badAlphaNumeric:"Use somente caracteres alfanuméricos (letras a-z e números)",badAlphaNumericExtra:" e",wrongFileSize:"O arquivo selecionado é maior que o tamanho máximo permitido (%s)",wrongFileType:"Somente arquivos %s são permitidos",groupCheckedRangeStart:"Por favor, escolha entre ",groupCheckedTooFewStart:"Por favor, escolha pelo menos ",groupCheckedTooManyStart:"Por favor, escolhe no máximo ",groupCheckedEnd:"...

Então você poderá voltar e ver exatamente o que precisar.

## Rode o código

Todos os blocos de código podem ser copiados e utilizados diretamente (eles são, na verdade, arquivos Python testados).

Para rodar qualquer um dos exemplos, copie o codigo para um arquivo `main.py`, e inicie o `uvivorn` com:

<div class="termy">

```console
$ uvicorn main:app --reload