Enviado foto para backend

Question

Temos um projeto onde o cliente ira usar o frontend e tirar uma foto de seu celular e envia-la para nossa web.api.

Do lado da Web.api, como recebo este parametro (foto) ?
Sera um caminho da imagem (path) OU sera o arquivo da imagem propriamente dito ?

Como isso funciona ?

Abracos

Answer 1

Olá,

Pode utilizar o MultipartFormDataProvider:

Veja a documentação:

https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2

Aqui também:

https://jamessdixon.wordpress.com/2013/10/01/handling-images-in-webapi/

Eu particularmente utilizo uma propriedade byte[] e na View eu transformo a imagem em base64String e alimento no JSON... Funciona bem também.

Att,

---

Fabio Rosa.

Answer 2

Você pode fazer da seguinte maneira.

1. Pega a foto no frontend e transforma em base64

<div class="form-group">
    <label for="exampleFormControlFile1">Obter imagem</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1" onchange="handleFileInput(event.target.files)">
</div>
<span id="base64Content"></span>

function handleFileInput(files) {
    var fileToUpload = files.item(0);
    var reader = new FileReader();
    var fileData = {};
    reader.readAsDataURL(fileToUpload);
    reader.onload = () => {
        fileData.name = fileToUpload.name;
        fileData.type = fileToUpload.type;
        fileData.value = reader.result.split(",")[1]
        $('#base64Content').html(fileData.value);
    };

}

Envia esse objeto ao WebApi e você pode salvar aonde bem entender. Código para salvar no Blob do Azure

[HttpPost]
[Route("upload-picture")]
public async Task<IActionResult> UploadFile([FromBody] FileUpload file)
{
    if (!file.fileType.Contains("image"))
    {
        return BadRequest("Invalid filetype");
    }

    var container = await GetBlobContainer();
    var newPicture = await Upload(file, container);
    // Url da imagem
    return Ok(newPicture.StorageUri.PrimaryUri.AbsoluteUri);
}

private async Task<CloudBlobContainer> GetBlobContainer()
{
    var storageCredentials = new StorageCredentials("**Usuario**", "**Senha**");
    var cloudStorageAccount = new CloudStorageAccount(storageCredentials, true);
    var cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();
    var container = cloudBlobClient.GetContainerReference("images");
    await container.CreateIfNotExistsAsync();
    return container;
}

private static async Task<CloudBlockBlob> Upload(FileUpload file, CloudBlobContainer container)
{
    // Upload the new one.
    var newImageName = Guid.NewGuid() + file.fileType.Replace("image/", ".");
    var newPicture = container.GetBlockBlobReference(newImageName);
    byte[] imageBytes = Convert.FromBase64String(file.value);
    newPicture.Properties.ContentType = file.fileType; //.Replace("image/", "");
    await newPicture.UploadFromByteArrayAsync(imageBytes, 0, imageBytes.Length);
    return newPicture;
}

public class FileUpload
{
    public string filename { get; set; }
    public string fileType { get; set; }
    public string value { get; set; }
}

Você vai precisar da referencia do WindowsAzure.Storage, disponível no Nuget

---

Espero ter ajudado! Se consegui, não esquece de marcar no fórum como útil! Obrigado :)
#fullstack dev - MCSA, MCTS and actually blogging at www.saindodacaixinha.com.br