Why image does not saved in database in my Django app

Question

I just wrote an app using django and passing the fields of a post form to html for further rendering. However I how to save how to save the photo inserted using tag.

My code is this:

/main.css:

 .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

/forms.py

class postform(forms.ModelForm):
    class Meta:
        model = Post
        fields = ("__all__")

/models.py:

class Post(models.Model):
    title = models.CharField(max_length=100)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    imagefile = models.FileField(null=True, blank=True, upload_to='PostImg')

And I guess the problem is in html file where I should put {{ form.image }} in input!

/post_form.html

{% load crispy_forms_tags %}
<form method="POST" action="" enctype="multipart/form-data">
     {% csrf_token %}
     <fieldset class="form-group">
     <label for="title">Title</label>
            {{ form.title }}


     {% block javascript %}
            <script src="{% static 'js/postform.js' %}"></script>
            {% endblock javascript %}


            <div class="center mt-4">
              <div class="form-input">

                <div class="preview">
                  <img id="file-ip-1-preview", src="{{ form.imagefile.url }}" alt="{{ form.imagefile.url }}">
                </div>

                <label for="file-ip-1">Add picture</label>
                <input type="file" id="file-ip-1" accept="PostImg/*" onchange="showPreview(event);">
              </div>
            </div>


    </fieldset>

    <div class="form-group">
        <button class="btn btn-outline-info type="submit">Update</button>
    </div>
 </form>

and js/postform.js:

function showPreview(event){
    if(event.target.files.length > 0){
        event.preventDefault(); 
        var src = URL.createObjectURL(event.target.files[0]);
        console.log(src)
        var preview = document.getElementById("file-ip-1-preview");
        preview.src = src;
        console.log(preview.src)

        preview.style.display = "block";

      }
}

and views.py

class PostCreateView(LoginRequiredMixin, CreateView):
    model = Post
    template_name = "app/post_form.html"
    success_url = '/app/home/'
    form_class = postform

    def form_valid(self, form):
        form.instance.author = self.request.user
        form.save(commit=False)

        return super(PostCreateView, self).form_valid(form)

My problem is that I replace {{ form.imagefile }} (which was working perfectly) with <input> tag to preview the picture and change a bit the style. However in this way I my photo looks does not save on db!

Answer 1

You also need to add the name and id attributes to your image upload input tag. Set these attributes as: name ="imagefile" id="id_imagefile"