Nos últimos meses, detalhei como os desenvolvedores podem concluir uma variedade de tarefas usando o Cloudinary, um provedor de hospedagem, fornecimento e transformação de imagens (e áudio e vídeo). As bibliotecas de integração do lado do cliente e os SDKs do Cloudinary simplificam a integração com a plataforma de desenvolvimento de sua escolha: Ruby on Rails, PHP, Node.js, Angular, .NET, Python & Django, jQuery, Java, Scala, Android, iOS e muito mais. Depois de se inscrever em uma conta do Cloudinary, você pode fazer upload de suas imagens usando uma de suas muitas APIs, mas hoje vou apresentá-lo ao Image Uploader – um método para fazer upload de mídia de qualquer usuário diretamente para o Cloudinary, ignorando assim seus próprios servidores, o que pode reduzir o desempenho e economizar tempo!
Instalação
Comece fazendo login em sua conta (ou inscrevendo-se!), visitando a página Página de configuraçõese clique em “Enable unsigned uploading” (Ativar upload não assinado).
Uma string predefinida de upload será fornecida ao senhor, permitindo que carregue imagens no Cloudinary sem expor sua chave de API.
Carregador de imagens jQuery
O Cloudinary permite que os desenvolvedores façam upload de imagens fornecidas pelo usuário (ou “não assinadas”, já que o titular da conta não está fazendo upload) diretamente para o Cloudinary – não é necessário que o seu servidor cuide de nada disso. O Cloudinary fornece um plug-in jQuery para todo esse trabalho, portanto, adicione esses recursos JavaScript à página:
<script src="https://davidwalsh.name/jquery.min.js" type="text/javascript"></script> <script src="jquery.ui.widget.js" type="text/javascript"></script> <script src="jquery.iframe-transport.js" type="text/javascript"></script> <script src="jquery.fileupload.js" type="text/javascript"></script> <script src="jquery.cloudinary.js" type="text/javascript"></script>
A $.cloudinary é adicionado ao jQuery, que contém uma série de métodos úteis para recuperar e até mesmo enviar imagens para o Cloudinary; para enviar uploads para o Cloudinary do lado do cliente, primeiro anexe o widget de upload do Cloudinary ao seu formulário:
$('#upload_form').append(
// First the "upload preset string", then your cloud name
$.cloudinary.unsigned_upload_tag('zcudy0uz', { cloud_name: 'demo' })
);
O upload é acionado depois que um arquivo é selecionado (ou arrastado). Um input é adicionado automaticamente ao formulário, cujo valor identifica a imagem carregada para referência em seu outro código. O senhor também receberá cloudinarydone e cloudinaryprogress eventos durante as etapas do upload, a la:
/*
Events!
- Update a progress bar upon "cloudinaryprogress" event
- Add new thumbnail image to gallery when complete!
*/
$('.upload_field').unsigned_cloudinary_upload('zcudy0uz',
{ cloud_name: 'demo', tags: 'browser_uploads' },
{ multiple: true }
)
.bind('cloudinaryprogress', function(e, data) {
$('.progress_bar').css('width',
Math.round((data.loaded * 100.0) / data.total) + '%');
})
.bind('cloudinarydone', function(e, data) {
// Image upload complete! Add it to gallery with nice animation!
$('.thumbnails').append($.cloudinary.image(data.result.public_id,
{ format: 'jpg', width: 150, height: 100,
crop: 'thumb', gravity: 'face', effect: 'saturation:50' } ))}
);
cyber
As configurações CORS do Cloudinary permitem o upload entre origens e o carregador de imagens é compatível com todos os principais navegadores! Se quiser ver o carregador de imagens em ação, confira este exemplo de projeto de álbum de fotos.
Como fazer upload para o Cloudinary no sistema operacional móvel nativo
Se o senhor fornecer um aplicativo móvel, seja para iOS ou Android, também poderá usar a API do Cloudinary para uploads de imagens não assinadas:
Android
InputStream getAssetStream(String filename) throws IOException {
return getInstrumentation().getContext().getAssets().open(filename);
}
Map config = new HashMap();
config.put("cloud_name", "demo");
Cloudinary cloudinary = new Cloudinary(config);
cloudinary.uploader().unsignedUpload(getAssetStream("sample.jpg"), "zcudy0uz",
Cloudinary.asMap("public_id", "user_sample_image_1001", "tags", "android_upload"));
iOS
NSData *imageData = [NSData dataWithContentsOfFile:imageFilePath];
[uploader unsignedUpload:imageData uploadPreset:@"zcudy0uz" options:[NSDictionary dictionaryWithObjectsAndKeys:@"user_sample_image_1002", @"public_id", @"tags", @"ios_upload", nil] withCompletion:^(NSDictionary *successResult, NSString *errorResult, NSInteger code, id context) {
if (successResult) {
NSString* publicId = [successResult valueForKey:@"public_id"];
NSLog(@"Upload success. Public ID=%@, Full result=%@", publicId, successResult);
CLTransformation *transformation = [CLTransformation transformation];
[transformation setWidthWithInt: 150];
[transformation setHeightWithInt: 100];
[transformation setCrop: @"fill"];
[transformation setGravity:@"face"];
NSLog(@"Result: %@", [cloudinary url:publicId options:@{@"transformation": transformation, @"format": @"jpg"}]);
} else {
NSLog(@"Upload error: %@, %d", errorResult, code);
}
} andProgress:^(NSInteger bytesWritten, NSInteger totalBytesWritten, NSInteger totalBytesExpectedToWrite, id context) {
NSLog(@"Upload progress: %d/%d (+%d)", totalBytesWritten, totalBytesExpectedToWrite, bytesWritten);
}];
Cloudinary tem tudo o que o senhor precisa para fazer upload de imagens em massa na Web, no servidor e em dispositivos móveis – um provedor completo!
O conteúdo fornecido pelo usuário, especialmente no caso de mídia, pode ser difícil de lidar. Seja no armazenamento, na entrega ou na otimização, lidar com isso por conta própria pode ser um desastre: vários serviços, segurança, otimização, hospedagem etc. O Cloudinary, com suas APIs flexíveis, pode ajudar. Confira o Cloudinary hoje mesmo!