Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomaszpilch/media-manager-next.js
Simple media manager to use it for uploading and managing resources (images, files, etc.). It uses MUI material design theme.
https://github.com/tomaszpilch/media-manager-next.js
gcs material-design media-manager mui nextjs react resource-manager
Last synced: 7 days ago
JSON representation
Simple media manager to use it for uploading and managing resources (images, files, etc.). It uses MUI material design theme.
- Host: GitHub
- URL: https://github.com/tomaszpilch/media-manager-next.js
- Owner: TomaszPilch
- License: mit
- Created: 2022-06-14T08:38:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-07T08:37:35.000Z (over 2 years ago)
- Last Synced: 2025-01-09T09:49:26.567Z (16 days ago)
- Topics: gcs, material-design, media-manager, mui, nextjs, react, resource-manager
- Language: TypeScript
- Homepage:
- Size: 288 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js Media Manager
Simple media manager to use it for uploading and managing resources (images, files, etc.). It uses MUI material design theme.
## Install
```
yarn add media-manager-next
```
## Demo
## Usage
Follow these steps.
### Add these environment variables
| name | description |
|-----------------------------------|--------------------------------------------------------------------|
| `APP_ENV` | `production` or string |
| `STORAGE_BUCKET_URL` | URL of google cloud storage bucket |
| `PUBLIC_IMAGE_UPLOAD_FOLDER_DEV` | folder for dev testing |
| `PUBLIC_IMAGE_UPLOAD_FOLDER_PROD` | production folder |
| `GOOGLE_APPLICATION_CREDENTIALS` | https://cloud.google.com/docs/authentication/getting-started?hl=en |
| `PUBLIC_BUCKET_STORAGE` | bucket name |
### Create Next.js api endpoints (examples with prisma, you can use another ORM)
file `pages/api/media/[...media].ts`
```
import { path, pick } from 'ramda'
import MediaApiClient from 'media-manager-next/lib/MediaManagerApi'
import prisma from '../../../src/graphql/database'
export const config = {
api: {
bodyParser: true,
},
}
const processMediaItem = (mediaItem) => ({
...mediaItem,
...(Array.isArray(mediaItem.texts) && mediaItem.texts.length
? pick(['title', 'description'], mediaItem.texts[0])
: {}),
})
export const mediaItemInstance = MediaApiClient({
onMediaUpload: (mimetype, url, dimensions) =>
prisma.mediaItem.create({
data: {
type: mimetype,
url,
width: dimensions.width,
height: dimensions.height,
},
}),
getAllMediaItems: (language) =>
new Promise((resolve, reject) => {
return prisma.mediaItem
.findMany({
orderBy: { ['id']: 'desc' },
include: { texts: { where: { language } } },
})
.then((data) => {
resolve(data.map(processMediaItem))
})
.catch(reject)
}),
updateMediaItem: (id, data, language) =>
prisma.mediaItem.update({
where: { id },
data: {
data: path(['data'], data),
texts: {
upsert: {
where: { mediaItemId_language: { language, mediaItemId: id } },
create: {
title: path(['title'], data),
description: path(['description'], data),
language,
},
update: {
title: path(['title'], data),
description: path(['description'], data),
},
},
},
},
include: {
texts: { where: { language } },
},
}),
onMediaDelete: (id: number) => prisma.mediaItem.delete({ where: { id } }),
})
export default async function mediaClient(req, res) {
await mediaItemInstance(req, res)
return true
}
```
file `pages/api/media/upload.ts`
```
import { mediaItemInstance } from './[...media]'
export const config = {
api: {
bodyParser: false,
},
}
export default async function mediaClient(req, res) {
await mediaItemInstance(req, res)
return true
}
```
### Add translations to your i18n lib
```
{
"navBar": {
"title": "Uložiště souborů",
"searchPlaceholder": "hledat"
},
"rightBar": {
"chooseFiles": "nahrát",
"selectedItem": {
"title": "Vybraný soubor",
"type": "typ",
"uploaded": "nahráno",
"updated": "upraveno"
},
"form": {
"title": "titulek",
"description": "popis"
},
"actions": {
"select": "vybrat",
"delete": "smazat",
"save": "uložit",
"cancel": "zrušit úpravy"
}
}
}
```
### Use media manager
```
{open && (
setOpen(false)}
onSelect={handleOnSelect}
selectedDefaultId={value ? parseInt(value) : undefined}
selectedItemForm={}
t={mediaTranslation.t}
/>
)}
```
### `` component
- create your custom form for editing media properties
- MediaManager pass `data`, `t` and `onChange` props to your form