clean-image-crop-uploader 0.2.2

Clean Image Crop Uploader (CICU) provides AJAX file upload and image CROP functionalities for ImageFields with a simple widget replacement in the form. It use Modal from twitter-bootstrap.
clean-image-crop-uploader (CICU)

``clean-image-crop-uploader`` is a django widget to upload an image via Ajax and crop it using `Jcrop
<>`_. It provides a simple workflow: first one, using modal,
(by `twitter bootstrap <>`_) the image can be uploaded and croped.
Second one, you can see the image cropping preview in the form and finally submit the result.

``clean-image-crop-uploader`` is perfect when you use an ImageField on your model where is necessary to have a specific portion of image. It's easy to configure and to use.
You can use different configurations , with fixed aspect ratio or minimal image size.

It works with jQuery = 1.8.3 and twitter bootstrap.


#. Modal window with upload button:

.. image::

#. Modal window with crop area:

.. image::

#. Form with preview

.. image::


#. Install django-image-cropping using pip. For example::

    pip install clean-image-crop-uploader

#. Add ``south`` and ``cicu`` to your INSTALLED_APPS.

#. run migrate commando to your django project::

    python migrate

* jQuery = 1.8.3
* Twitter-Bootstrap

#. Add into ::

    (r'^ajax-upload/', include('startproject.cicu.urls'))

#. Create your model-form and set  CicuUploaderInput widget to your imageField  ::

    from cicu.widgets import CicuUploderInput

    class yourCrop(forms.ModelForm):
        class Meta:
            model = yourModel
            cicuOptions = {
                'ratioWidth': '600',       #fix-width ratio, default 0
                'ratioHeight':'400',       #fix-height ratio , default 0
                'sizeWarning': 'False',    #if True the crop selection have to respect minimal ratio size defined above. Default 'False'
            widgets = {
                'image': CicuUploderInput(options=cicuOptions)

#. Download `twitter bootstrap <>`_  to your static file folder.

#. Add in your form template links to jquery, bootstrap,

        <script src=""></script>
        <link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <script src="{{ STATIC_URL }}js/bootstrap.js"></script>
        {{ }}


Run the example
The Example is available only in github repository:

To run the example inside this package follow these commands::

    > cd ./example/
    > python syncdb
    > python migrate # only if you use South!!!
    > python collectstatic
    > python runserver domain:8000

Go to examples :

#. Free crop : <http://domain:8000/cicu-freecrop/>

#. Fixed aspect ratio: <http://domain:8000/cicu-fixedratio/>

#. Fixed aspect ratio with minimal size: <http://domain:8000/cicu-warningsize/>


Alfredo Saglimbeni




  • Environment :: Web Environment
  • Framework :: Django
  • Intended Audience :: Developers
  • Operating System :: OS Independent
  • Programming Language :: Python
  • Development Status :: 4 - Beta
  • Topic :: Software Development :: Libraries :: Python Modules
File Type Python Version Uploaded On Downloads
clean-image-crop-uploader-0.2.2.tar.gz Source March 8, 2013 2,935
Version Release Date
0.2.2 March 8, 2013
0.2.1 Feb. 27, 2013
Date Package Version Action
Aug. 24, 2015, 10:45 p.m. clean-image-crop-uploader 0.2.1 Release Created
Aug. 24, 2015, 10:45 p.m. clean-image-crop-uploader 0.2.2 Release Created
Aug. 24, 2015, 10:45 p.m. clean-image-crop-uploader Package Created