Django rest and Angular 5 Upload Image

Question

here grabs the image of the form, and I call the service to pass the data

handleFileInput(file: FileList) {
    this.fileToUpload = file.item(0);
  }
  
  CreateDetailProduct(){
    let form = this.FormDetailProductCreate.value;
    let detailproduct = new Detailproduct(); 

    detailproduct.Id_Product = form.Id_Product.id;
    detailproduct.Id_TypeProduct = form.Id_TypeProduct.id;
    detailproduct.Id_Provider = form.Id_Provider.id;
    detailproduct.TotalPrice = form.TotalPrice;
    detailproduct.Quantity = form.Quantity;
    
    detailproduct.Image = this.fileToUpload;


      this.servicedetailproduct.postDetailProduct(detailproduct).subscribe();

 
  }

 <div class="button-row"> 
        <button matSuffix mat-mini-fab color="primary" (click)="imgFileInput.click()">
          <mat-icon>attachment</mat-icon>
        </button> 
        <input  formControlName="Image" hidden type="file" #imgFileInput accept="image/*" (change)="handleFileInput($event.target.files)"/> 
        <img class="imagesize" [src]="imagesUrl" alt="">
      </div>

from django.db import models
from Product.models import ProductModel
from TipoProducto.models import TipoProductoModel
from Proveedor.models import ProveedorModel
from LoteProducto.models import LoteProductoModel


class ProductDetailModel(models.Model):
    Id_Product = models.ForeignKey(ProductModel, null =False, blank=False, on_delete=models.CASCADE)
    Id_TypeProduct = models.ForeignKey(TipoProductoModel, null =False, blank=False, on_delete=models.CASCADE)
    Id_Lote = models.ForeignKey(LoteProductoModel, null =False, blank=False, on_delete=models.CASCADE)
    Id_Provider = models.ForeignKey(ProveedorModel, null =False, blank=False, on_delete=models.CASCADE)
    TotalPrice = models.FloatField()

    Quantity = models.IntegerField()
    Image = models.ImageField(upload_to="ProductDetail/images/", null=True, blank=True)

I get this error when you sent the image

{Image: ["The submitted data was not a file. Check the encoding type on the form."]}

how can I do to load the image in angular 5 to django, or what am I doing wrong

Juan Davir Burgos Oquendo · Accepted Answer · 2018-05-15 13:10:36Z

1

in your post method in angular you have to do something like this:

postDetailProduct(detailproduct) {
    let formData: FormData = new FormData();

    if (detailproduct) {
        for(let key in detailproduct){
            formData.append(key, detailproduct[key]);
        }
    }

    formData.append('thumbnail', detailproduct.Image, detailproduct.Image.name);

    return this._http.post(url, formData)
        .pipe(
            map(res => res.json())
        );
 }

Pd: let me know if this solution works for you.

edited May 15, 2018 at 13:10

answered May 14, 2018 at 21:51

Juan Davir Burgos Oquendo

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django rest and Angular 5 Upload Image

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related