, ,
2016.01.23 01:24

DRF file upload (파일 업로드)



제목이 곧 내용. 바로 본론으로



Backend


@api_view(['POST'])
@renderer_classes((JSONRenderer,))
def signup_detail(request):
# normal data
username = request.data.get('name')
# file data
uploaded_image = request.FILES['image']
print(type(uploaded_image)) # Inmemoryuploadedfile object; supports chunks()
print(type(uploaded_image.file)) # _io.BytesIO object
print(uploaded_image.size) # 27231
print(uploaded_image.name) # x.jpg

import os
with open(os.path.join('parentdir', uploaded_image.name), mode='wb') as file:
for chunk in uploaded_image.chunks():
file.write(chunk)

return Response("your file '{0}' is uploaded!".format(uploaded_image.name))

Inmemoryuploadedfile이 chunks()함수를 제공해 편리하다.

스트림이 직접적으로 필요할 경우 .file 프로퍼티를 이용하자


*Inmemoryuploadedfile의 특징은 파일과 동급으로 처리된다 는 것으로, 이점을 이용해 파일을 저장하지 않고, AWS S3로 곧바로 파일을 보내버릴 수 있다.

boto 기준으로 key.set_contents_from_file(uploaded_file)을 사용하면 된다.


Frontend


Backend로 데이터를 전달할 방법은 2가지. 

  1. HTML submit input 사용
  2. AJAX 최신 브라우저에서 지원하는 javascript객체인 FormData객체를 사용


HTML

<form id="form-signup-detail" action="url/to/django/" method="post" enctype="multipart/form-data">
<input type="text" name="name" value="name">
<input type="file" name="image">
<input type="submit" value="upload by submit">
<input id="signup-detail" type="button" value="upload by ajax">
</form>

enctype을 반드시 위와 같이 해야 한다!

action 부분을 적절하게 수정하자

이 html은 아래의 ajax의 뼈대가 되기도 하고, 낡은 브라우저 호환을 위해 submit을 통한 post도 지원한다.


javascript (AJAX 구현)

$('#signup-detail').click(function () {
$.ajax(host + 'signup/detail', {
type: 'post',
data: new FormData($('#form-signup-detail')[0]),
processData: false,
contentType: false,
comeplete: function (data, status, xhr) {
$('#input').val(data);
},
xhrFields: {withCredentials: true}
});
});

FormData 객체는 최신 브라우저만 지원함에 유의

'WebDev' 카테고리의 다른 글

Python으로 현재 컴퓨터가 EC2인지 확인하기  (0) 2016.01.26
Pynamodb Basic Tutorial  (0) 2016.01.25
DRF file upload (파일 업로드)  (0) 2016.01.23
DRF + CORS + CSRF + AJAX 하에서 개발하기  (0) 2016.01.21
django login 정리  (0) 2016.01.21
django CSRF disable (CSRF 해제)  (0) 2016.01.20

+ Recent posts