📺

Upload Media

Graphweaver supports uploading media to a storage provider, and rendering images in the admin UI. To do this, Graphweaver supplies a storage provider class and a MediaField decorator to connect and describe the media being uploaded. An example of using AWS S3 to handle images can be seen in the examples folder.

@MediaField decorator

The @MediaField decorator is used to describe a field that represents media. It accepts:

storageProvider - A provider that connects the storage provider to the Graphweaver GraphQL API.

An example of a storage provider and usage of the @MediaField decorator can be seen below:


import { GraphQLEntity, Field, ID, Entity } from '@exogee/graphweaver';
import {
	S3StorageProvider,
	StorageType,
	MediaField,
	Media,
} from '@exogee/graphweaver-storage-provider';
import { MikroBackendProvider } from '@exogee/graphweaver-mikroorm';

import { Submission as OrmSubmission } from '../entities';
import { pgConnection } from '../database';

if (!process.env.AWS_S3_BUCKET) throw new Error('Missing required env AWS_S3_BUCKET');

const s3 = new S3StorageProvider({
	bucketName: process.env.AWS_S3_BUCKET,
	region: process.env.AWS_REGION,
	type: StorageType.S3,
	expiresIn: 3600,
	endpoint: process.env.AWS_S3_ENDPOINT,
});

@Entity('Submission', {
	provider: new MikroBackendProvider(OrmSubmission, pgConnection),
})
export class Submission extends GraphQLEntity<OrmSubmission> {
	public dataEntity!: OrmSubmission;

	@Field(() => ID)
	id!: string;

	@MediaField({ storageProvider: s3 })
	image?: Media;
}