1

I have created a custom Form Element in Sitecore form named "File Upload Email". There are two validators

  1. File Size validator

enter image description here

  1. Content Type Validator.

enter image description here

According to my current code,validators are working fine but am unable to see the saved data related to file upload in exported excel sheet. enter image description here What do I need to so I can be able to see the saved data related to File Upload Email? Putting the code below:-

const JssNextForm = ({ fields, router }: any) => {
  const { sitecoreContext } = useSitecoreContext();
  const [customFieldFactory, setCustomFieldFactory] = useState<FieldFactory | null>(null);
useEffect(() => {
if (typeof window !== 'undefined') {
  const customFieldFactory = createDefaultFieldFactory();
  customFieldFactory.setComponent(
    '{687A7B09-47E3-4FAA-AB2D-A4BF83DB0F1B}',
    ({ field }: ValueFieldProps<InputViewModel>) => {
      field.valueField.value = field.model.value as string;
      const conditionSettings = field.model.conditionSettings as ConditionSettings;
      const fieldKey = conditionSettings?.fieldKey;
      const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files && event.target.files[0];
        if (file) {
          if (file.size > (field.model.maxFileSize as number)) {
            alert(
              `File size exceeds the maximum allowed size of ${
                field.model.maxFileSize as number
              } bytes.`
            );
            return;
          }
          if (!(field.model.allowedContentTypes as string[]).includes(file.type)) {
            alert('Invalid file type.');
            return;
          }
          field.valueField.value = file.name; // Assigning file name as value
        }
      };
      return (
        <div className="form-row">
          <label
            className={'file-type-label ' + field.model.labelCssClass}
            htmlFor={field.valueField.id}
          >
            {field.model.title}
          </label>
          <div className="form-input--file-type">
            <input
              id={field.valueField.id}
              name={field.valueField.name}
              className={field.model.cssClass}
              type="file"
              data-sc-tracking={field.model.isTrackingEnabled}
              data-sc-field-name={field.model.name}
              data-sc-field-key={fieldKey}
              onChange={handleFileChange}
            />
            <label htmlFor={field.valueField.id}>
              {field.model.buttonDisplayText as string}
            </label>
            <span className="file-name">{field.valueField.value}</span>
          </div>
        </div>
      );
    }
  );
  setCustomFieldFactory(customFieldFactory);
  }
 }, []);

if (!customFieldFactory) {
    return null;
  }

  return (
    <div>
      <Form
        form={fields}
        sitecoreApiHost={''}
        sitecoreApiKey={config.sitecoreApiKey}
        fieldFactory={customFieldFactory}
        onRedirect={(url) => router.push(url)}
      />
    </div>
  );
};
0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.