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

Nobody has claimed this yet.

**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.

```tsx
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:

```tsx
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 (












);
};

export default ConfigWatermarkForm;
```

Preferred solution would be:
```tsx
const ConfigWatermarkForm = () => {

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

return (












);
};

export default ConfigWatermarkForm;
```

Start by reading the ImageInput and FileInput entry points, focusing on how transformedFile objects are created and how afterRead, parse, and format interact during save. Reproduce the example with custom src and title fields, then verify that a configurable transformation preserves the custom shape for both single and multiple files and remains correct after saving.

Written by the indexing model from the issue text.