CodeIgniter RestServer

[Série RestServer] Criando um restserver com CodeIgniter – Upload de imagem

Chegamos ao último post da primeira parte da série “Criando um restserver com CodeIgniter” e pra fechar vamos implementar o upload de imagem para o avatar do usuário.

Para que o upload funcione dentro da estrutura da nossa API vamos precisar de poucas modificações no código já existente.

Atualizando a view

Na view, para que seja possivel fazer o upload de imagem, vamos adicionar ao elemento form o atributo “enctype=multipart/form-data” para que o mesmo aceite o envio de arquivos através do input file.

Também será necessário adicionar o campo input file para que a foto do usuário seja selecionada e enviada.

Veja a seguir como ficou o codigo do formulário após essas alterações. Repare que as mudanças citadas ocorreram nas linhas 9 e 38.

Com a view alterada é necessário aplicar algumas alterações no arquivo JavaScript para o upload seja processado.

Abra o arquivo assets/js/actions.js e atualize-o conforme o código a seguir.

As mudanças feitas foram:

  • linha 37: remoção do código de processamento do upload do evento click do botão Salvar e substituição pelo chamada do evento submit do formulário
  • linha 43: adição de bind para o método submit do formulário, de modo que o processamento seja feito através de uma requisição ajax
  • linha 46: mudança do serialize para o new FormData()
  • linha 104: bind para aplicar um reset no formulário sempre que a modal for fechada

Ao tentar editar um usuário o campo para upload da imagem não será exibido, isso está sendo feito por conta do método PUT usado para identificar a ação a ser executada não suporta envio de arquivos, somente o POST.

Para fazer a atualização da imagem do usuário você pode criar uma view e um método independente para esse processamento, usando POST para enviar as informações da imagem.

Feitas essas alterações no frontend, vamos executar as alterações no backend.

Atualizando o controller Usuarios

No controller Usuarios vamos fazer uma alteração no método index_post e criar um método privado para processar o upload.

O método privado para processamento do upload irá se chamar UploadImage e receberá como parâmetro o nome do campo input file.

Veja a seguir o código do método de processamento do upload:

Após criar o método UploadImage, vá até o método index_post e aplique as alterações conforme o código mostrado a seguir.

  • Linha 10: foi adicionado um IF para verificar se a imagem foi ou não enviada
  • Linha 11: se a imagem foi enviada então processa o upload e armazena o retorno na variável $upload

E assim concluímos as alterações para o upload da imagem do usuário e a primeira parte da nossa série.

A partir do proximo post começamos a segunda parte, onde vamos abordar a parte de autenticação e limitação das requisições.

Até o próximo post.

 

Veja o código-fonte no GitHub