Samba Uploader Widget

Envie seus arquivos de forma rápida, segura e eficiente para nossa plataforma!

Enviando uma mídia para o Sambavídeos

Para enviar uma mídia é preciso do “uploadKey” que você pode achar na área de settings do Sambavídeos. Caso não tenha basta apenas criar uma ( você tem a opção de não expiração ou por um tempo limitado ):

Depois desse passo basta inserir nosso script em seu projeto. O processo pode ser feito via npm ( npm install samba-uploader ) ou apenas inserindo a última versão de nosso script em sua página.

Via npm:

const SambaUploader = require('samba-uploader');

Via script na página:

<script type="text/javascript" src="http://static.sambavideos.sambatech.com/sambauploader/latest/samba.uploader.min.js"></script>

Caso queira usar nosso template não se esqueça de importar também o nosso .css:

<link rel="stylesheet" type="text/css" href="http://static.sambavideos.sambatech.com/sambauploader/latest/samba.uploader.min.css">

Com o script em sua página instancie nosso Widget apontando para algum elemento que receberá a ação do upload e sua uploadKey:

const sambaUploader = new SambaUploader({
    button: document.getElementById('sb-uploader'), //    Elemento javascript
    sambaUploadKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //    32 characteres
});

Configuração

É permitido um leque de opções para nosso widget que podem ajudá-lo a integrar da maneira que preferir em sua página:

    new SambaUploader({
        button: document.getElementById('button'), // elemento que receberá a ação de clique para abertura da caixa de seleção de arquivos
        retries: 3, // número de tentativas permitidas. Default: 5
        partSize: 6e+6, // tamanho máximo ( em bytes ) de cada arquivo de upload. Default: 6e+6 ( 6GB )
        templateContainer: document.getElementById('elemento'), // use essa opção se deseja usar nosso template padrão e em qual elemento ele será inserido. Default: null
        allowedExtensions: ['mkv', 'mp4'], //  Extensões permitidas
        dropContainer: document.getElementById('elemento'), //  se deseja colocar um elemento para drop. Default: null
        log: true, //  log de eventos/erros no console. Default: false
        maxItems: 5 //  quantidade de itens para upload ao mesmo tempo. Default: 5
    });

Observação: Não é permitido usar a propriedade button e templateContainer ao mesmo tempo. Também é válido para a templateContainer e dropContainer.

Eventos

Nosso widget é baseado em eventos e eles podem ser escutados para ajudá-lo a montar sua página ( como construção de uma barra de progresso, feedback ao criar mídia ou completar um arquivo ). Os eventos disparados são:

• init -> inicialização do widget
• start -> começo do upload de um arquivo
• mediaCreated -> Mídia no Sambavídeos criada ( obs: criação do registro ID da mídia independente do resultado do upload )
• progress -> Progresso de um arquivo sendo enviado
• complete -> Término do upload e mídia enviada para nosso encoding
• error -> evento de erro
• fileDroped -> evento quando um arquivo é arrastado pelo usuário no container definido

Para usá-los basta usar o método on de nosso widget:

    sambaUploader.on('start', (event) => {
        //    começo do upload
    });

    sambaUploader.on('mediaCreated', (event) => {
        //    mídia criada
    });

    //     Exemplo de barra de progresso
    const progressBar = document.querySelector('div.progress-bar');

    sambaUploader.on('progress', (event) => {
        const percentage = ((event.uploadedBytes/event.totalBytes) * 100)
        .toFixed(0) + '%';

        progressBar.style.width = percentage;
        progressBar.innerHTML = percentage;
    });

Métodos

• cancelItem(fileId) -> Cancela um item dado seu fileId
• setDragAndDrop(element) -> Seta um elemento html como uma zona para arrastar arquivos
• addFiles(files) -> Adciona um array do tipo “FileList” na fila de upload
• retry(fileId) -> Tenta o upload de um arquivo do fileId informado novamente
• destroy -> Destrói a instância do SambaUploader

Exemplo usando um botão de upload e área de drop customizadas:

    const upload = document.querySelector('#upload'); //    botão de upload
    const drag = document.querySelector('#dragger'); //     área "arrastável"

    upload.addEventListener('change', (event) => {
        sambaUploader.addFiles(upload.files);
    }, false);

    sambaUploader.setDragAndDrop(drag);