Uploading Image from angular to Django using Rest Api Angular 13 / Django 4.1 Rest Framework

I'm trying to upload an image from Angular to Django using Rest framework, When I try uploading i got the following error : UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 177: invalid start byte So i tryied most of all the answers but no success. Angular v13 Django v4.1

This is My class Model that I'm trying to fetch : `

    class Product(models.Model):
        famille = models.ForeignKey(Famille, on_delete=models.CASCADE)
        tva = models.ForeignKey(Tva, on_delete=models.CASCADE)
        poidsUnity = models.ForeignKey(Poids, on_delete=models.CASCADE, null=True)
        tailleUnity = models.ForeignKey(Taille, on_delete=models.CASCADE, null=True)
        couleur = models.ForeignKey(Color, on_delete=models.CASCADE, null=True)
        marque = models.ForeignKey(Marque, on_delete=models.CASCADE, null=True)
        poids = models.FloatField(null=True)
        taille = models.FloatField(null=True)
        photo = models.ImageField(upload_to='pics', null=True, blank=True)

```
`


This is My Serializer Class :

    class ProductSerializer(serializers.ModelSerializer):
        photo = Base64ImageField(
           max_length=None, use_url=True, allow_empty_file=True, allow_null=True,
        )

        class Meta:
                model = Product
                fields = '__all__'

```
```
```
`

This is My Views :

    @csrf_exempt
    def productCrud(request, id=0):
        if request.method == 'GET':
                if id != 0:
                        products = Product.objects.filter(id=id).first()
                        products = ProductSerializer(products)
                else:
                        products = Product.objects.all()
                        products = ProductSerializer(products, many=True)
                return JsonResponse(products.data, safe=False)
        elif request.method == 'POST':
                product = JSONParser().parse(request)
                product = ProductSerializer(data=product)
                if product.is_valid():
                        product.save()
                        return JsonResponse(product.data, safe=False)
                return JsonResponse(product.errors, safe=False)`

`

urls.py :
`
    urlpatterns = [

                                  # full path /product/ [get, post, put]
                                  path('', crud.productCrud),
                                  path('<int:id>/', crud.productCrud),
    ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

In the frontend I have The folowing :
```
My Service Class :
`
```

```
    save1(formData: FormData): Observable<Product> {
       return this.http.post<Product>(this.API, formData);
    }

`
My Model Class :
`

    export class Product {
      photo: string;
      id: number;
      name: string;
      description: string;
...    }

`
In the TypeScript Component I have The Folowing :
`

`
    onChange(event) {
       this.file = event.target.files[0];
    }
```


```

```
    save() {
        const formData = new FormData();
        formData.append('photo', this.file);
        formData.append('tva', this.product.get('tva').value);
        formData.append('name', this.product.get('name').value);
        formData.append('reference', this.product.get('reference').value);
        formData.append('marque', this.product.get('marque').value);
        formData.append('tailleUnity', this.product.get('tailleUnity').value);
        formData.append('poidsUnity', this.product.get('poidsUnity').value);
        formData.append('famille', this.product.get('famille').value);
        formData.append('poids', this.product.get('poids').value);
        formData.append('taille', this.product.get('taille').value);
        this.selectedProduct = this.product.value;
        this.productService.save1(formData).subscribe(
            data => this.prepare(data),
            error => console.log(error))
        }
`

And Finaly in the Html File I have:

```
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-2">
    <mat-form-field class="example-full-width" appearance="outline">
    <mat-label>Photo</mat-label>
    <ngx-mat-file-input formControlName="photo" (change)="onChange($event)">
    </ngx-mat-file-input>
    <mat-icon matSuffix>cloud_upload</mat-icon>
    </mat-form-field>
    </div>


By the way I have no problem when uploading via the admin site, and also for retrieving the image so that i just have a problem with uploading.

So Kindly if you have any Idea what the problem and how to solve this i will be apprecied ;)
Thank's in Advance

Back to Top