Table of Contents

Image Upload Path

Warning

title	주의사항

가이드로 제공되는 아래 코드 중 파일 업로드 부분은 샘플 코드로서 보안 관련 처리가 미흡합니다.

파일 업로드 부분은 프로젝트 내부에서 사용하시는 부분을 그대로 사용하시고 아래 코드를 참고하셔서 연동 부분을 처리해주세요.

1. 사전 정보

연동가이드의 예제는 아래와 같이 구성되어 있습니다.

프로젝트 이름 이름

Among the following codes provided as the guide, file upload part is a sample code and has insufficient security.

As for the file upload, please use the code used within your project and refer the following code to handle the system link.

1. Preliminary Information

Example in the linking guide is constituted as follows.

Project Name : synapeditor_django
앱 이름 Application Name : edit

1.1.

앱 등록

Adding the Application

Code Block

language	py
theme	Emacs

# 프로젝트Project settings.py
...
INSTALLED_APPS = [
	'edit.apps.EditConfig', #앱#Add 등록application
	...
]
...


# 프로젝트Project urls.py
...
urlpatterns = [
	path('edit/', include('edit.urls')), # 앱에서 사용할 url 등록Adding URL to use in the application 
	...
]
...

2.

이미지, 동영상, 파일 업로드

업로드를 위해 아래와 같이 정의하였습니다. 경로나 API 형태는 변경하여 사용하세요.

이미지 업로드 경로

Uploading Image or Video File

It is defined as follows for the upload. You may change the path or API format.

Image Upload Path : media
이미지 업로드 Image Upload API : /edit/uploadFile

2.1.

에디터 설정

Editor Configuration

Code Block

language	js
theme	Emacs

// 사이냅에디터Synap Editor 설정configuration 객체object
var SynapEditorConfig = {
	...
	'editor.upload.image.param': {
		'csrfmiddlewaretoken': '{{ csrf_token }}'
	},
	'editor.upload.image.api': '/edit/uploadFile',
	...
}

2.2.

업로드 경로 설정

Upload Path Configuration

Code Block

language	py
theme	Emacs

# 프로젝트Project settings.py
...
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
...

# 프로젝트Project urls.py
...
urlpatterns = [
	...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
...

2.3.

url과 view 연동

Linking URL and View

Code Block

language	py
theme	Emacs

# 앱Application urls.py
from django.urls import path
from . import views

urlpatterns = [
	...
    path('uploadFile/', views.upload_file, name='upload_file'),
	...
]

2.4. Creating view

생성업로드 후 JSON 객체에

After the upload, you shall respond with 'uploadPath' 를 담아 응답해야 합니다included in JSON object.

Code Block

language	py
theme	Emacs

# 앱Application views.py
from django.http import JsonResponse
from .forms import UploadFileForm

# 파일을Upload the 업로드합니다file.
def upload_file(request):
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)
        
        if form.is_valid():
            uploaded_file = form.save()
			data = {
				'uploadPath': uploaded_file.file.url
			}

    return JsonResponse(data)

2.5. Creating form

생성

Code Block

language	py
theme	Emacs

# 앱Application forms.py
from .models import UploadFile
from django import forms

class UploadFileForm(forms.ModelForm):
    class Meta:
        model = UploadFile
        fields = ('file', )

2.6. Creating model

생성

Code Block

language	py
theme	Emacs

# 앱Application models.py
import uuid
from django.db import models

# 저장할 파일 이름을 반환합니다 Return the name of the file to save.
def get_file_name(instance, filename):
    ext = filename.split('.')[-1]
    return "%s.%s" % (uuid.uuid4(), ext)

class UploadFile(models.Model):
    file = models.FileField(upload_to=get_file_name)

3. Importing HWP, MS Word

,

or Excel

문서 임포트

문서 임포트위해 아래와 같이 정의하였습니다. 경로나 API는 수정하여 사용하시면 됩니다.

문서 업로드는 media 디렉토리에 합니다.

변환된 결과물은 media/output 디렉토리에 저장합니다.

문서 임포트 API는

Document

It is defined as follows for the upload. You may change the path or API format.

Upload documents in media directory.
Save the converted outcomes in media/output directory.
The document import API is '/edit/importDoc'입니다.

3.1.

에디터 설정

Editor Configuration

Code Block

language	js
theme	Emacs

// 사이냅에디터Synap Editor 설정configuration 객체object
var SynapEditorConfig = {
	...
	'editor.import.param': {
		'csrfmiddlewaretoken': '{{ csrf_token }}'
	},
	'editor.import.api': '/edit/importDoc/',
	...
}

3.2.

업로드 경로 설정

Upload Path Configuration

Code Block

language	py
theme	Emacs

# 프로젝트Project settings.py
...
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
...

# 프로젝트Project urls.py
...
urlpatterns = [
	...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
...

3.3.

url과

Linking url and view

연동

Code Block

language	py
theme	Emacs

# 앱Application urls.py
from django.urls import path
from . import views

urlpatterns = [
	...
    path('importDoc/', views.import_doc, name='import_doc'),
	...
]

3.4. Creating view

생성임포트 후 JSON 객체에

After the upload, you shall respond with 'serializedData' 와 and 'importPath' 를 담아 응답해야 합니다included in JSON object.

Code Block

language	py
theme	Emacs

# 앱Application views.py
import os
import subprocess
import zipfile
import zlib
from django.conf import settings
from subprocess import call
from django.http import JsonResponse
from .forms import UploadFileForm

PROJECT_PATH = os.path.abspath(os.path.dirname(__name__)) # 프로젝트의 절대경로Absolute path of the project
MEDIA_ROOT = settings.MEDIA_ROOT # 파일이 업로드 되는 절대경로Absolute path for the file upload
# 문서를Import 임포트a 합니다document.
def import_doc(request):
    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES)

        if form.is_valid():
            uploaded_file = form.save()

			# 1. 문서Document 변환conversion
            result = execute_converter(uploaded_file.file)
            
            if result['resultCode'] == 0:
                output_path = result['outputPath']
				# 2. 변환된Decompressing 결과물the 압축converted 해제outcome
                unzip_path = unzip(output_path)
                pb_path = unzip_path + '/document.pb'

				# 3. Serializing PB 데이터data
직렬화                 serialized_data = serialize_pb(pb_path)
                common_prefix = os.path.commonprefix([output_path, PROJECT_PATH])
                import_path = '/' + os.path.relpath(unzip_path, common_prefix)
            
            data = {
                'serializedData': serialized_data, # serialized된Serialized pb 데이터data
                'importPath': import_path # 변환 결과물이 저장된 경로(브라우저에서 접근 가능한 경로여야 함 Path in which the converted outcome is stored (it shall be the path to which the browser can access)
            }

    return JsonResponse(data)

# 변환모듈을 실행하여 문서를 변환합니다Run the conversion module to convert the document.
def execute_converter(file):
    fname, ext = os.path.splitext(file.name)
    module_path = '{0}/sedocConverter/sedocConverter_exe'.format(PROJECT_PATH)
    font_path = '{0}/sedocConverter/fonts'.format(PROJECT_PATH)
    input_path = file.path
    output_path = '{0}/output/{1}.zip'.format(MEDIA_ROOT, os.path.basename(fname))
    temp_path = '{0}/temp'.format(PROJECT_PATH)
	args = [module_path, '-z', '-f', font_path, input_path, output_path, temp_path]
	result_code = None

	process = subprocess.Popen(args)
	try:
		result_code = process.wait(timeout=20) # 변환이 20초 안에 완료되지 않으면 프로세스 종료The process shall be terminated if the conversion is not completed within 20 seconds
    except subprocess.TimeoutExpired:
        process.kill()


    return {
		'resultCode': result_code, 
		'outputPath': output_path
	}

#변환된#Decompress 파일의the 압축을converted 해제합니다file.
def unzip(zipFilePath):
    unzip_path, ext = os.path.splitext(zipFilePath)
    zip = zipfile.ZipFile(zipFilePath)
    zip.extractall(unzip_path)

    return unzip_path

# pb파일을 읽어 serialize하여 반환합니다 Read and serialize pb file and return it.
def serialize_pb(pbFilePath):
    serialized_data = []
    pb_file = open(pbFilePath, 'rb')
    pb_file.seek(16)
    pb_contents= pb_file.read()
    decompressed = zlib.decompress(pb_contents)
    
	for byte in decompressed:
        serialized_data.append(byte & 0xFF)

    pb_file.close()
    
	return serialized_data

3.5. Creating form

생성

Code Block

language	py
theme	Emacs

# 앱Application forms.py
from .models import UploadFile
from django import forms

class UploadFileForm(forms.ModelForm):
    class Meta:
        model = UploadFile
        fields = ('file', )

3.6. Creating model

생성

Code Block

language	py
theme	Emacs

# 앱Application models.py
import uuid
from django.db import models

# 저장할 파일 이름을 반환합니다 Return the name of the file to save.
def get_file_name(instance, filename):
    ext = filename.split('.')[-1]
    return "%s.%s" % (uuid.uuid4(), ext)

class UploadFile(models.Model):
    file = models.FileField(upload_to=get_file_name)

Page tree

Versions Compared

Old Version 2

New Version 3

Key

1. 사전 정보

1. Preliminary Information

1.1.

Adding the Application

2.

Uploading Image or Video File

2.1.

Editor Configuration

2.2.

Upload Path Configuration

2.3.

Linking URL and View

2.4. Creating view

2.5. Creating form

Code Block
language py
theme Emacs
# 앱Application forms.py from .models import UploadFile from django import forms class UploadFileForm(forms.ModelForm): class Meta: model = UploadFile fields = ('file', )

2.6. Creating model

3. Importing HWP, MS Word

or Excel

Document

3.1.

Editor Configuration

3.2.

Upload Path Configuration

3.3.

Linking url and view

Code Block
language py
theme Emacs
# 앱Application urls.py from django.urls import path from . import views urlpatterns = [ ... path('importDoc/', views.import_doc, name='import_doc'), ... ]

3.4. Creating view

3.5. Creating form

Code Block
language py
theme Emacs
# 앱Application forms.py from .models import UploadFile from django import forms class UploadFileForm(forms.ModelForm): class Meta: model = UploadFile fields = ('file', )

3.6. Creating model

Page tree

Page History

Versions Compared

Old Version 2

New Version 3

Key

1. 사전 정보

1. Preliminary Information

1.1.

Adding the Application

2.

Uploading Image or Video File

2.1.

Editor Configuration

2.2.

Upload Path Configuration

2.3.

Linking URL and View

2.4. Creating view

2.5. Creating form

Code BlocklanguagepythemeEmacs# 앱Application forms.py from .models import UploadFile from django import forms class UploadFileForm(forms.ModelForm): class Meta: model = UploadFile fields = ('file', )

2.6. Creating model

3. Importing HWP, MS Word

or Excel

Document

3.1.

Editor Configuration

3.2.

Upload Path Configuration

3.3.

Linking url and view

Code BlocklanguagepythemeEmacs# 앱Application urls.py from django.urls import path from . import views urlpatterns = [ ... path('importDoc/', views.import_doc, name='import_doc'), ... ]

3.4. Creating view

3.5. Creating form

Code BlocklanguagepythemeEmacs# 앱Application forms.py from .models import UploadFile from django import forms class UploadFileForm(forms.ModelForm): class Meta: model = UploadFile fields = ('file', )

3.6. Creating model

Code Block
language py
theme Emacs
# 앱Application forms.py from .models import UploadFile from django import forms class UploadFileForm(forms.ModelForm): class Meta: model = UploadFile fields = ('file', )

Code Block
language py
theme Emacs
# 앱Application urls.py from django.urls import path from . import views urlpatterns = [ ... path('importDoc/', views.import_doc, name='import_doc'), ... ]

Code Block
language py
theme Emacs
# 앱Application forms.py from .models import UploadFile from django import forms class UploadFileForm(forms.ModelForm): class Meta: model = UploadFile fields = ('file', )