To prepare our html to upload images we would need to add input field to our html.
<input type="file" class="form-control" name="logo" required (change)="handleFileInput($event.target.files)" >
When file is changed it is going to call a function. We would need to define that function at our component.
image_to_upload: File = null; handleFileInput(files: FileList) { this.image_to_upload = files.item(0); } create(image_data) { this.image_service.uploadImage(this.image_to_upload, image_data); }
Then at our service we would need to make the post request.
uploadImage(fileToUpload, image_data) { const endpoint = 'http://localhost:8000/image/'; const formData: FormData = new FormData(); for(const k in image_data){ formData.append(k, image_data[k]); } formData.append('image', fileToUpload, fileToUpload.name); console.log(formData); return this.http .post(endpoint, formData).toPromise().then( (res) => { console.log(res); } ); }
Which will be sufficient for any API that accepts POST request:
{ image:}
If we want to implement it using django, it would look like following:
Django model:
class Image(models.Model): image = models.FileField(storage = MyStorage(location="media/shop"))
Django Rest Framework serializers and viewsets:
class ImageSerializer(serializers.ModelSerializer): class Meta: model = Image fields = ('id','logo',) class ImageViewSet(viewsets.ModelViewSet): queryset = Image.objects.all() serializer_class = ImageSerializer router = routers.DefaultRouter() router.register(r'image', ImageViewSet) urlpatterns = router.urls