Skip to main content

Image widget (with thumbnails) for `zeam.form`

Project description

dolmen.widget.image is a thin layer above dolmen.widget.file providing a widget suitable to fields implementing IImageField. It adds, thanks to dolmen.thumbnailer a preview of the uploaded image in both input and display mode.

Example

We are going to develop here a small example, to demonstrate the use of dolmen.widget.image. First, we instanciate our test model and add an image field to the object:

>>> class Mammoth(object):
...     pass

>>> import dolmen.file
>>> import grokcore.component as grok
>>> from zope.interface import Interface, alsoProvides
>>> from zope.schema.fieldproperty import FieldProperty

>>> class IMammothId(Interface):
...   """Even mammoths need an ID card"""
...   picture = dolmen.file.ImageField(title=u'Luggages')

>>> manfred = Mammoth()
>>> manfred.picture = None
>>> alsoProvides(manfred, IMammothId)

The picture is now set on our Mammoth. We create a form to try and edit the picture field:

>>> from zeam.form.ztk import Form, Fields

>>> class EditMammoth(Form):
...    grok.name('edit')
...    grok.context(IMammothId)
...    ignoreContent = False
...    fields = Fields(IMammothId)

>>> grok.testing.grok_component('edit', EditMammoth)
True

We persist our Mammoth to get a located mammoth with an URL:

>>> from zope.component.hooks import getSite
>>> root = getSite()
>>> root['manfred'] = manfred
>>> manfred = root['manfred']

We can call the edit form on our persisted object:

>>> from zope.component import getMultiAdapter
>>> from zope.publisher.browser import TestRequest

>>> request = TestRequest()

>>> form = getMultiAdapter((manfred, request), name='edit')
>>> form.updateWidgets()
>>> print form.fieldWidgets.get('form.field.picture').render()
<div id="form-field-picture">
    <input type="file" id="form-field-picture-input"
             name="form.field.picture" />
</div>

Now, let’s try with a fake value:

>>> manfred.picture = "some fake image"
>>> form = getMultiAdapter((manfred, request), name='edit')
>>> form.updateWidgets()

>>> print form.fieldWidgets.get('form.field.picture').render()
<div id="form-field-picture">
  <div>
    <div class="widget-image-preview">
      <img src="http://127.0.0.1/manfred/++thumbnail++picture.preview"
           title="Download" />
    </div>
    <p class="file-info">
      <a class="filename"
         href="http://127.0.0.1/manfred/++download++picture">Download</a>
    </p>
  </div>
  <div>
    <input type="radio" value="keep" checked="checked"
           class="noborder" name="form.field.picture.action"
           onclick="document.getElementById('form-field-picture-input').disabled=true"
           id="form-field-picture-action" />
    <label for="form-field-picture-action">Keep existing file</label>
    <br />
    <input type="radio" value="delete" class="noborder"
           name="form.field.picture.action"
           onclick="document.getElementById('form-field-picture-input').disabled=true"
           id="form-field-picture-delete" />
    <label for="form-field-picture-delete">Delete existing file</label>
    <br />
    <input type="radio" value="replace" class="noborder"
           name="form.field.picture.action"
           onclick="document.getElementById('form-field-picture-input').disabled=false"
           id="form-field-picture-replace" />
        <label for="form-field-picture-replace">Replace with new file</label>
  </div>
  <div>
    <input type="file" id="form-field-picture-input"
           name="form.field.picture" />
    <script type="text/javascript">document.getElementById('form-field-picture-input').disabled=true;</script>
  </div>
</div>

With non persistent objects (which don’t resolve to an URL), no preview is displayed. If we can’t resolve to an URL, we can’t serve the thumbnail or download the data:

>>> judith = Mammoth()
>>> judith.picture = "Fake image data"
>>> alsoProvides(judith, IMammothId)

>>> form = getMultiAdapter((judith, request), name='edit')
>>> form.updateWidgets()
>>> print form.fieldWidgets.get('form.field.picture').render()
<div id="form-field-picture">
  <div>
    <input type="radio" value="keep" checked="checked"
           class="noborder" name="form.field.picture.action"
           onclick="document.getElementById('form-field-picture-input').disabled=true"
           id="form-field-picture-action" />
    <label for="form-field-picture-action">Keep existing file</label>
    <br />
    <input type="radio" value="delete" class="noborder"
           name="form.field.picture.action"
           onclick="document.getElementById('form-field-picture-input').disabled=true"
           id="form-field-picture-delete" />
    <label for="form-field-picture-delete">Delete existing file</label>
    <br />
    <input type="radio" value="replace" class="noborder"
           name="form.field.picture.action"
           onclick="document.getElementById('form-field-picture-input').disabled=false"
           id="form-field-picture-replace" />
        <label for="form-field-picture-replace">Replace with new file</label>
  </div>
  <div>
    <input type="file" id="form-field-picture-input"
           name="form.field.picture" />
    <script type="text/javascript">document.getElementById('form-field-picture-input').disabled=true;</script>
  </div>
</div>

Changelog

1.0b1 (2010-07-05)

  • The package now uses the latest improvements in the field registration process, in both zeam.form and dolmen.widget.file.

1.0a2 (2010-06-25)

  • Updated the field registration to work with the latest zeam.form.ztk improvement : registration by entry points.

1.0a1 (2010-05-14)

  • Major change : the widget is now meant to be used in zeam.form. Dolmen is no longer using z3c.form.

  • The HTML code of the widget has been improved.

0.2 (2010-03-01)

  • Updated the code to use dolmen.widget.file 0.2 and dolmen.file 0.5.1.

  • Updated the template to use the zope.size.ISized adapter to display the file size.

  • Updated the tests to get rid of the unneeded zope.app packages.

0.1 (2009-10-22)

  • Initial release

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dolmen.widget.image-1.0b1.tar.gz (6.3 kB view hashes)

Uploaded source

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page