Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Python Image Validation

How it works

  1. Upload image to the server.
  2. Validate image on the server side before storing it.

Jump to Complete Example

Image Upload

The Server Upload section describes the steps to upload an image to a server. You can validate images when you insert them in the editor, however that only checks the filename and not the mime type. It is advisable to make additional checks on the server side to make sure users only upload valid image formats.

Validate Extension

The editor's Python SDK can check the image extension before storing it on disk, and can also check the mime type.

options = {
  'validation': {
    'allowedExts': ['gif'],
    'allowedMimeTypes': ['image/gif']
  }
}

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

Custom Validation

You can also pass a custom method instead of validating the extension and mime type. This gives you full control on what types of images you want to store on disk. Below is an example of how to validate if an image is square.

import wand.image

def validation(filePath, mimetype):
  with wand.image.Image(filename=filePath) as img:
    if img.width != img.height:
      return False
    return True

options = {
  'validation': validation
}
response = Image.upload(CustomAdapter(request), '/public/', options)

Complete Example

<script>
  new FroalaEditor('.selector', {
    // Set the image upload URL.
    imageUploadURL: '/upload_image_validation'
  })
</script>
# Django
from django.http import HttpResponse
import json
from froala_editor import Image
from froala_editor import DjangoAdapter

def upload_image_validation(request):
  options = {
    'validation': {
      'allowedExts': ['gif'],
      'allowedMimeTypes': ['image/gif']
    }
  }

  try:
    response = Image.upload(DjangoAdapter(request), '/public/', options)
  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 Image
from froala_editor import FlaskAdapter

@app.route('/upload_image_validation', methods=['POST'])
def upload_image_validation():
  options = {
    'validation': {
      'allowedExts': ['gif'],
      'allowedMimeTypes': ['image/gif']
    }
  }

  try:
    response = Image.upload(FlaskAdapter(request), '/public/', options)
  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 Image
from froala_editor import PyramidAdapter

def upload_image_validation(request):
  options = {
    'validation': {
      'allowedExts': ['gif'],
      'allowedMimeTypes': ['image/gif']
    }
  }

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

Do you think we can improve this article? Let us know.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1358738759" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1018911274" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1026792887" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>