Encountering an issue with the image upload feature on a component form that consists of 8 entries - 7 text inputs and 1 image upload field. While all data is successfully submitted to the node server, the image upload function only sporadically works.
When attempting to choose an image, an error message pops up stating, "Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string."
<button class="btn logo" mat-stroked-button type="button"
(click)="filePicker.click()">Pick Image
</button>
<input type="file" #filePicker formControlName="logo"
name="logo" (change)="onImagePicked($event)" />
While I understand the error, similar syntax has been utilized in various examples. Is there an alternative approach that can be considered?
If modifications are made to 3 fields prior to selecting an image, the feature operates as intended by uploading the file via multer, adding the filename to the database, and returning results. However, the "failed to set value" error persists even though the functionality seems to work intermittently.
this.adminSettingsForm.patchValue({'logo': file,}); // doesn't work
this.adminSettingsForm.patchValue({['logo']: file,}); // doesn't work
this.adminSettingsForm.patchValue({[logo]: file,}); // doesn't work
this.adminSettingsForm.controls['logo'].patchValue(file, {emitEvent : false}); // doesn't work
this.adminSettingsForm.get('logo').updateValueAndValidity(); // throws an error because of the above.
The service responsible for sending and receiving data seems to function correctly, except for handling images.
updateStoreInfo(
storeName: string, logo: File, address: string,
city: string, state: string, zip: string, phone: string, email: string
) {
const formData = new FormData();
formData.append('storeName', storeName);
formData.append('logo', logo);
formData.append('address', address);
formData.append('city', city);
formData.append('state', state);
formData.append('zip', zip);
formData.append('phone', phone);
formData.append('email', email);
return this.http.post<{ message: string; settings: Settings }>(`${this.serverUrl}/admin/settings/storeInfo`, formData)
.subscribe(result => {
const resData = result;
alert(resData['message']);
const adminSettings = resData['settings'];
this.settingsChanged(adminSettings);
});
}
Here's the corresponding functionality on the node server:
router.post('/settings/storeInfo', multer({dest: imgDir, storage:
imgStorage, fileFilter: fileFilter})
.fields([
{ name: 'logo', maxCount: 1 },
]), (req, res, next) => {
storeSettingsId = req.body.storeSettingsId
StoreSettings.findById(storeSettingsId)
.then(settings => {
if (req.files.logo) {
settings.image= req.files.logo[0].filename;
} else {
settings.image = settings.image;
}
settings.storeName = req.body.storeName,
settings.address = req.body.address,
settings.city = req.body.city,
settings.state = req.body.state,
settings.zip = req.body.zip,
settings.phone = req.body.phone,
settings.email = req.body.email,
settings.save();
return res.status(201).json({ message: 'Settings Saved!', settings });
})
.catch(err => {
console.log(err);
const error = new Error(err);
error.httpStatusCode = 500;
return next(error);
});
});
Facing a persistent challenge while trying to submit forms with multiple image uploads. The last image tends to get overlooked during submission. After weeks of troubleshooting, seeking a fresh solution that hasn't already been Googled.
UPDATE: Code revisions have been implemented, yet issues persist: this.adminSettingsForm.patchValue({ 'logo': file }); // doesn't work - Failed to set the 'value' property... (console)
this.adminSettingsForm.patchValue({'logo': file, });
// doesn't work with trailing comma - Failed to set the 'value' property... (console)
this.adminSettingsForm.patchValue({['logo']: file, });
// doesn't work - Failed to set the 'value' property... (console)
this.adminSettingsForm.patchValue({[logo]: file, });
// doesn't work - did I mean this.logo(IDE) - logo not defined(console)
this.adminSettingsForm.controls['logo'].patchValue(file);
// refErr 'logo is not defined'
this.adminSettingsForm.controls['logo'].patchValue(file, {emitEvent : false});
// dooesn't work - Failed to set the 'value' property... (console)
this.adminSettingsForm.controls['logo'].value = file;
// Cannot assign to 'value' because it is a read-only property. Breaks build but not error in console
this.adminSettingsForm.value['logo'].value = file; // doesn't work
All components appear to be functioning correctly apart from updating the file value entered. Seeking insights into this recurring issue as attempts at finding a resolution seem to lead back to square one.