Keystone能否重复上传同一文件？上传HTML/CSS的方向是否正确？

Hey there! Let's break down your two questions one by one to get you sorted.

The core issue here is that Keystone's default local file adapter avoids overwriting existing files with the same name when using originalname. To fix this, you can customize the file adapter's save logic to overwrite the old file whenever a new upload with the same filename comes in. Here's how to implement it:

First, create a custom local file adapter with a modified save method that checks for existing files and replaces them:

const { LocalFileAdapter } = require('@keystonejs/file-adapters');
const fs = require('fs');
const path = require('path');

const localFileAdapter = new LocalFileAdapter({
  src: './public/uploads', // Your local storage directory
  path: '/uploads', // URL path to access files
  async save({ stream, filename }) {
    // Define the full path to the target file
    const filePath = path.join(this.src, filename);
    
    // Delete the existing file if it exists
    if (fs.existsSync(filePath)) {
      fs.unlinkSync(filePath);
    }
    
    // Write the new file to disk
    const writeStream = fs.createWriteStream(filePath);
    await new Promise((resolve, reject) => {
      stream.pipe(writeStream);
      writeStream.on('finish', resolve);
      writeStream.on('error', reject);
    });
    
    return { filename }; // Return the original filename to keep your URL consistent
  },
});

Then, attach this adapter to your File field and add a hook to ensure the original filename is preserved during updates:

keystone.createList('StaticAsset', {
  fields: {
    file: {
      type: File,
      adapter: localFileAdapter,
      isRequired: true,
      hooks: {
        beforeChange: async ({ resolvedData }) => {
          // Force the filename to use the original upload name
          if (resolvedData.file) {
            resolvedData.file.filename = resolvedData.file.originalname;
          }
        },
      },
    },
  },
});

This setup lets you upload the same CSS file multiple times—each upload overwrites the old version, so your HTML's static reference (like /uploads/style.css) will always load the latest file. If you need to keep backups of old files, modify the save method to rename the existing file (e.g., style.css.old) instead of deleting it before saving the new one.

This depends entirely on your use case:

• If non-technical users need to update static assets: Yes, this is a great approach. Keystone provides a user-friendly admin interface to manage these files without needing to edit code or deploy changes. It's perfect for scenarios like updating site styles, landing page HTML, or other static content that needs frequent edits by non-devs.

• If these are development-time static assets: Probably not. For files that are part of your app's core code (like base CSS or template HTML), you're better off keeping them in your project's public directory and using build tools (Webpack, Vite, etc.) to handle caching and deployment. This gives you better control over versioning and performance.

Bonus tip for caching issues #

Even with overwriting, browsers might cache old versions of your CSS. To work around this without renaming files, add a version parameter to your HTML link tag:

<link rel="stylesheet" href="/uploads/style.css?v=1">

Each time you upload a new version, increment the v value—this tells the browser to fetch the latest file instead of using the cached one.

内容的提问来源于stack exchange，提问作者Priyanka