Tutorial em Html/Javascript

1º Passo: Gerar URL para envio de arquivo

2º Passo: Upload do Arquivo no AWS S3

3º Passo: Salvar arquivo no cadastro


Em HTML:

<select name="doc_type_to_upload" id="doc_type_to_upload">
    <option value="identificacao">Documento de Identificação RG ou CNH</option>
    <option value="cnpj">Identificação CNPJ - Contrato Social ou Cartão CNPJ</option>
    <option value="atividade">Comprovante de Atividade</option>
    <option value="residencia">Comprovante de Residência</option>
</select>
<input type="file" id="file_to_upload" name="file_to_upload" />

Em Javascript:

$(document).ready(function () {
    $('#file_to_upload').change(function(){

        const file = document.getElementById("file_to_upload").files[0];
        if(!file){
            return
        }
        let body = JSON.stringify({ "filename": file.name, "content_type": file.type });

        const file_size = Math.round((file.size / 1024));

        if (file_size >= 4096) {
            alert("Arquivo muito grande, selecione um arquivo com menos de 4 MB.");
            return
        }

        const file_extension = file.name.split('.').pop();
        if(["png","jpeg","jpg","pdf"].indexOf(file_extension) == -1){
            alert("A extensão do arquivo não é permitida. Formatos válidos: PDF, JPEG e PNG.");
            return
        }

        let doc_type = $('#doc_type_to_upload').val();

        fetch('https://demo.pagtech.com.br/api/v1/documents/generate-presigned-post/', { 
              method: "POST", body: body, headers: { "Content-type": "application/json; charset=UTF-8" },
          }).then((response) => response.json())
            .then((data) => {
                let formData = new FormData();
                for (const [key, value] of Object.entries(data['fields'])) {
                    formData.append(key, value);
                }
                formData.append("file", document.getElementById("file_to_upload").files[0]);
                fetch(data['url'], { method: "POST", body: formData })
                    .then((data) => {                        
                        let document = {
                            'type': doc_type,
                            'filename': formData.get("key")
                        };
                        $.ajax({
                            url: 'https://demo.pagtech.com.br/api/v1/documents/save/', type: 'POST',
                            data: document                                
                        }).done(function (rs) {                                
                            alert("Documento enviado com sucesso.");

                        }).fail(function () {
                            alert('Ocorreu um erro ao salvar o documento em nosso sistema!');                                
                        });                        
                    })
                    .catch(error => {                        
                        console.error('Error:', error);
                        alert("Ocorreu algum erro ao enviar o arquivo no S3.")
                    });
            })
            .catch(error => {
                console.error('Error:', error);                
                alert("Ocorreu algum erro ao gerar a URL do arquivo.")
            });
    });
});