Bora fazer upload de arquivos no CAP?

Bem com vocês?

Faz um tempo desde a última vez que mostrei um CRUD no CAP, agora vamos fazer algo mais legal como fazer upload/download de arquivos? Então bora lá.

Para isso precisa de alguns pré-requisitos, vou deixar os artigos anteriores para que possa instalar e ter uma noção básica do CAP para depois seguir esse

Criando nosso "Olá Mundo" no CAP

Bora mais um pouquinho de CAP

SAP Learning sobre CAP

Repositório desse projeto

Então bora começar. Primeiro vamos gerar o projeto inicial, para isso rode o comando no prompt de comando do Visual Code:

cds init upload-arquivos        

e depois abra a pasta criada no VSCode e instale as dependênciascom:

npm install        

Se tudo deu certo vai ter essa carinha

Vamos configurar o banco de dados, para esse exemplo vou usar o SQLITE. Rode o comando na raiz do seu projeto

cds add sqlite        

ele vai ser adicionado na devDependencies no arquivo package.json conforme imagem abaixo

agora vamos configurar nosso banco de desenvolvimento. Adicione esse trecho no final do arquivo package.json

"cds": {
        "requires": {
            "[development]": {
                "db": {
                    "kind": "sqlite",
                    "credentials": {
                        "url": "sqlite.db"
                    }
                }
            }
        }
    }        

Agora vamos criar nossa entidade pasta db/ para guardar nossos arquivos, para isso crie um arquivo chamado schema.cds e adicione o seguinte código

using {
    cuid,
    managed
} from '@sap/cds/common';

namespace com.fabricio.db;


define entity Files: cuid, managed {
    file: LargeBinary  @Core.MediaType: fileType @Core.ContentDisposition.Filename: fileName  @Core.ContentDisposition.Type: 'inline';
    fileType : String       @Core.IsMediaType @readonly;
    fileName : String;
}        

para o campo "file" estamos criando ele com o tipo LargeBinary para o conteudo do arquivo.

• @Core.MediaType : indica que o elemento contém dados de mídia (diretamente ou usando um redirecionamento).
• @Core.ContentDisposition.Filename : indica que se espera que o elemento seja exibido como um anexo, que é baixado e salvo localmente.
• @Core.ContentDisposition.Type : pode ser usado para instruir o navegador a exibir o elemento inline, mesmo se @Core.ContentDisposition.Filename for especificado, configurando como inline . Se omitido, o comportamento será @Core.ContentDisposition.Type: 'attachment'.

Salve e rode o comando

cds deploy        

se tudo está ok será criado uma tabela no nosso banco de dados local. Esses campos que estão ai mas não foram especificados na ENTITY são aspects, eles estão como CUID e MANAGED

Agora vamos criar nosso serviço, para isso cria um arquivo chamado "service.cds" na pasta srv/

e adicione o seguinte trecho

using {com.fabricio.db as db} from '../db/schema';


define service FileService {
    entity files as projection on db.Files;
}

annotate FileService.files with @(odata.draft.enabled);        

agora rode mais uma vez o comando

cds deploy        

Por causa do odata.draft.enabled será criada mais duas tabelas no nosso banco para a funcionalidade de rascunho

Podemos testar via postaman mas vamos criar o app fiori para testar via app nossa funcionalidade de upload. Pressione o atalho CRTL + SHIFT + P e pesquise por:

Fiori: Open Application Generator

Escolha o template Lit Report Page e clique em Next

Escolha as opções abaixo( dependendo da versão ele preenche automaticamente as opções do proje e o Odata service ) e clique em Next

Eu vou deixar as opções padrões e clique em Next

Mudei o Module name e Application title para os outros mantive o que veio por padrão e clique em Finish, vai demorar um pouco pois o generator vai instalar as dependências

Instalando

Se tudo deu certo, vamos ter nosso app instalado na aba app/ do projeto

E já foi gerado as annotations para a criação da tela do Fiori

Abra o console novamente e digite:

cds deploy        

e em seguida

cds watch        

ou

npm start        

abra o caminho do http://localhost:XXXX no seu navegador de preferência

Clique no projeto do webapp

Teste