Upload de arquivo com Azure Function e Azure Blob Storage com JavaScript

Marco Bruno
CollabCode
Published in
3 min readDec 6, 2020

Versão original em inglês do Rémi Goyard.

Aqui eu tentarei explicar como usar a Azure Function para um upload de arquivo na Azure Blob Storage.

Eu assumo o seguinte:

  • Você já tenha um Azure Function Application (no meu exemplo será: mimiz-function)
  • Você já tenha um Storage Account (mimiz-storage-account) e um container (mimiz-container)
  • Talvez você já configurado seu ambiente local, mas nos usaremos um editor online para criar a function

Crie e configure a function

Primeiro, você precisa pegar a Access key do blob storage no portal da Azure, vá para o storage accoun e clique em Access keys na seção Settings que fica no menu a esquerda.

Em seguida copie uma das duas “Connection string”.

Depois vá para a Azure Function Application e clique em “Configuration” na seção Settings que está no menu a esquerda.

Crie um New application setting com um nome e o “Connection string” copiado anteriomente como valor.

Observação: O nome deve começa com AzureWebJobs, AzureWebJobsMimizStorage no meu exemplo

Agora nós criaremos a função de fato…

No painel a esquerda clique em Functions, depois clique em Add isso abrirá um painel a direita, selecione HTTP Trigger e nomeio sua function, mantenha o Authorization level para Function e clique em Create Function

Código da Function

Vá para a function criada e clique em Code + Test no menu a esquerda, certifique-se que o arquivo index.js esteja selecionado, então substitua o código com o seguinte:

Salve o arquivo.

Selecione o arquivo function.json e substiua-o pelo código a seguir:

Salve este arquivo também.

Agora a function está de pé e rodando, clique no “Get function URL” para pegar a URL da function, então use sua ferramenta favorita para testar a function (postman ou curl)

curl --location --request POST 'https://mimiz-functions.azurewebsites.net/api/saveToBlob?code=nVcbBIDUgpDaSKy0uMBKnrLdLKDwQt54vF3QYkUm1Hi2FTOuVjafaw==&filename=my-file.txt' --form '=@/absolute/path/to/file.txt'

Nome do Arquivo

Como você deve ter visto eu usei uma URL Query parameter para definir o filename, pois é mapeado para o context.bindings. no atributo "path": "mimiz-container/{filenaame}" , eu não encontrei nenhuma forma de fazer isso pelo nome do arquivo enviado … se alguém souber como fazer isso, por favor me envie uma mensagem!!

Se o nome do arquivo não é importante para você, então substitua o "path": mimiz-container/{filename}" por "path": "mimiz-container/{rand-guid}" e não terá que enviar o nome do arquivo com o uma Query Parameter.

É isso, sinta-se a vontade para clicar em clap, comentar ou mandar o link desse artigo para as pessoas. Espero que tenha ajudar você.

Lembre-se que este artigo como disse no começo é uma tradução do post feito pelo Rémi Goyard que você pode acessar pelo link a seguir:

--

--

Marco Bruno
CollabCode

Migrei de palhaço para Dev. Front-End/UX e agora eu trabalho como streamer de código