Make it possible to adjust transformedFile object shape in ImageInput, FileInput

[papppeter]

Is your feature request related to a problem? Please describe.
My api uses a different attribute names for file url (src) and title.
I tried to use afterRead lifecyclecallback, but it did not worked all the time (after save it used the original object)
I introduced new attributes to my api, but i don't find it ideal
I create a local version of transformFiles which did the trick, but multiple is used as an inside variable, the code look and feel was not nice anymore

Describe the solution you'd like
It would be nice, if we could adjust the shape of the transformedFile with a callback function, than it could be lined up easily with api, and would be even easy to add more variables to it.

const transform = (file, preview) =>{
    return {
      rawFile: file,
      contentUrl: preview,
      title: file.name,
    };
  }

  // turn a browser dropped file structure into expected structure
  const transformFile = file => {
    if (!(file instanceof File)) {
      return file;
    }

    const preview = URL.createObjectURL(file);
    const transformedFile = transform(file, preview);

    return transformedFile;
  };

  const transformFiles = (files: any[]) => {
    if (!files) {
      return multiple ? [] : null;
    }

    if (Array.isArray(files)) {
      return files.map(transformFile);
    }

    return transformFile(files);
  };

Describe alternatives you've considered
Maybe if afterRead would be fixed, that could give a nice solution as well.

Additional context
My solution now:

const ConfigWatermarkForm = () => {

  const multiple = false;

  // turn a browser dropped file structure into expected structure
  const transformFile = file => {
    if (!(file instanceof File)) {
      return file;
    }

    const preview = URL.createObjectURL(file);
    const transformedFile = {
      rawFile: file,
      contentUrl: preview,
      title: file.name,
    };

    return transformedFile;
  };

  const transformFiles = (files: any[]) => {
    if (!files) {
      return multiple ? [] : null;
    }

    if (Array.isArray(files)) {
      return files.map(transformFile);
    }

    return transformFile(files);
  };

  return (
    <SimpleForm>
      <TextInput source="name"/>
      <DateInput source="activeFrom"/>
      <DateInput source="activeTo"/>
      <ReferenceArrayInput
        reference={ResourceNameEnum.ConfigWatermarkAlloweds}
        source="allowed"
      />
      <ImageInput source="topConfigWatermarkMediaObject" parse={transformFiles} format={transformFiles}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
      <ImageInput source="bottomConfigWatermarkMediaObject" parse={transformFiles} format={transformFiles}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
    </SimpleForm>
  );
};

export default ConfigWatermarkForm;

Preferred solution would be:

const ConfigWatermarkForm = () => {

  const transform = (file, preview) =>{
    return {
      rawFile: file,
      contentUrl: preview,
      title: file.name,
    };
  }
  
  return (
    <SimpleForm>
      <TextInput source="name"/>
      <DateInput source="activeFrom"/>
      <DateInput source="activeTo"/>
      <ReferenceArrayInput
        reference={ResourceNameEnum.ConfigWatermarkAlloweds}
        source="allowed"
      />
      <ImageInput source="topConfigWatermarkMediaObject" transform={transform}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
      <ImageInput source="bottomConfigWatermarkMediaObject" transform={transform}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
    </SimpleForm>
  );
};

export default ConfigWatermarkForm;

[slax57]

Thank you for your suggestion.

I agree passing your own parse and format callbacks can seem a bit cumbersome if you look at their default implementation.

However it turns out, in your case, you only need to provide parse, and since your are not using multiple images, then the code can be dramatically simplified to the following:

const ConfigWatermarkForm = () => {
  const parse = file => {
    const preview = URL.createObjectURL(file);
    return {
      rawFile: file,
      contentUrl: preview,
      title: file.name,
    };
  };

  return (
    <SimpleForm>
      // ...
      <ImageInput source="topConfigWatermarkMediaObject" parse={parse}>
        <ImageField source="contentUrl" title="title"/>
      </ImageInput>
    </SimpleForm>
  );
};

In the end, this code is almost as simple as the preferred solution, so I'm not convinced there is much to gain here.

I do keep in mind that I took shortcuts to come up with that simplified version of the code, and that a more general solution would be preferable, however I don't think adding a new transform prop here is the best thing to do, as it would easily be confused with the already existing parse and format props, or with the transform prop provided by Edit and Create.

IMO it's rather the coupling between ImageInput and ImageField that should be questioned, along with the possibility to edit <ImageField source> which gives the false impression you can choose the field, whereas it is actually hardcoded in ImageInput (or rather FileInput).

TLDR: I don't think the solution you suggest would improve the DX that much, but I'm interested in other solutions.

Lastly, leveraging withLifecycleCallbacks would indeed have been a good alternative here, and this is even what the official documentation suggests.
I'm not sure exactly why you couldn't get it working.
I see you mention overriding afterRead, but to me the most important event to override in your case would rather be beforeSave.
Did you try overriding this one?

I'll leave this feature request open for now, to see if it gains traction from the community and if someone can come up with a better solution.