Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Upload de imagem e JSON com Token de Autenticação

Olá pessoal!

Criei uma aplicação que realiza o cadastro de um produto, possui um formulário e um upload de arquivo, onde é possível carregar a imagem do produto. Porém estou tendo problemas com a conexão com a API, ela possui uma autenticação via JWT, no momento deixando o tratamento do CORS para aceitar qualquer requisição, então acredito que o problema está sendo no formato do arquivo que estou enviando do front para o back-end, segue o código abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Acima é a função de upload do front-end, onde tenho um produto que formato ele para um formato JSON e o arquivo, no Headers estou tentando passar o Token, porém se eu passo o headers somente assim, ele não reconhece o formato do arquivo, conforme abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

E se eu inserir no headers o 'Content-Type':'application/json' ou 'multpar/fomr-data' ele me retorna erro 500, não consegue parsear o multpart:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

e abaixo é o meu endpoint do back-end:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Sabem me dizer a melhor forma de fazer este tipo de conexão e onde estou errando na configuração? Realizei o teste do back-end com o Postman e por lá ele funciona certinho, passando um form-data com um multpart e um Json, então acredito que pode ser uma questão do envio do front, mas não sei ao certo.

Agradeço desde já!

1 resposta
solução!

Pessoal, consegui solucionar o problema!

Ele estava no back-end, afinal o formdata (formato enviado pelo front) aceita formatos "string" e "Blob" e no back-end a API estava esperando um tipo ProductForm (entidade criada para armazenar os dados do produto). Por esse motivo, quando batia no back-end retornava o erro 500.

Nem é preciso enviar o "Content-Type" no cabeçalho, o próprio navegador já faz isso, apenas o Token (caso sua API esteja configurada para este tipo de autenticação).

Então até deixo aqui a dica de como fazer um upload de arquivo + os dados do formulário em um formato Json, o front ficou assim:

Enviando o |Token no header apenas e os dados em formato Json (vai considerar como String na verdade) e o file.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

E no back-end assim:

Usei a biblioteca Gson para converter a String que recebo um objeto Json onde consigo ter acesso aos atributos do produto, nome, preço e etc.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Até mais!