[php] PHP 라이브러리 S3 파일 업로드 상태 표시바 적용

22 Dec 2023

Amazon S3는 안정적인 파일 저장 및 관리 서비스로 유명한데, PHP 언어로 S3 파일 업로드 기능을 구현할 때 업로드 상태를 사용자에게 시각적으로 표시하는 것은 중요합니다. 이번 포스트에서는 PHP 라이브러리를 사용하여 S3 파일을 업로드하고, 업로드 상태를 표시하는 방법에 대해 알아보겠습니다.

필요한 라이브러리 설치

먼저, PHP에서 S3를 사용하기 위해선 AWS SDK for PHP 라이브러리가 필요합니다. Composer를 통해 라이브러리를 설치할 수 있습니다.

composer require aws/aws-sdk-php

S3 파일 업로드 코드 작성

다음은 PHP로 S3 파일을 업로드하는 코드의 예시입니다.

<?php
use Aws\S3\S3Client;
use Aws\S3\Exception\S3Exception;

// AWS credentials 및 버킷 이름 설정
$bucket = 'your-bucket-name';
$keyname = 'uploads/my-file.txt';

// S3 클라이언트 생성
$s3 = new S3Client([
    'version' => 'latest',
    'region'  => 'us-east-1'
]);

// 파일 업로드
try {
    $result = $s3->putObject([
        'Bucket'     => $bucket,
        'Key'        => $keyname,
        'SourceFile' => '/path/to/your/file.txt',
        'ACL'        => 'public-read'
    ]);

    echo "파일이 성공적으로 업로드되었습니다.\n";
} catch (S3Exception $e) {
    echo $e->getMessage() . "\n";
}

파일 업로드 상태 표시바 적용

파일 업로드 시 진행 상태를 시각적으로 표시하기 위해서는 JavaScript와 CSS를 활용하여 업로드 상태를 실시간으로 표시하는 기능을 구현할 수 있습니다. jQuery 라이브러리를 사용하여 간단한 파일 업로드 상태 표시바를 적용하는 예시 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>S3 파일 업로드</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+u4vJraug5C6pxSTtTFLk3zGGOEN9KFc4TZtZ/zehcX3mpss" crossorigin="anonymous"></script>
    <style>
        .progress {
            border: 1px solid #ccc;
            width: 300px;
            height: 20px;
            position: relative;
            overflow: hidden;
        }

        .bar {
            background-color: #FFA500;
            width: 0px;
            height: 100%;
            position: absolute;
        }
    </style>
</head>
<body>
    <input type="file" id="file-input">
    <button id="upload-btn">업로드</button>
    <div class="progress">
        <div class="bar"></div>
    </div>
    <script>
        $(document).ready(function(){
            $("#upload-btn").on('click', function(){
                var file_data = $('#file-input').prop('files')[0];
                var form_data = new FormData();
                form_data.append('file', file_data);
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'upload.php', true);
                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        $('.bar').css('width', percentComplete + '%');
                    }
                };
                xhr.send(form_data);
            });
        });
    </script>
</body>
</html>

위 코드는 HTML 파일 내에 파일 선택 input과 업로드 버튼 그리고 업로드 상태 표시바를 구현하고 있습니다.

마치며

위에서 언급된 예시 코드를 참고하여 PHP 언어로 AWS S3에 파일을 업로드하고, 사용자에게 업로드 상태를 시각적으로 표시할 수 있습니다. 파일 업로드를 시각적으로 표시하는 것은 사용자 경험을 향상시키는 중요한 요소이며, 이를 통해 웹 애플리케이션의 사용성을 높일 수 있습니다.