How do I work with media asses outside of the media asset page?
Currently I have the code below that is just a text box asking for the media asset upload ID
But what I really want is code that would display like this:
And I couldnāt seem to find an answer here:
Plugin UI Documentation
Essentially I want this file to come from media assets. Or failing that a way to write a button that would open a file picker that would then be saved to the standard media assets.
Specifically there are two things I want to do:
- Be able to load an image (no need to specify focal point) within a field extension presentation config
- Be able to load several PDFs within a sidebar control
This is the code I currently have that I would like to update to use media asset, instead of forcing the user to go get the ID
export function ThumbnailTranslateConfigScreen({ ctx }: ConfigPropTypes) {
const [formValues, setFormValues] = useState<Partial<ThumbnailParameters>>(
ctx.parameters,
);
const errors = ctx.errors as Partial<Record<string, string>>;
const update = useCallback((field:any, value:any) => {
const newParameters = { ...formValues, [field]: value };
setFormValues(newParameters);
ctx.setParameters(newParameters).then(() => {console.log("Parameters set")});
}, [formValues, setFormValues, ctx.setParameters]);
return (
<Canvas ctx={ctx}>
<Form>
<TextField
id="baseThumbnailId"
name="baseThumbnailId"
label="The Upload Id of the base thumbnail, see media library"
required
value={formValues.baseThumbnailId ?? "VhJF2CPgQ0CFwinsAZbSKQ"}
onChange={update.bind(null, 'baseThumbnailId')}
/>
//...
</Form>
</Canvas>
);
}
And then I am also building something like this where I would like the user to have the option with āreferenceā to choose from PDFs inside the media asset library, add a new one, or use an external link
div className={"row-container"}>
{
allReferences.map((currentReference, index) => {
return (
<>
<div className={"row"}>
///.....
<div className="referenceSection">
<label htmlFor="reference">Reference:</label><br/>
<input
id="reference"
type="text"
value={currentReference.link} ///I would like this, instead of being a manually inserted url to have the option, that would allow the user to choose from PDFs inside the media asset library, upload a new PDF, or use an external url link
onChange={(e) => updateReference({link: e.currentTarget.value}, index)}
/>
</div>
</div>
<div className={"row"}>
<div className="addDeleteSection"><Button
onClick={() => deleteReference(index)}>Delete This</Button></div>
<div className="addDeleteSection"><Button
onClick={() => addNewReferenceAtIndex(index)}>Add New after this</Button>
</div>
</div>
</>
