Introdução

O Widget de Upload permite que você insira em sua página um componente que permite o envio (upload) de conteúdo de usuários a partir desta página para o seu projeto no SambaVídeos.

Autenticação

A autenticação do widget de upload é realizada através do upload_key.

Tal chave é vinculada a um único projeto, e pode ser criada/gerenciada a partir da área de configurações do SambaVídeos.

Um exemplo seria a seguinte chave: 405129a59dfcdb29fd287d606d0da3d8

Instalação

Nosso widget se encontra no seguinte endereço:

file:///home/diegomd/dev/Sambavideos/uploadWidget/sambaUploadWidget.js

A partir de sua ingestão em sua página, é preciso realizar os seguintes passos para o funcionando do widget de upload:

Passo 1: Adicione um elemento que você deseja que seja substituído na página ( recomendamos uma "div" ) com um atributo chamado samba-upload-widget="samba".

<div samba-upload-widget="samba" />

Passo 2: Instâncie nosso Widget da seguinte forma:

var sambaUploadWidget = new SambaUploadWidget({
    upload_key: 'upload_key_from_project'	
});

Exemplo

<div samba-upload-widget="samba" />
<script src="file:///home/diegomd/dev/Sambavideos/uploadWidget/sambaUploadWidget.js"></script>
<script>
var sambaUploadWidget = new SambaUploadWidget({
    upload_key: 'file:///home/diegomd/dev/Sambavideos/uploadWidget/sambaUploadWidget.js'	
});
</script>

Opções

Além da chave de autenticação, outras opções podem ser utilizada no momento de ingestão do widget de upload.

{
    template: 'bootstrap', //adiciona um template nosso baseado no bootstrap. Default: simple
    retries: 5, //quantidade de retries para cada parte. Default: 3
    maxConcurrentParts: 10 //quantidade de partes ao mesmo tempo sendo enviadas. Default: 5
}

Eventos

O Samba Upload Widget dispara os seguintes eventos:

• media_created: criação da mídia no nosso banco
• upload_initiated: começo de um arquivo para upload
• upload_progress: progresso do upload do arquivo
• upload_completed: término do upload de um arquivo
• error: erro no envio

Como parâmetros enviamos o arquivo com informações sobre os eventos e erros que facilitam no feedback para o usuário. Um exemplo disso seria o feedback de envio:

sambaUploadWidget.wEvents.addEventListener('upload_progress', function(evt) { 
	var progressBar = document.querySelector('div.progress-bar.media-'+ evt.media.id);
	var percentage = ((evt.media.totalSent/evt.media.file.size) * 100).toFixed(0) + '%';
	progressBar.style.width = percentage;
	progressBar.innerHTML = percentage;
});