feat(media): create the official media plugin

- Create the @tensei/media plugin - Setup graphql file upload mutation for media plugin - Handle multiple file uploads - Save uploaded files to storage
tenseijs · Dec 1, 2020 · e373a87 · e373a87
1 parent f3c00af
commit e373a87
Show file tree

Hide file tree

Showing 42 changed files with 747 additions and 807 deletions.
diff --git a/examples/blog/app.js b/examples/blog/app.js
@@ -2,6 +2,7 @@ require('dotenv').config()
 const { docs } = require('@tensei/docs')
 const { auth } = require('@tensei/auth')
 const { rest } = require('@tensei/rest')
+const { media } = require('@tensei/media')
 const { graphql } = require('@tensei/graphql')
 const { tensei, plugin, route } = require('@tensei/core')
 const { RedisPubSub } = require('graphql-redis-subscriptions')
@@ -15,7 +16,6 @@ module.exports = tensei()
     .dashboardPath('tensei')
     .resources([Tag, Post, User, Comment])
     .clientUrl('https://google.com')
-    .serverUrl('http://localhost:5000')
     .defaultStorageDriver('local')
     .routes([
         route('Get products')
@@ -68,9 +68,10 @@ module.exports = tensei()
                 },
             })
             .plugin(),
+        media().plugin(),
         rest().plugin(),
         docs().plugin(),
-        plugin('Custom Slug Validation').setup(({ indicative }) => {
+        plugin('Custom Slug Validation').register(({ indicative }) => {
             indicative.validator.extend('slug', {
                 async: false,
                 validate(data, field) {
@@ -84,7 +85,7 @@ module.exports = tensei()
     .databaseConfig({
         type: process.env.DATABASE_TYPE || 'mysql',
         dbName: process.env.DATABASE_NAME || 'mikrotensei',
-        debug: process.env.DEBUG || false,
+        debug: process.env.DEBUG === 'true' || false,
         user: process.env.DATABASE_USER || 'mikrotensei',
         password: process.env.DATABASE_PASSWORD || '',
     })
diff --git a/examples/blog/app.ts b/examples/blog/app.ts
@@ -72,7 +72,7 @@ module.exports = tensei()
         rest().plugin(),
         docs()
         .plugin(),
-        plugin('Custom Slug Validation').setup(async ({ indicative }) => {
+        plugin('Custom Slug Validation').register(async ({ indicative }) => {
             indicative.validator.extend('slug', {
                 async: false,
                 validate(data, field) {

diff --git a/examples/blog/tools/stripe.js b/examples/blog/tools/stripe.js
@@ -1,7 +1,7 @@
 const { plugin } = require('@tensei/core')
 
 module.exports = (config = {}) =>
-    plugin('Stripe').setup(async ({ app, style, script }) => {
+    plugin('Stripe').register(async ({ app, style, script }) => {
         console.log('-----> STRIPE PLUGIN CONFIG', config)
 
         return {}

diff --git a/examples/blog/upload.html b/examples/blog/upload.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Axios upload</title>
+</head>
+<body>
+    <form action="" onsubmit="on_form_upload(event)">
+        <input type="file" name="files" id="files" multiple>
+
+        <button type='submit'>Submit</button>
+    </form>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
+    <script>
+        function on_form_upload(event) {
+            event.preventDefault()
+
+            const files = document.getElementById('files').files
+            console.log(files)
+        }
+    </script>
+</body>
+</html>
diff --git a/media-library.md b/media-library.md
@@ -0,0 +1,17 @@
+- Create a `Media` resource
+- Add the following fields to the resource:
+    - Unique UUID
+    - Parent ID, to mark this media as owned by another media. This will allow a single media to have multiple conversions / transformations
+    - File Size, to save the file size in KB
+    - File Name, to save the original name of the file
+    - Model ID, to save the related model id to this file
+    - Alt Text, nullable, to save the alt text for this file, used only for image media types
+    - Caption, nullable, to caption an image. 
+    - Ext, to save the file extension
+    - Mime, to save the file mime type
+    - Provider, to save the file upload provider
+    - Provider Meta, to save metadata for the media upload provider, for example, saving the media ID from cloudinary or dropbox
+
+- Associate the Media resource with different resources in the app.
+    - User `hasOne('Media')`, and the hasOne foreign key field is Model ID, and the relation name is `avatar`
+    - Post `hasMany('Media')`, and the hasMany foreign key field is Model ID, and the relation name is `sliders`
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -13,7 +13,6 @@
         "@types/express": "^4.17.6",
         "@types/jest": "^25.2.3",
         "@types/supertest": "^2.0.9",
-        "@types/uuid": "^8.3.0",
         "jest": "^26.0.1",
         "prettier": "^2.0.5",
         "supertest": "^4.0.2",