Drag and Drop Images


posted 2015-12-28 by Herb



A new ImagesField has been added to the fields module that allows you to add images fields to models by simply including the field in a form.  This new field type offers drag and drop image uploading using the awesome dropzone.js module.


In addition, the collect module has been updated to provide support for the ImagesField so if you are using the collect module as the basis for your app, it supplies the necessary methods to support the ImagesField.  This is a good place to look if you are using custom controllers or views in your app and need to provide support for ImagesField on your own.


Here's an example of a model for a simple photo gallery app with multiple photo albums.


from zoom.fields import TextField, ImagesField
from zoom.collect import Collection

class PhotoAlbum(CollectionRecord): pass

album_fields = Form(
    TextField('Album Name'),
    ImagesField('Photos'),
)

app = Collection('Albums', album_fields, PhotoAlbum)



The images are stored as files and are linked to the current record via an attachment model.   Currently the field supports uploading of png, jpg and gif only.


















Most Recent