Passing an Array of Objects to an Endpoint using Angular - arrays

Question

I have a post request where the format of the data getting posted, is like this:
{
"gallery": [{
"id": 606,
"status": 1,
"name": "00000000606.png",
"title": "splash.png",
"location": "",
"caption": "",
"type": "image/png",
"charset": "binary",
"tags": "",
"width": 2732,
"height": 2732,
"size": 476358,
"embed_id": null,
"user": 1,
"date_uploaded": "2019-09-26T05:22:31-04:00",
"storage_adapter": "local",
"url": "/storage/uploads/00000000606.png",
"thumbnail_url": "/storage/uploads/thumbs/606.png",
"old_thumbnail_url": "/storage/uploads/thumbs/00000000606-png-160-160-true.jpg",
"html": null
}, {
"id": 610,
"status": 1,
"name": "00000000610.png",
"title": "icon.png",
"location": "",
"caption": "",
"type": "image/png",
"charset": "binary",
"tags": "",
"width": 1024,
"height": 1024,
"size": 274477,
"embed_id": null,
"user": 1,
"date_uploaded": "2019-09-26T06:43:44-04:00",
"storage_adapter": "local",
"url": "/storage/uploads/00000000610.png",
"thumbnail_url": "/storage/uploads/thumbs/610.png",
"old_thumbnail_url": "/storage/uploads/thumbs/00000000610-png-160-160-true.jpg",
"html": null
}]
}
This then creates a gallery slide show once the data is sent.
In order to compile this array, I have firstly uploaded the images using a drag and drop feature. This uploads to a files directory endpoint and when successfully returned in the response is pushed to an array in local storage. The above data is the local storage object array. So looks fine until I try to send it back up.
Once the rest of the form is filled in, I send the form values using a post method. The data all seems to be shaped correctly, but the server responds with a 500 error.
the error (which won't be familiar to some) as I am using Directus Headless CMS
this error arises when posting from Postman, as I don't get much back in terms of an error message.
{
"success": false,
"error": {
"message": "File not found at path: "
},
"code": 0,
"class": "League\\Flysystem\\FileNotFoundException",
"file": "/homepages/5/d755856449/htdocs/demo/vendor/league/flysystem/src/Filesystem.php",
"line": 386
}
.html
this is the culprit in the view:
<label tooltip="Add images of the product here" placement="right" show-delay="500">Product Gallery<span
class="question">?</span></label>
<ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="galleryFilesDropped($event)"
(onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
Drag & Drop your Gallery Images onto Here.
<button class="update" type="button" (click)="openFileSelector()">Browse Files</button>
</ng-template>
</ngx-file-drop>
<label>Gallery Images</label>
<div class="gallery">
<ng-container *ngIf="!selectedGallery.length">
<div class="no_articles">
<img src="../../../assets/img/no_content-01.svg" alt="no-content icon">
<p>Currently, no gallery images exist, upload them above</p>
</div>
</ng-container>
<ng-container *ngFor="let image of selectedGallery">
<span>
<img class="placeholder" [src]="imageUrl + image.url" alt="selected image thumbnail">
<button class="delete" (click)="deleteImage()">Remove</button>
</span>
</ng-container>
</div>
and in the component.ts, this is the drop and post methods
image-drop method
public galleryFilesDropped(galleryImages: NgxFileDropEntry[], imageFile) {
this.galleryImages = galleryImages;
for (const droppedImage of galleryImages) {
if (droppedImage.fileEntry.isFile) {
const imageEntry = droppedImage.fileEntry as FileSystemFileEntry;
imageEntry.file((image: File) => {
let reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = () => {
let data = reader.result;
let imageUpload = {
title: image.name,
name: image.name,
type: image.type,
size: image.size, data
}
this.configService.uploadImage(imageUpload)
.subscribe(
response => {
if (response) {
imageFile = response.data;
if (localStorage) {
var selectedImages;
if (!localStorage['selectedImages']) selectedImages = [];
else selectedImages = JSON.parse(localStorage['selectedImages']);
if (!(selectedImages instanceof Array)) selectedImages = [];
selectedImages.push(imageFile);
localStorage.setItem('selectedImages', JSON.stringify(selectedImages));
this.storageSubject.next(selectedImages);
}
}
}
)
}
});
} else {
const imageEntry = droppedImage.fileEntry as FileSystemDirectoryEntry;
console.log(droppedImage.relativePath, imageEntry)
}
}
}
the postProduct method
postProduct() {
let productCreate = {
product_category: this.selectedCategory, //posts fine
product_thumbnail: this.selectedImage,//posts fine
gallery: this.selectedGallery, <-- this doesn't send and breaks it
product_name: this.product_name,//posts fine
price: this.price,//posts fine
product_description: this.product_description,//posts fine
available_in_small: this.available_in_small,//posts fine
available_in_medium: this.available_in_medium,//posts fine
available_in_large: this.available_in_large,//posts fine
available_in_extra_large: this.available_in_extra_large,//posts fine
product_web_link: this.product_web_link,//posts fine
ad_click: this.ad_click//posts fine
}
this.storeService.createProduct(productCreate)
.subscribe(
response => {
if (response) {
this.product = response.data;
}
}
)
}
I have tried setting the gallery key value to:
gallery: {
data: JSON.parse(localStorage.getItem('selectedImages'))
},
and the same problem arises. The 500 error returns unknown, but from what I have learned from working this headless CMS, it will be due to the format of the data which is causing this.
I'm all out of ideas having tried a range of different ways to get this to work and I've now exhausted my subject knowledge and power of search to find a solution. Could some clever person possibly suggest what I'm doing wrong here?