Django - Custom Model Form used in a template - django

Question

I've been trying to figure out how to create a custom html template that when submitted will upload to a model form. I'm newer to Django so so far i've been a little confused on the Django Docs on the forms. I have created a custom HTML Template it looks like:
HTML:
<form role="form" method="post" action="." id="js-upload-form" enctype="multipart/form-data">
{% csrf_token %}
<img id="image1" src="/media/{{ gallery.logo }}" alt="">
<input type="file" name="logo" id="logo" multiple>
<br>
<input type="submit" value="Register" id="js-upload-submit" >
</form>
You can notice that I have given the input ID = logo. When I click submit I would like this to upload an image to my ModelForm.
Form:
class UploadFileForm(ModelForm):
logo = forms.ImageField(required=False)
class Meta:
model = Content
fields = ['logo']
Models:
class Content(models.Model):
logo = models.ImageField(upload_to=content_file_name, null=True, blank=True)
Is there anyway with the specific way I have designed my HTML template to submit the image to the Model Form? I am trying to avoid using { form.as_p } and such as it doesnt do the customization I would like.

Answer 1

You should send the form object to the template and call the {{form.logo}} field.
View:
if request.method == 'POST': # When the form is submitted
form = UploadFileForm(request.POST)
if form.is_valid():
new_content = form.save()
# After the form.save a new model is created
# and the file is uploaded to the desired location
else:
form = UploadFileForm()
ctx = {}
ctx['form'] = form
return render_to_response('yourtemplate.html', ctx, context_instance=RequestContext(request))
Template:
<form role="form" method="post" action="." id="js-upload-form" enctype="multipart/form-data">
{% csrf_token %}
{{form.logo}}
</form>
Customization:
If you would like to customize the input field, you should hide the form field like:
<form role="form" method="post" action="." id="js-upload-form" enctype="multipart/form-data">
{% csrf_token %}
{{form.logo.as_hidden}} # This won't show the input
</form>
And now to customize the input you should show your custom input and via jQuery or JavaScript bind the custom input/button to the hidden form logo field.
E.g:
If you want to trigger the file select with a custom button, you should do:
# ... Other code
<button class='btn btn-success yourclass' onClick='selectFile'>
<script>
function selectFile(){
$('#id_logo').click()
}
<script>