File upload

Utilize o componente de Carregamento de Ficheiros para permitir que os utilizadores enviem documentos, imagens ou outros tipos de ficheiros para uma aplicação ou website. Este componente é essencial para operações que requerem a submissão de conteúdo digital, como registos, envio de trabalhos ou atualizações de perfil.

Características Principais

Submissão de Ficheiros

Facilita aos utilizadores o envio de ficheiros diretamente através da interface.

Feedback Visual

Fornece uma indicação visual do progresso do carregamento e confirmação de sucesso ou alerta de erro.

Suporte a Múltiplos Formatos

Geralmente suporta uma variedade de tipos de ficheiros, adequando-se a diferentes necessidades de uso.

Exemplo de Utilização

Formulários de candidatura que requerem CVs ou outros documentos
Áreas de gestão de utilizador onde podem atualizar a fotografia de perfil.
Plataformas educativas ou de trabalho colaborativo onde são necessários o envio de documentos ou trabalhos.

Incorpore o componente de Carregamento de Ficheiros sempre que precisar de uma forma eficiente e segura para os utilizadores enviarem conteúdo digital, melhorando a funcionalidade e a experiência de utilizador na sua interface.

Cada upload de ficheiros tem de ter um ID associado, este ID depois passa como parâmetro na função onclick="fileUpload.selectFiles(this, event, 'ID-DO-UPLOAD'), e na função onchange="fileUpload.mostraBeginUpload('ID-DO-UPLOAD');" como mostra no código abaixo.

No input podemos através do data atributo data-max-files="" limitar o número de ficheiros que desejar. Caso não coloque o limite, se for multiple, pode adicionar os ficheiros que quiser.

No input podemos através do data atributo data-max-size="" limitar o tamanho do ficheiro. Caso não coloque, o limite por defeito é de 5MB.

Exemplos

Carregar CVs exemplo

Selecione ou arraste o(s) ficheiro(s)

Carregar avatar exemplo

Selecione ou arraste o(s) ficheiro(s)

                                                    
<div class="gra-upload-files" id="fUpload1">
    <div id="fileUpload">
        <div class="fuTop">
            <div class="beginUpload"><label for="fUpload1">Carregar CVs exemplo</label></div>
            <div class="status_right"><span class="sizeRestante"></span> - <span class="tempoRestante"></span> <span class="spinner"></span></div>
        </div>
        <div class="dropContainer" data-id-upload="fUpload1">
            <div class="dropContainerContent">
                <a class="gra-link gra-font-bold gra-margin-right-4xs" href="#" onclick="fileUpload.selectFiles(this,event,'fUpload1');"><i class="icon-download importIcon iconLeft"></i>Selecione ou arraste</a>
                <input type="file" id="fileInput" class="fileInput" accept="application/pdf" name="cv[]" onchange="fileUpload.mostraBeginUpload('fUpload1');" multiple data-max-files="2" data-max-size=""/>
                o(s) ficheiro(s)
            </div>
        </div>
        <div class="fuBottom"></div>
    </div>
</div>

<div class="gra-upload-files gra-margin-top-s" id="fUpload2">
    <div id="fileUpload">
        <div class="fuTop">
            <div class="beginUpload"><label for="fUpload1">Carregar avatar exemplo</label></div>
            <div class="status_right"><span class="sizeRestante"></span> - <span class="tempoRestante"></span> <span class="spinner"></span></div>
        </div>
        <div class="dropContainer" data-id-upload="fUpload2">
            <div class="dropContainerContent">
                <a class="gra-link gra-font-bold gra-margin-right-4xs" href="#" onclick="fileUpload.selectFiles(this,event,'fUpload2');"><i class="icon-download importIcon iconLeft"></i>Selecione ou arraste</a>
                <input type="file" id="fileInput" class="fileInput" accept="image/png, image/jpeg" name="avatar" onchange="fileUpload.mostraBeginUpload('fUpload2');" data-max-size="5"/>
                o(s) ficheiro(s)
            </div>
        </div>
        <div class="fuBottom"></div>
    </div>
</div>

<div class="gra-popup filesUploaded" id="popupListUplFiles">
    <div class="popupMask"></div>
    <div class="popupContainer">
        <div class="popupHeader no-border">
            Lista de ficheiros carregados
        </div>
        <div class="popupContent"></div>
        <div class="popupFooter">
            <div class="gra-hr-horizontal-dark-s gra-padding-bottom-xs"></div>
            <div>
                <button type="button" class="gra-btn btn-secondary gra-margin-right-xs closePopup">Cancelar</button>
                <button type="button" class="gra-btn btn-primary">Primário</button>
            </div>
        </div>
    </div>
</div>