LWC update Record field without Apex controller

Question

I have an LWC Component and i am trying to update the field Images_Uploaded__c to true once the lightning input has finished the upload. I would like to do it in the component without having to modify the apex controller, but i keep getting errors after the upload and i don't know where to look anymore.

HTML :

<lightning-file-upload
        label="Upload"
        name="fileUploader"
        accept={acceptedFormats}
        record-id={event.id}
        onuploadfinished={handleUploadFinished}
        multiple></lightning-file-upload>

JS :

import { LightningElement, api, track, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { updateRecord } from 'lightning/uiRecordApi';


import TREATMENT_EVENT_FIELD from '@salesforce/schema/Treatment_Event__c.Images_Uploaded__c';

const FIELDS = [
  TREATMENT_EVENT_FIELD
];

import TREATMENT_EVENT_OBJECT from '@salesforce/schema/Treatment_Event__c';

export default class TreatmentEventInfo extends LightningElement {
  @api event;
  @api myRecordId;
  get acceptedFormats() {
    return ['.pdf', '.png' ,'.jpeg','.jpg','.heic'];
}

handleUploadFinished(event) {
  const uploadedFiles = event.detail.files;
  const toastEvent = new ShowToastEvent({
    title: 'Success!',
    message: 'Number of files uploaded: ' + uploadedFiles.length,
    variant: 'success',
    mode: 'sticky',
    duration: 2000
  });
  this.dispatchEvent(toastEvent);

  const fields = {};
  fields[TREATMENT_EVENT_FIELD.fieldApiName] = true;

  const recordInput = {
    fields
  };

  updateRecord({ fields: recordInput, recordId: this.recordId })
    .then(() => {
      const toastEvent = new ShowToastEvent({
        title: 'Success!',
        message: 'Record updated successfully',
        variant: 'success'
      });
      this.dispatchEvent(toastEvent);
    })
    .catch(error => {
      console.error(JSON.stringify(error));
      const errorEvent = new ShowToastEvent({
        title: 'Error!',
        message: 'An error occurred while updating the record: ' + error.message,
        variant: 'error'
      });
      this.dispatchEvent(errorEvent);
    });
}
}

Answer 1

You have several problems with your code.

First, you used:

@api myRecordId;

But then tried to refer to it as:

this.recordId

If this is a record-context aware component, then you must change:

@api myRecordId;

to:

@api recordId;

Otherwise, if this parameter is being passed in, you need to reference it as:

this.myRecordId;

Aside from that, your fields format is incorrect. The record Id must be passed in as part of the fields object, not as a separate parameter. You can see this in the documentation. In addition, using { fields: recordInput } actually causes the data to look like this:

{ fields:
  { fields:
    { [TREATMENT_EVENT_FIELD.fieldApiName]: true
    }
  }
}

Notice the extra layer of nesting. This won't work.

Most likely, you're getting the error because you specified the input as:

{ fields:
  { fields:
    { [TREATMENT_EVENT_FIELD.fieldApiName]: true
    }
  },
  recordId: this.recordId
}

And the API doesn't know how to handle the extra recordId parameter.

Instead, your data should look like:

{ fields: 
  { [TREATMENT_ID_FIELD.fieldApiName]: this.recordId,
    [TREATMENT_EVENT_FIELD.fieldApiName]: true
  }
}

To get there, you'll need the following changes:

import TREATMENT_ID_FIELD from '@salesforce/schema/Treatment_Event__c.Id';

...

  const fields = {};
  fields[TREATMENT_ID_FIELD.fieldApiName] = this.recordId;
  fields[TREATMENT_EVENT_FIELD.fieldApiName] = true;

  updateRecord({ fields })