1. filenamify
Convert a string to a valid safe filename
filenamify
Package: filenamify
Created by: sindresorhus
Last modified: Wed, 12 Jul 2023 19:07:00 GMT
Version: 6.0.0
License: MIT
Downloads: 16,404,785
Repository: https://github.com/sindresorhus/filenamify

Install

npm install filenamify
yarn add filenamify

filenamify

Convert a string to a valid safe filename

On Unix-like systems, / is reserved. On Windows, <>:"/\|?* along with trailing periods are reserved.

Install

 npm install filenamify

Usage

 import filenamify from 'filenamify';

filenamify('<foo/bar>');
//=> '!foo!bar!'

filenamify('foo:"bar"', {replacement: '🐴'});
//=> 'foo🐴bar🐴'

API

filenamify(string, options?)

Convert a string to a valid filename.

filenamifyPath(path, options?)

Convert the filename in a path a valid filename and return the augmented path.

 import {filenamifyPath} from 'filenamify';

filenamifyPath('foo:bar');
//=> 'foo!bar'

options

Type: object

replacement

Type: string
Default: '!'

String to use as replacement for reserved filename characters.

Cannot contain: < > : " / \ | ? *

maxLength

Type: number
Default: 100

Truncate the filename to the given length.

Only the base of the filename is truncated, preserving the extension. If the extension itself is longer than maxLength, you will get a string that is longer than maxLength, so you need to check for that if you allow arbitrary extensions.

Systems generally allow up to 255 characters, but we default to 100 for usability reasons.

Browser-only import

You can also import filenamify/browser, which only imports filenamify and not filenamifyPath, which relies on path being available or polyfilled. Importing filenamify this way is therefore useful when it is shipped using webpack or similar tools, and if filenamifyPath is not needed.

 import filenamify from 'filenamify/browser';

filenamify('<foo/bar>');
//=> '!foo!bar!'

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin