forms - 如何以TYPO3 v9.5的形式进行多重上传?

标签 forms file-upload typo3 image-uploading typo3-9.x

因为我正在使用 TYPO3 v9.5.3 并且想要使用 sysext“表单”,但无法管理它通过邮件接受和发送多重上传。

到目前为止我做了什么:

覆盖标准 .yaml 文件

plugin.tx_form {
    settings {
        yamlConfigurations {
            100 = fileadmin/Form/CustomFormSetup.yaml
        }
    }
}

为“ImageUpload.html”创建了一个新的模板文件并添加了:

multiple="multiple"

所以现在看起来像这样:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{element}">
    <f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
        <formvh:form.uploadedResource
            property="{element.identifier}"
            as="image"
            multiple="multiple"
            id="{element.uniqueIdentifier}"
            class="{element.properties.elementClassAttribute}"
            errorClass="{element.properties.elementErrorClassAttribute}"
            additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
            accept="{element.properties.allowedMimeTypes}"
        >
            <f:if condition="{image}">
                <div id="{element.uniqueIdentifier}-preview">
                    <a href="{f:uri.image(image: image, maxWidth: element.properties.imageLinkMaxWidth)}" class="{element.properties.elementClassAttribute}">
                        <f:image image="{image}" maxWidth="{element.properties.imageMaxWidth}" maxHeight="{element.properties.imageMaxHeight}" alt="{formvh:translateElementProperty(element: element, property: 'altText')}" />
                    </a>
                </div>
            </f:if>
        </formvh:form.uploadedResource>
    </f:render>
</formvh:renderRenderable>
</html>

从现在起,我还看到按钮更改为复数版本,并且我现在可以在前端选择多个文件。

仍然存在什么问题:

当我选择多个文件并发送表单(然后结果通过邮件发送)时,邮件包含除上传之外的所有内容。 当切换回单一上传版本时,一切正常,但仅限一张图片。

有人可以帮我吗? 当我有多个图像/上传时,我必须做什么才能对图像/上传进行表单处理?

我也读过这篇文章LINK但它没有解决我的问题,因为我想在标准表单扩展中解决这个问题。

最佳答案

这个帖子有点旧了,但我在 2020 年仍然面临同样的问题,并决定发布解决方案。如果任何有经验的 Typo3 开发人员能够纠正/添加我的答案,那就太棒了。

  1. 创建一个新的表单元素用于文件上传。在您的扩展程序中,在 Classes/Domain/Model 下添加 MultipleUpload.php:

<pre><code><?php namespace YOUREXTKEY\Domain\Model; use TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement; class MultipleUpload extends GenericFormElement { } </code></pre>

  • 在表单设置 yaml 文件中,添加新的元素定义和新的完成器定义。我的设置如下:
  • TYPO3:
      CMS:
        Form:
          prototypes:
            standard:
              formEditor:
                formEditorPartials:
                  FormElement-MultipleUpload: 'Stage/SimpleTemplate'
              dynamicRequireJsModules:
                  additionalViewModelModules:
                    - 'TYPO3/CMS/YOUREXTKEY/Backend/FormEditor/MultipleUploadViewModel'
              formElementsDefinition:
                MultipleUpload:
                  formEditor:                                
                    label: 'MultipleUpload' 
                    group: custom
                    groupSorting: 1000
                    iconIdentifier: 'form-text'
                  implementationClassName: 'YOUREXTKEY\Domain\Model\MultipleUpload'
                Form:
                  renderingOptions:
                    properties:
                      elementClassAttribute: form
                    templateRootPaths:
                      100: 'EXT:YOUREXTKEY/Resources/Private/Templates/Forms/'
                    partialRootPaths:
                      100: 'EXT:YOUREXTKEY/Resources/Private/Partials/Forms/'
                    layoutRootPaths:
                      100: 'EXT:YOUREXTKEY/Resources/Private/Layouts/Forms/'
              finishersDefinition:
                MultipleUploadsFinisher:
                  implementationClassName: 'YOUREXTKEY\Finishers\MultipleUploadsFinisher'
    
  • 在 Classes/Finishers/MultipleUploadsFinisher.php 下创建一个新的完成器。我使用了标准电子邮件整理器中的代码,仅编辑了文件附件位。
  • <pre><code><?php namespace YOUREXTKEY\Finishers; use TYPO3\CMS\Form\Domain\Model\FormElements\FileUpload; use TYPO3\CMS\Form\Domain\Finishers\EmailFinisher; use YOUREXTKEY\Domain\Model\MultipleUpload; use TYPO3\CMS\Form\Service\TranslationService; use TYPO3\CMS\Core\Mail\MailMessage; /** * Class MultipleUploadsFinisher */ class MultipleUploadsFinisher extends EmailFinisher { /** * Executes this finisher * @see AbstractFinisher::execute() */ protected function executeInternal() { ... copied code from EmailFinisher if ($attachUploads) { foreach ($elements as $element) { if (!$element instanceof MultipleUpload) { continue; } $files = $formRuntime[$element->getIdentifier()]; foreach ($files as $file) { if ($file) { $target_path = \TYPO3\CMS\Core\Utility\GeneralUtility::getFileAbsFileName('fileadmin/user_upload/') . basename($file['name']); if (move_uploaded_file($file['tmp_name'], $target_path) ) { $mail->attach(\Swift_Attachment::fromPath($target_path)); } // unlink($target_path); (if you wish to delete uploads, uncomment this line) } } } } ... copied code from EmailFinisher } } </code></pre>

  • 在 Resources/Private/Partials/Forms 下添加 MultipleUpload.html,其中包含以下代码:
  • <pre><code><html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true"> <formvh:renderRenderable renderable="{element}"> <f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent"> <div class="form-file-wrapper "> <f:form.upload property="{element.identifier}" multiple="multiple" id="{element.uniqueIdentifier}" additionalAttributes="{multiple : '', accept : 'YOURMIMETYPES'}"/> <label for="{element.uniqueIdentifier}"> YOUR LABEL TEXT HERE </label> </div> </f:render> </formvh:renderRenderable> </html> </code></pre>

  • 在 Resources/Public/JavaScript/Backend/FormEditor/下添加 MultipleUploadViewModel.js,其中包含以下代码:
  • // Resources/Public/JavaScript/Backend/FormEditor/MultipleUploadViewModel.js
    
        define([
            'jquery',
            'TYPO3/CMS/Form/Backend/FormEditor/Helper'
        ], function ($, Helper) {
            'use strict';
    
            return (function ($, Helper) {
    
                /**
                 * @private
                 *
                 * @var object
                 */
                var _formEditorApp = null;
    
                /**
                 * @private
                 *
                 * @return object
                 */
                function getFormEditorApp() {
                    return _formEditorApp;
                };
    
                /**
                 * @private
                 *
                 * @return object
                 */
                function getPublisherSubscriber() {
                    return getFormEditorApp().getPublisherSubscriber();
                };
    
                /**
                 * @private
                 *
                 * @return object
                 */
                function getUtility() {
                    return getFormEditorApp().getUtility();
                };
    
                /**
                 * @private
                 *
                 * @param object
                 * @return object
                 */
                function getHelper() {
                    return Helper;
                };
    
                /**
                 * @private
                 *
                 * @return object
                 */
                function getCurrentlySelectedFormElement() {
                    return getFormEditorApp().getCurrentlySelectedFormElement();
                };
    
                /**
                 * @private
                 *
                 * @param mixed test
                 * @param string message
                 * @param int messageCode
                 * @return void
                 */
                function assert(test, message, messageCode) {
                    return getFormEditorApp().assert(test, message, messageCode);
                };
    
                /**
                 * @private
                 *
                 * @return void
                 * @throws 1491643380
                 */
                function _helperSetup() {
                    assert('function' === $.type(Helper.bootstrap),
                        'The view model helper does not implement the method "bootstrap"',
                        1491643380
                    );
                    Helper.bootstrap(getFormEditorApp());
                };
    
                /**
                 * @private
                 *
                 * @return void
                 */
                function _subscribeEvents() {
                    /**
                     * @private
                     *
                     * @param string
                     * @param array
                     *              args[0] = formElement
                     *              args[1] = template
                     * @return void
                     */
                    getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform', function (topic, args) {
                        if (args[0].get('type') === 'MultipleUpload') {
                            getFormEditorApp().getViewModel().getStage().renderSimpleTemplateWithValidators(args[0], args[1]);
                        }
                    });
                };
    
                /**
                 * @public
                 *
                 * @param object formEditorApp
                 * @return void
                 */
                function bootstrap(formEditorApp) {
                    _formEditorApp = formEditorApp;
                    _helperSetup();
                    _subscribeEvents();
                };
    
                /**
                 * Publish the public methods.
                 * Implements the "Revealing Module Pattern".
                 */
                return {
                    bootstrap: bootstrap
                };
            })($, Helper);
        });
    
    
  • 在您的 form.yaml 文件中添加新的完成器:
  • finishers:
      -
        options:
          subject: 'YOUR EMAIL SUBJECT'
          recipientAddress: YOUR EMAIL RECIPIENT
          recipientName: ''
          senderAddress: YOUR EMAIL SENDER
          senderName: YOUR EMAIL SENDER NAME
          replyToAddress: ''
          carbonCopyAddress: ''
          blindCarbonCopyAddress: ''
          format: html
          attachUploads: true
          translation:
            language: ''
          templatePathAndFilename: 'EXT:YOUREXTKEY/Resources/Private/Templates/Forms/Email/Html.html'
        identifier: MultipleUploadsFinisher
    

    还有你的元素:

          
              -
                properties:
                  elementClassAttribute: 'col col-12 mt-3'
                  allowedMimeTypes:
                    - application/vnd.openxmlformats-officedocument.wordprocessingml.document
                    - application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
                    - application/pdf
                    - image/jpeg
                    - image/png
                    - text/plain
                  elementDescription: ''
                type: MultipleUpload
                identifier: fileupload-1
                label: Files
    
    

    关于forms - 如何以TYPO3 v9.5的形式进行多重上传?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54175129/

    相关文章:

    java - 使用表单 :input 编写 Spring MVC 表单的正确方法是什么

    javascript - 将 HTML 表单输入转换为 JavaScript 变量

    php - Codeigniter 文件上传问题

    typo3 - 获取扩展不起作用 - 如何修复它?

    jquery - Bootstrap Accordion 面板自动聚焦于表单验证

    php - 无法将现有实体映射到 symfony2 中的嵌入形式

    jquery - 使用blueimp上传文件时出错

    php - WordPress AJAX 文件上传

    html - CSS 在 2 个 div 周围有边框

    typo3 - Typoscript 在 include_typoscript 中使用常量