Django talk: Django InlineFormset : Customize inputs and widget

Wednesday, October 4, 2017

Django InlineFormset : Customize inputs and widget

I'm using inlineformsets for an Image Model in combination with a Product Model.

For the Image Model (using javascript):

1) a remove/delete button will be available to remove an image; the image can be remove not only on edit, but also on creation(the use upload the image, but before saving doesn't like the image and removes it) 2) An add button, when the user clicks a new input and corresponding fields are added

By default the inlineformset code is like this:

<tr><th><label for="id_product_images-0-document">Document:</label></th><td><input type="file" name="product_documents-0-document" id="id_product_images-0-document" /></td></tr> <tr><th><label for="id_product_images-0-file_type">File type:</label></th><td><input type="text" name="product_documents-0-file_type" maxlength="255" id="id_product_images-0-file_type" /></td></tr> <tr><th><label for="id_product_images-0-DELETE">Delete:</label></th><td><input type="checkbox" name="product_documents-0-DELETE" id="id_product_images-0-DELETE" />
<input type="hidden" name="product_documents-0-id" id="id_product_images-0-id" /><input type="hidden" name="product_documents-0-product" id="id_product_images-0-product" /></td></tr>

Using inputs I can do it with javascript, but things get a little more complicated for what I want to do:

The user should click on an image button a modal window will appear with the option to crop.

Now the Upload button is in the modal window. The user is cropping, I select and save the coordinates with javascript, also show a cropped image (simulated using css).

How do I transfer all this mechanism to Django inputs so formsets can understand what I want to do ?