productscreate.html

<form method="post">
      {% csrf_token %}
       
        <table border="1">
    <tr>
        <td>Title:
        <input type="text" name="title" id="title" data-bind="value: title"></td>
        <br>
    </tr>
    <tr>
        <td>Description:
        <textarea name="description" id="description">Description</textarea></td>
        <br>
    </tr>
    <tr>
        <td>Image:
        <input type="file" name="image" id="image"></td>
        <br>
    </tr>
    
    <tr>
        <td><button type="submit" id="submit" data-bind="submit: mySubmit">Submit</button></td>
    </tr>

</table>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<script>
  
  var formData1 = new FormData();
  $(document).on('click', '#submit',function(e){
    e.preventDefault()
    var viewModel = {
    title:ko.observable(),description:ko.observable(),
        mySubmit : function(formElement) {
            var formData = {
                'title' : viewModel.title() ,
                'description'  : viewModel.description(),
            };
            formData1.append('image',  $('#image')[0].files[0])
            $.ajax({
            type: "POST",
            url: '{% url "productscreate" %}',
            data: formData,formData1,
            cache: false,
            processData: false,
            enctype: 'multipart/form-data',
            contentType: false,
            success: function (){
                window.location = '{% url "productslist" %}'; 
            },
            error: function(xhr, errmsg, err) {
                console.log(xhr.status   ":"   xhr.responseText)
            } 
            });
        }
    };
ko.applyBindings(viewModel);
 
</script>

views.py

class ProductsList(ListView):
     model = products
     context_object_name = 'products'
     template_name = "productslist.html"  
    

class ProductsCreate(CreateView):
    model = products
    fields = ['title','description','image']
    template_name = "productscreate.html"     
    success_url=reverse_lazy('productslist')


class ProductsDetailView(DetailView):
     template_name = "productsdetail.html"
     queryset = products.objects.all()
     context_object_name = 'products'
     model = products

models.py

class products(models.Model):
    title = models.CharField(max_length=200)
    description = models.CharField(max_length=200)
    image = models.FileField(blank=True,null=True)

    def __str__(self):
         return self.title

productsdetail.html

  <form>

      
      
     Title:- {{products.title }} <br><br>
     
     Description:- {{ products.description}}<br><br>

 
     Image :- <img src="{{products.image.url}}" alt="image"><br><br>

     

 

     <button><a href="/edit/{{ products.id}}">Edit</a></button>
    </form>

Image is not displaying in detail products page It shows The 'image' attribute has no file associated with it in detail page. When i create a product image is not displaying I have given ajax code also Please help me to solve this Thanks in advance

CodePudding user response：

It means that for that product, there is no image, so the ImageField is NULL. You thus should check if there is an image with:

{% if products.image %}
    Image :- <img src="{{products.image.url}}" alt="image"><br><br>
{% endif %}

CodePudding user response：

As much i have understand you are not able to upload imaage from the frontend is you are having enctype="multipart/form-data" in your form

<form method="post" enctype="multipart/form-data" action ="">
      {% csrf_token %}
       
        <table border="1">
    <tr>
        <td>Title:
        <input type="text" name="title" id="title" data-bind="value: title"></td>
        <br>
    </tr>
    <tr>
        <td>Description:
        <textarea name="description" id="description">Description</textarea></td>
        <br>
    </tr>
    <tr>
        <td>Image:
        <input type="file" name="image" id="image"></td>
        <br>
    </tr>
    
    <tr>
        <td><button type="submit" id="submit" data-bind="submit: mySubmit">Submit</button></td>
    </tr>

</table>
</form>

i belive you have configure your staticfiles and media files perfectly this should work