Python Image Server Upload

How it works

1. Specify upload options when initializing the editor.
2. On image insertion, the editor automatically makes an AJAX request to the server.
3. Once the request reaches the server, it stores the image and sends back to the client the link to the uploaded image.

Jump to Complete Example

Initialize the editor

First, add the imageUploadURL option, as its value enter the upload destination for the images.

Next, set any additional options to configure upload methods and allowed file types: imageUploadParam, imageUploadParams, imageUploadMethod, imageMaxSize, imageAllowedTypes.

Copy

<script>
  new FroalaEditor('.selector', {
    // Set the image upload URL.
    imageUploadURL: '/upload_image'
  })
</script>

Receive the uploaded image and store it

The server implementation is responsible for receiving the request and handling it appropriately. In Python, the uploaded image 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:

Copy

# 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 detects the uploaded image automatically but you have to specify the path where to store it.

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

Copy

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

To store the uploaded image, the server needs write rights on the uploads folder. Additionally, check uploaded images are publicly accessible in the browser.

Return the path to the uploaded image

If the save action is successful, the SDK generates an ImageResponse object with the absolute path to the uploaded image and the server returns the path to the client side.

Copy

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

Complete Example

Copy

<script>
  new FroalaEditor('.selector', {
    // Set the image upload URL.
    imageUploadURL: '/upload_image'
  })
</script>

Copy

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

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

Copy

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

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

Copy

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

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