在NetSuite中实现拖放文件上传：Suitelet脚本与客户端交互指南

/**
 * @NApiVersion 2.x
 * @NScriptType Suitelet
 * @NModuleScope SameAccount
 */
define(['N/ui/serverWidget', 'N/file', 'N/url'], function(serverWidget, file, url) {

  function onRequest(context) {
    if (context.request.method === 'GET') {
      var form = serverWidget.createForm({
        title: '拖放文件上传'
      });

      // 添加一个内联HTML字段作为拖放区域
      var dropZoneField = form.addField({
        id: 'custpage_dropzone',
        type: serverWidget.FieldType.INLINEHTML,
        label: ' ' // 标签可以为空，或设置为提示文本
      });

      // 定义拖放区域的HTML结构和基本样式
      var dropZoneHTML = '<div id="dropZone" style="border: 2px dashed #ccc; padding: 40px; text-align: center; font-family: Arial, sans-serif; cursor: pointer; transition: all 0.2s ease-in-out;">' +
        '<span style="font-size: 18px; color: #555;">将文件拖放到此处</span>' +
        '<p style="font-size: 14px; color: #888; margin-top: 10px;">或点击选择文件</p>' +
        '<input type="file" id="hiddenFileInput" style="display: none;" multiple />' + // 隐藏的文件输入框
        '</div>' +
        '<style>' +
        '#dropZone.highlight { border-color: #007bff; background-color: #e6f7ff; }' +
        '</style>';
      dropZoneField.defaultValue = dropZoneHTML;

      // 关联客户端脚本
      // 请将 'customscript_your_client_script_id' 和 'customdeploy_your_client_script_deployment_id' 替换为您的客户端脚本的实际ID
      form.clientScriptModulePath = './your_client_script_name.js'; // 假设客户端脚本与Suitelet在同一目录下

      context.response.writePage(form);
    } 
    // POST请求处理将在下一节详细介绍
    else if (context.request.method === 'POST') {
      // ... (POST请求处理逻辑，见下一节)
    }
  }

  return {
    onRequest: onRequest
  };
});

/**
 * @NApiVersion 2.x
 * @NScriptType ClientScript
 * @NModuleScope SameAccount
 */
define(['N/url', 'N/ui/dialog'], function(url, dialog) {

    var suiteletScriptId = 'customscript_drag_drop_upload_sl'; // 替换为您的Suitelet的脚本ID
    var suiteletDeploymentId = 'customdeploy_drag_drop_upload_sl'; // 替换为您的Suitelet的部署ID

    function pageInit(context) {
        var dropZone = document.getElementById('dropZone');
        var hiddenFileInput = document.getElementById('hiddenFileInput');

        if (dropZone && hiddenFileInput) {
            // 阻止浏览器默认的拖放行为
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, preventDefaults, false);
                document.body.addEventListener(eventName, preventDefaults, false); // 防止文件在浏览器中打开
            });

            // 拖放区域高亮效果
            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone.addEventListener(eventName, highlight, false);
            });

            ['dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, unhighlight, false);
            });

            // 处理文件拖放
            dropZone.addEventListener('drop', handleDrop, false);

            // 点击拖放区域时触发隐藏的文件输入框
            dropZone.addEventListener('click', function() {
                hiddenFileInput.click();
            });

            // 处理通过点击选择的文件
            hiddenFileInput.addEventListener('change', function() {
                if (hiddenFileInput.files.length > 0) {
                    uploadFile(hiddenFileInput.files[0]); // 假设只处理单个文件
                }
            });
        }
    }

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    function highlight(e) {
        e.currentTarget.classList.add('highlight');
    }

    function unhighlight(e) {
        e.currentTarget.classList.remove('highlight');
    }

    function handleDrop(e) {
        var dt = e.dataTransfer;
        var files = dt.files;

        if (files.length > 0) {
            uploadFile(files[0]); // 假设只处理第一个拖放的文件
        }
    }

    function uploadFile(file) {
        // 获取Suitelet的URL
        var suiteletURL = url.resolveScript({
            scriptId: suiteletScriptId,
            deploymentId: suiteletDeploymentId,
            returnExternalUrl: false // 在NetSuite内部使用时通常为false
        });

        var formData = new FormData();
        // 'custpage_file' 必须与Suitelet的POST处理中期望的文件字段名匹配
        formData.append('custpage_file', file, file.name); 

        var xhr = new XMLHttpRequest();
        xhr.open('POST', suiteletURL, true);

        xhr.onload = function() {
            if (xhr.status === 200) {
                dialog.alert({
                    title: '上传成功',
                    message: '文件 "' + file.name + '" 已成功上传！'
                }).then(function() {
                    // 文件上传成功后，可以刷新页面或进行其他操作
                    // window.location.reload(); 
                });
            } else {
                dialog.alert({
                    title: '上传失败',
                    message: '文件 "' + file.name + '" 上传失败，状态码: ' + xhr.status + '。请检查服务器日志。'
                });
            }
        };

        xhr.onerror = function() {
            dialog.alert({
                title: '上传错误',
                message: '文件 "' + file.name + '" 上传过程中发生网络错误。'
            });
        };

        xhr.send(formData);
    }

    return {
        pageInit: pageInit
    };
});