Skip to content

uttori/uttori-plugin-upload-multer

Repository files navigation

view on npm npm module downloads Build Status Coverage Status dependency status npm bundle size

Uttori Plugin - Multer Upload

A plugin to add file uploading using Multer.

Install

npm install --save uttori-plugin-upload-multer

Config

{
  // Registration Events
  events: {
    bindRoutes: ['bind-routes'],
  },

  // Directory files will be uploaded to.
  directory: 'uploads',

  // Server route to POST uploads to.
  route: '/upload',

  // Server route to GET uploads from.
  publicRoute: '/uploads',

  // Custom Middleware for the Upload route
  middleware: [],
}

Nested Uploads

When supplised with a fullPath key, nested uploads will retain their paths on upload:

  // File Uploads
  try {
    // https://docs.dropzone.dev/configuration/basics/configuration-options
    Dropzone.options.fileupload = {
      paramName: 'file',
      withCredentials: true,
      init: function init() {
        // Allow dropping a folder to upload all files.
        this.hiddenFileInput.setAttribute('webkitdirectory', true);
      },
    };

    const dropzone = new Dropzone('.dropzone');

    // Add more information to the file uploads.
    dropzone.on('sending', (file, _xhr, formData) => {
      formData.append('fullPath', file.fullPath || '');
      formData.append('filesize', file.size || 0);
      formData.append('lastModified', file.lastModified || Date.now());
    });

    // Read the upload path from the elements data-upload attribute and escape any text sent back from the server.
    dropzone.on('success', (file, responseText) => {
      // Create the correct type of Markdown link.
      let linkToUploadedFile = `[${file.name}](${encodeURI(responseText)})`;
      if (file.type.startsWith('image/')) {
        linkToUploadedFile = `![${file.name}](${encodeURI(responseText)})`;
      } else if (file.type.startsWith('video/')) {
        linkToUploadedFile = `<video controls playsinline muted src="${responseText}"></video>`;
      }

      // Copy to clipboard.
      navigator.clipboard.writeText(linkToUploadedFile).then(() => {
        console.log('Async: Copying to clipboard was successful!');
      }, (error) => {
        console.error('Async: Could not copy text: ', error);
      });

      // Append to the content.
      /** @type {HTMLTextAreaElement | null} */
      const textarea = document.querySelector('textarea#editing');
      if (textarea) {
        textarea.value = `${textarea.value}\n${linkToUploadedFile}\n`;
        textarea.dispatchEvent(new Event('input'));
      }
    });
  } catch (error) {
    console.error('Dropzone Error:', error);
  }

API Reference

Classes

MulterUpload

Uttori Multer Upload

Typedefs

MulterUploadConfig : object

MulterUpload

Uttori Multer Upload

Kind: global class

MulterUpload.configKey ⇒ string

The configuration key for plugin to look for in the provided configuration.

Kind: static property of MulterUpload
Returns: string - The configuration key.
Example (MulterUpload.configKey)

const config = { ...MulterUpload.defaultConfig(), ...context.config[MulterUpload.configKey] };

MulterUpload.defaultConfig() ⇒ MulterUploadConfig

The default configuration.

Kind: static method of MulterUpload
Returns: MulterUploadConfig - The configuration.
Example (MulterUpload.defaultConfig())

const config = { ...MulterUpload.defaultConfig(), ...context.config[MulterUpload.configKey] };

MulterUpload.validateConfig(config, _context)

Validates the provided configuration for required entries.

Kind: static method of MulterUpload

Param Type Description
config object A configuration object.
_context object Unused.

Example (MulterUpload.validateConfig(config, _context))

MulterUpload.validateConfig({ ... });

MulterUpload.register(context)

Register the plugin with a provided set of events on a provided Hook system.

Kind: static method of MulterUpload

Param Type Description
context object A Uttori-like context.
context.hooks object An event system / hook system to use.
context.hooks.on function An event registration function.
context.config object A provided configuration to use.
context.config.events object An object whose keys correspong to methods, and contents are events to listen for.

Example (MulterUpload.register(context))

const context = {
  hooks: {
    on: (event, callback) => { ... },
  },
  config: {
    [MulterUpload.configKey]: {
      ...,
      events: {
        bindRoutes: ['bind-routes'],
      },
    },
  },
};
MulterUpload.register(context);

MulterUpload.bindRoutes(server, context)

Add the upload route to the server object.

Kind: static method of MulterUpload

Param Type Description
server object An Express server instance.
server.post function Function to register route.
server.use function Function to register middleware.
context object A Uttori-like context.
context.config object A provided configuration to use.

Example (MulterUpload.bindRoutes(server, context))

const context = {
  config: {
    [MulterUpload.configKey]: {
      directory: 'uploads',
      route: '/upload',
    },
  },
};
MulterUpload.bindRoutes(server, context);

MulterUpload.upload(context) ⇒ RequestHandler

The Express route method to process the upload request and provide a response.

Kind: static method of MulterUpload
Returns: RequestHandler - The function to pass to Express.

Param Type Description
context object A Uttori-like context.
context.config object A provided configuration to use.

Example (MulterUpload.upload(context)(request, response, _next))

server.post('/upload', MulterUpload.upload);

MulterUploadConfig : object

Kind: global typedef
Properties

Name Type Description
[events] object Events to bind to.
directory string Directory files will be uploaded to.
route string Server route to POST uploads to.
publicRoute string Server route to GET uploads from.
middleware Array.<RequestHandler> Custom Middleware for the Upload route

Tests

To run the test suite, first install the dependencies, then run npm test:

npm install
npm test
DEBUG=Uttori* npm test

Contributors

License