Skip to content
Star

Python File Server Upload

How it works

  1. You specify the upload options when the rich text editor is initialized on client side.
  2. When an file is inserted, the javascript editor automatically makes an AJAX request to the server.
  3. Once the request hits the server, it stores the file and sends back to the client the link to the uploaded file.

Jump to Complete Example

Initialize the javascript editor

To get started, the rich text editor needs to have the fileUploadURL option set as the URL where you want to have the files uploaded. Additionally, you can set other options related to the way the files are being uploaded and what data your server receives: fileUploadParam, fileUploadParams, fileUploadMethod, fileMaxSize, fileAllowedTypes.

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/upload_file'
  })
</script>

Receive the uploaded file and store it

The server implementation is responsible for receiving the request and handling it appropriately. In Python, the uploaded file is available in the request received by your application. However you should wrap the request object into an adapter. The Python SDK contains 3 adapters (Django, Flask and Pyramid) and you can create your custom adapter by implementing BaseAdapter class:

# Django adapter example.

from froala_editor import BaseAdapter

class DjangoAdapter(BaseAdapter):
"""
Django Adapter: Check BaseAdapter to see what methods description.
"""

def checkFile(self, fieldname):
  if fieldname not in self.request.FILES:
    raise Exception("File does not exist.")

def getFilename(self, fieldname):
  self.checkFile(fieldname)
  return self.request.FILES[fieldname].name

def getMimetype(self, fieldname):
  self.checkFile(fieldname)
  return self.request.FILES[fieldname].content_type

def saveFile(self, fieldname, fullNamePath):
  self.checkFile(fieldname)

  with open(fullNamePath, 'wb+') as destination:
    for chunk in self.request.FILES[fieldname].chunks():
        destination.write(chunk)
You should override all methods from BaseAdapter . The Python editor SDK is designed to automatically detect the uploaded file, so you just have to specify the path where to store it.

Note: The path of the file is relative to the root of your application.

response = File.upload(CustomAdapter(request), '/public/')

For the uploaded file to be stored correctly, the server should have the rights to write in the uploads folder. Additionally, you should check that the uploaded file is public accessible in browser so it can be displayed to your users.

Return the path to the uploaded file

If the save action is completed successfully, the SDK is generating an FileResponse object with the absolute path to the uploaded file, so your server just have to return it back to the client side.

# Return a json. You can use json.dumps to transform the response dictionary into a json string.
json.dumps(response)

Complete Example

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/upload_file'
  })
</script>

# Django
from django.http import HttpResponse
import json
from froala_editor import File
from froala_editor import DjangoAdapter

def upload_file(request):
  try:
    response = File.upload(DjangoAdapter(request), '/public/')
  except Exception:
    response = {'error': str(sys.exc_info()[1])}
  return HttpResponse(json.dumps(response), content_type="application/json")

# Flask
from flask import request
import json
from froala_editor import File
from froala_editor import FlaskAdapter

@app.route('/upload_file', methods=['POST'])
def upload_file():
  try:
    response = File.upload(FlaskAdapter(request), '/public/')
  except Exception:
    response = {'error': str(sys.exc_info()[1])}
  return json.dumps(response)

# Pyramid
from pyramid.response import Response
import json
from froala_editor import File
from froala_editor import PyramidAdapter

def upload_file(request):
  try:
    response = File.upload(PyramidAdapter(request), '/public/')
  except Exception:
    response = {'error': str(sys.exc_info()[1])}
  return Response(json.dumps(response))
File: 2192