Untitled

    <!DOCTYPE html>
    <html>
    <div class = "html">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            .content {
            max-width: 550px;
            margin: auto;
            }

    </style>
    </head>

    <body>
    <div class = "content">
    <script>
        function getList(){

            fetch('https://4xrmhgph7b.execute-api.eu-west-3.amazonaws.com/first', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: '{ "command": "list" }'
            }).then(function(data){
                $('#bucketList').val(data);
                data.json().then(function(bodyData){
                    $('#bucketList').text(bodyData);

                });
            });

        }

        function deleteBucket(){
            var bucketname = $('#addBucket').val();
            if( bucketname == "" )
                return;
            fetch('https://4xrmhgph7b.execute-api.eu-west-3.amazonaws.com/first', {
            method: 'POST',
            headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
            },
                body: '{ "command": "delete", "bucketName":"'+bucketname+'" }'
            }).then(function(data){
                getList();
            });
        }

        function deleteFile(){
            console.log("1");
            var bucketname = $('#bucketName').val();
            var filename = $('#fileName').val();
            if( bucketname == "" )
                return;
            else if (filename == "")
                return;
            fetch('https://4xrmhgph7b.execute-api.eu-west-3.amazonaws.com/first', {
            method: 'POST',
            headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
            },
                body: '{ "command": "deleteFile", "bucketName":"'+bucketname+'", "filename":"'+filename+'" }'
            }).then(function(data){
                $('#bucketList').val(data);
                $('#bucketList').text("");
                $('#bucketFile').val(data);
                $('#bucketFile').text("");
                data.json().then(function(bodyData){
                    for(var el in bodyData){
                        $('#bucketList').append("<a href='https://s3.eu-west-3.amazonaws.com/"+bucketname+"/"+bodyData[el] +"'>"+bodyData[el]+"</a>")
                        $('#bucketList').append("<br>");
                    }
                    listDirectory();

                    console.log(bodyData);
                    // $('#bucketList').text(bodyData);
                });
            });

        }
        function createBucket(){
            var bucketname = $('#addBucket').val();
            if( bucketname == "" )
                return;
            fetch('https://4xrmhgph7b.execute-api.eu-west-3.amazonaws.com/first', {
            method: 'POST',
            headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
            },
                body: '{ "command": "create", "bucketName":"'+bucketname+'" }'
            }).then(function(data){
                getList();
            });

        }

        function uploadFile(){
            var fileName = $('#fileName').val();
            var bucketname = $('#bucketName').val();
            var fr = new FileReader();
            fr.onload = function () {
                var data = fr.result;  // data <-- in this var you have the file data in Base64 format
                var fileData = data;
                fetch('https://4xrmhgph7b.execute-api.eu-west-3.amazonaws.com/first', {
                method: 'POST',
                headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                },
                    body: '{ "command": "upload",  "bucketName":"'+bucketname+'", "fileName":"'+fileName+'", "fileData":"'+fileData+'" }'
                }).then(function(dataa){
                    listDirectory();
                });
            };
            fr.readAsText($('#fileData').prop('files')[0]);


        }

        function listDirectory(){
            var bucketname = $('#addBucket').val();
            if( bucketname == "" )
                return;
            fetch('https://4xrmhgph7b.execute-api.eu-west-3.amazonaws.com/first', {
            method: 'POST',
            headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
            },
                body: '{ "command": "dir_list", "bucketName":"'+bucketname+'" }'
            }).then(function(data){
                $('#bucketList').val(data);
                $('#bucketList').text("");
                data.json().then(function(bodyData){
                    for(var el in bodyData){
                        $('#bucketList').append("<a href='https://s3.eu-west-3.amazonaws.com/"+bucketname+"/"+bodyData[el] +"'>"+bodyData[el]+"</a>")
                        $('#bucketList').append("<br>");
                    }
                    console.log(bodyData);
                    // $('#bucketList').text(bodyData);
                });
            });

        }

    </script>
        <div class = "border">
        РАБОТА С БАКЕТАМИ
        <br>
        <button onClick="getList();">Список бакетов</button> &nbsp;&nbsp;Показать список бакетов
        <br>
        <div id='bucketList'></div>

        <br><br>
        <input id="addBucket" type="text">
        <br><br>
        <button onclick="createBucket()">
        Создать Bucket
        </button>
        <br><br>
        <button onclick="deleteBucket()">
        Удалить Bucket
        </button>
        <br><br>
        <button onclick="listDirectory()">
        Содержимое бакета
        </button>

        </button>
        <br><br>
        </div>

        <div class = "border">
        <br><br>
        ЗАГРУЗКА ФАЙЛА
        <br>
        <input id="bucketName" type="text">
        Имя исходного бакета
        <br><br>
        <input id="fileName" type="text">
        Имя файла
        <br><br>
        <input type="file" name="fileData" id="fileData">
        <br><br>
        <button id="copyFile" onClick="uploadFile()">
        Загрузить файл
        </button>
        <br><br>
        <button onclick="deleteFile()">
        Удалить файл
        </div>


    </div>
    </body>
    </div>
    </html>