Customizing File Upload

Background Information

WeDa provides an official file upload component that can meet most basic file upload requirements. However, in actual business scenarios, we often need finer control over the upload process, for example:

• File Type Restrictions: Only specific file formats are allowed for upload (e.g., only Word documents, Excel spreadsheets, or images are permitted).
• File Size Restrictions: Limit the maximum size of uploaded files to prevent excessively large files from occupying storage space.
• Custom Storage Path: Store files to specific paths based on business requirements.
• File Content Validation: Check whether the file content meets requirements, such as image dimensions, document page count, etc.
• Pre-upload and Post-upload Processing: Preprocess files before upload or perform subsequent operations after upload.
• Custom Upload Feedback: Provide more user-friendly notifications for upload success or failure.

The official upload component may not fully meet these custom requirements. In such cases, we can implement more flexible file upload functionality through custom cloud functions. This article describes how to achieve customized file uploads using cloud functions, with a focus on file type validation.

When using the WeDa official file upload component, sometimes we need to customize upload actions, such as adding file type validation, size restrictions, or custom storage paths. In such cases, custom cloud functions can be used to implement file uploads and incorporate the required validation logic.

1. Custom Cloud Function and File Type Validation

In the WeDa environment, create a new cloud function and implement file type validation:

1.1 Adding a package.json file

{
    "name": "app",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {},
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@cloudbase/node-sdk": "latest",
        "@cloudbase/manager-node": "^4.2.8",
        "axios": "^1.6.3",
        "form-data": "^4.0.0"
    }
}

1.2 Adding the index.js file (with file type validation)

The following cloud function code includes a complete implementation of file type validation:

'use strict';
const CloudBase = require("@cloudbase/manager-node");
const FormData = require("form-data");
const axios = require("axios");
const fs = require("fs");
const path = require("path");

exports.main = async (event, context) => {
    const file = event.file // Base64-encoded file
    const fileName = event.fileName // File name
    const cloudPath = "./" + fileName; // Cloud path
    const baseStr = file.split("base64,")[1]
    const binaryData = Buffer.from(baseStr, 'base64');
    
    // Initialize
    const app = CloudBase.init({});

    // Feature module retrieval
    const { storage } = app;

    // ===== File Type Validation Starts =====
    
    // 1. File extension validation
    const ext = path.extname(fileName).toLowerCase();
    const allowedExtensions = [".docx", ".pdf", ".jpg", ".png", ".xlsx"];
    if (!allowedExtensions.includes(ext)) {
        return { 
            success: false,
            result: "File type not supported. Only docx, pdf, jpg, png, xlsx formats are supported" 
        }
    }
    
    // 2. MIME type validation (optional, stricter validation)
    // Extract MIME type from base64 string
    if (file.includes("base64,")) {
        const mimeType = file.split(";")[0].split(":")[1];
        const allowedMimeTypes = [
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // docx
            "application/pdf", // pdf
            "image/jpeg", // jpg
            "image/png", // png
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // xlsx
        ];
        
        if (!allowedMimeTypes.includes(mimeType)) {
            return { 
                success: false,
                result: "File MIME type not supported" 
            }
        }
    }
    
    // 3. File size validation
    const fileSizeInBytes = binaryData.length;
    const maxSizeInBytes = 10 * 1024 * 1024; // 10MB
    if (fileSizeInBytes > maxSizeInBytes) {
        return {
            success: false,
            result: "File size exceeds the limit. Maximum supported size is 10MB"
        }
    }
    
    // 4. Content validation for specific file types (example)
    // Here you can add content validation for specific file types
    // For example: checking image dimensions, document page count, etc.
    // Need to use a dedicated library to parse file content
    
    // ===== End of File Type Validation =====

    Uploading Files
    try {
        // After retrieving the metadata, use the information within it to upload the file to cloud storage
        const metadata = await storage.getUploadMetadata(cloudPath);
        const { authorization, token, cosFileId, url } = metadata;

        // Build the submission form
        const form = new FormData();
        form.append("Signature", authorization);
        form.append("x-cos-security-token", token);
        form.append("x-cos-meta-fileid", cosFileId);
        form.append("key", cloudPath);
        form.append("file", binaryData);
        
        // Perform upload
        await axios.post(url, form, { headers: form.getHeaders() });
        return { 
            success: true,
            result: "Upload successful",
            fileID: cosFileId
        }
    } catch (error) {
        console.error("Upload failed:", error);
        return { 
            success: false,
            result: "Upload failed, please try again later" 
        }
    }
};

1.3 File Type Validation Description

In the above cloud function, we have implemented multiple file validation logics:

1. File Extension Validation: Restrict the allowed file types for upload by checking the file extensions

   const ext = path.extname(fileName).toLowerCase();
   const allowedExtensions = [".docx", ".pdf", ".jpg", ".png", ".xlsx"];
   if (!allowedExtensions.includes(ext)) {
       return { success: false, result: "File type not supported" }
   }

2. MIME Type Validation: Performs stricter validation by checking the MIME type of the file

   const mimeType = file.split(";")[0].split(":")[1];
   const allowedMimeTypes = [
       "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
       "application/pdf",
       "image/jpeg",
       "image/png",
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
   ];
   if (!allowedMimeTypes.includes(mimeType)) {
       return { success: false, result: "File MIME type not supported" }
   }

3. File Size Validation: Restrict the size of uploaded files

   const fileSizeInBytes = binaryData.length;
   const maxSizeInBytes = 10 * 1024 * 1024; // 10MB
   if (fileSizeInBytes > maxSizeInBytes) {
       return { success: false, result: "File size exceeds the limit. Maximum supported size is 10MB" }
   }

4. File Content Validation: For specific types of files, content validation can be performed, such as checking image dimensions, document page count, etc. This requires using specialized libraries to parse the file content.

2. Defining this cloud function in APIs

In the APIs management of the WeDa Platform, define and publish this cloud function:

3. Use in Components

3.1 Create Query

Create a Query for invoking cloud functions:

3.2 Configure Pre-upload Handler Function

In the pre-upload handler function of the upload component, do not use the default upload behavior; switch to query upload:

4. Best Practices

1. Security Considerations: Always perform file type validation on the server side; do not rely solely on front-end validation.
2. Error Handling: Provide clear error messages to help users understand the reason for upload failure.
3. Logging: Record upload failures to facilitate troubleshooting.
4. Performance Optimization: For large files, consider using multipart upload
5. User Experience: Display allowed file types and size limits to users before uploading.