[Django] Ajax와 Django(python)을 이용한 엑셀 업로드 기능 구현

- Ajax와 Django(python)을 이용하여 엑셀 업로드 기능 구현하기

이번 포스팅은 Ajax와 Django 웹프레임워크를 이용하여 엑셀 파일을 업로드하고, 이를 DB에 저장하는 방법을 알아보겠습니다. DataBase는 MySQL을 사용했다는 점 참고하시면 됩니다. 아래 그림은 데이터를 업로드할 간단한 샘플 엑셀 파일입니다.

 

먼저, Front 단 입니다. 저는 좀 더 깔끔한 UI를 위해 modal form을 사용하여 구현하였습니다. 다른 form도 원리는 동일합니다. 아래는 modal의 입력 form인 HTML 코드입니다. 아래 script 코드는 화면의 버튼을 눌렀을 때 modal 창을 띄우는 js 코드입니다.

 

<!-- modal content -->
<div id="modal-excel" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">
                    <i class="far fa-save mr-1"></i>
                    엑셀 업로드 modal 창
                </h3>
            </div>
            <div class="modal-body">
                <form class="modal-form" id="modal-excel-form" method='post'>
                    <div class="row justify-content-center toolbar-forms py-2">
                        <div class="col-8">
                            <div class="custom-file text-left">
                                <input id="input-excel" class="custom-file-input" type="file" id='excelupload'>
                                <label for="input-excel" class="custom-file-label"></label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-center">
                <div class="float-left mx-auto">
                    <button type="submit" class="btn btn-secondary" id="excel-upload">저장</button>
                    <button type="button" class="btn btn-default border" data-dismiss="modal">취소</button>
                </div>
            </div>
        </div>
    </div>
</div><!-- modal end -->

<script type="text/javascript">
$("#menu-excel").click(function () {
        $("#modal-excel").modal('show');
    });
</script>

 

저장 버튼을 누르게 되면 비동기 통신을 위해 ajax를 사용하여 별도의 url을 Backend 단에 넘겨줍니다. 아래는 ajax를 이용하여 excel File과 url을 전송하는 code입니다.

 

<script type="text/javascript">
    $('#excel-upload').click(() => {
        var form = $("#modal-excel-form")[0];
        var formData = new FormData(form);
        formData.append("message", "ajax로 파일 전송하기");
        formData.append("file", $("#input-excel")[0].files[0]);
        $.ajax({
            url: "/excelupload",
            processData: false,
            contentType: false,
            type: "POST",
            headers:{"X-CSRFToken": csrftoken},
            data : formData,
            success: function(data) {
                alert(data.message);
                location.reload();
            },
            error: function(data) {
                alert(data.message);
            },
        });
    });
</script>

 

 위의 HTML code에서 저장 버튼의 id를 excel-upload로 지정하였기 때문에, 아래 js code가 동작합니다. 해당 code는 jQuerry 선택자를 사용하였고, $('#excel-upload').click(() 코드를 사용하여 버튼 click시 해당 code가 동작하도록 합니다. 또한 var form = $("#modal-excel-form")[0]; 코드를 통해 위의 HTML <form> 태그의 id를 식별하여 form의 0번째 값인 엑셀 file을 입력받는 form을 가져오는데, Ajax에서는 form을 전송하기 위해 FormData라는 객체를 사용합니다.

 var formData = new FormData(form); 코드를 통해 FormData 객체를 생성함과 동시에 form 값을 인자로 넣어줍니다. 이렇게 form 인자를 넣게 되면 form의 내용이 알아서 FormData 객체에 들어가게 됩니다. 또한 위의 코드처럼 필요시 append 메소드를 사용하여, 객체에 데이터를 추가할 수 있습니다.

 form 데이터를 전송할 객체를 생성하였으면 다음은 ajax 코드를 작성해줍니다. 여기서 중요한 것은 url, type, data 입니다. url은 비동기적으로 전송할 url입니다. type은 POST, GET, DELET 등 전송 type등을 의미합니다. 여기서 엑셀 업로드 기능은 CRUD중 Create 기능이고, File Data를 전송해야 하므로 POST를 선언했습니다. 마지막으로 data는 넘겨줄 data를 말하며, 앞에 선언한 FormData 객체인 formData를 넣어줍니다. 추가적으로 processData 옵션은 querry String 설정 여부이며, 파일 전송시에는 일반적으로 False로 선언합니다.

 

Front 단에서 전송한 Data를 처리할 Backend 단의 Code를 살펴보겠습니다.

 

#url.py
from django.urls import path
from <app_name> import views

urlpatterns = [
    path('excelupload', views.ExcelUploadView.as_view(), name='excel-upload'),
    ]

#views.py
import openpyxl
class ExcelUploadView(View):
    def post(self, request):
        excelFile = request.FILES['file']

        excel = openpyxl.load_workbook(excelFile, data_only=True)
        work_sheet = excel.worksheets[0]

        all_values = []
        for row in work_sheet.rows:
            row_value = []
            for cell in row:
                row_value.append(cell.value)
            all_values.append(row_value)

        for row in all_values:
            sample_model = SampleModel(Number=row[0], Name=row[1], Item=row[2])
            sample_model.save()

        response = {'status': 1, 'message': '엑셀파일이 정상적으로 업로드 됐습니다.'}
        return HttpResponse(json.dumps(response), content_type='application/json')

 

Ajax에 선언한 url에 접근하여 ExcelUploadView class를 호출합니다. 해당 class는 View를 상속받았고, post 방식으로 호출되었기 때문에 post 함수가 호출됩니다. 한가지 특이한점은 File을 입력받을 때는 request.POST가 아닌 requset.FILES로 입력받습니다. excel 파일을 열기 위해 openpyxl 모듈을 사용합니다. install 하지 않았다면 다음 명령어를 통해 install 해줍니다.

 

pip install openpyxl

 

excel.worksheets[0]을 통해 첫번째 시트에 접근하고, 해당 시트 Cell의 값들을 아래의 이중 for문을 통해 배열에 넣어줍니다. append 메소드를 사용하여 간단히 입력할 수 있습니다.

이렇게 입력받은 값들을 row별로 for문을 수행하여 sample_model 인스턴스에 넣어줍니다. 그 후 sample_model.save() 함수를 호출하여 DB에 해당 모델 인스턴스를 저장하여 줍니다. 해당 과정이 모두 성공적으로 수행되었다면 response를 return하여 줍니다.

 

아래는 위에서 사용한 간단한 Sample Model이니 참고하시면 됩니다.

 

#models.py
from django.db import models

class SampleModel(models.Model):
	Name = models.CharField(max_length=10, null=False)
    Number = models.IntegerField(null=True)
    Item = models.CharField(max_length=10, null=True)
    	

 

 

이상으로 Django에서 간단한 엑셀 파일을 ajax를 이용하여 업로드하고, 이를 DB에 저장하는 방법을 알아보았습니다.

 

감사합니다 :)