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

时间:2019-01-14 02:28:42

标签: 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,但它不能解决我的问题,因为我想在标准Form扩展名中解决此问题。

2 个答案:

答案 0 :(得分:1)

该线程有点陈旧,但我在2020年仍然面临着同样的问题,因此决定发布解决方案。如果有经验的Typo3开发人员可以纠正/添加到我的答案中,那就太好了。

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

struct account { int number; char full_name[30]; float balance; }; void sort(struct account p[], int count); int main() { struct account person[5]; int x = 0, i = 0, count = 0; printf("Enter account number, last name, and balance.\n"); printf("Enter -999 to end input:\n\n"); while (1) { scanf("%i", &person[x].number); if (person[x].number == -999) { count = x; break; } if (person[x].number < 1 || person[x].number >1000) { printf("***Invalid account number. Please enter 1 - 1000 or -999 to exit***\n"); x--; //remove continue } scanf("%s", person[x].full_name); scanf("%f", &person[x].balance); if (person[x].balance < 0) { printf("*** Invalid balance amount. Please enter a positive value. ***\n"); x--; //remove continue } x++;//add x++ } sort(person, count);//new function sort printf("ACCOUNT\tLAST NAME\tBALANCE\n"); for (x = 0; x < count; x++) { printf("%d\t%s\t%f\n", person[x].number, person[x].full_name, person[x].balance); } } void sort(struct account p[], int count) { char changed = 'T'; int x, temp; float btemp; char ntemp[30];// btemp for balance and ntemp for full_name while (changed == 'T') { changed = 'F'; for (x = 0; x < count - 1; x++) { if (p[x].number > p[x + 1].number) { temp = p[x].number; p[x].number = p[x + 1].number; p[x + 1].number = temp; btemp = p[x].balance; p[x].balance = p[x + 1].balance; p[x + 1].balance = btemp; strcpy(ntemp , p[x].full_name); strcpy(p[x].full_name , p[x + 1].full_name); strcpy(p[x + 1].full_name , ntemp); changed = 'T'; } } } }

<?php 

namespace YOUREXTKEY\Domain\Model;
use TYPO3\CMS\Form\Domain\Model\FormElements\GenericFormElement;

class MultipleUpload extends GenericFormElement
{
}

  1. 在表单设置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'
  1. 在Classs / Finishers / MultipleUploadsFinisher.php下创建一个新的整理器。我使用了标准电子邮件整理器中的代码,只编辑了文件附件位。

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

  1. 在资源/私人/部分/表格下,使用以下代码添加MultipleUpload.html:

<?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
    }


}

<?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 } }

  1. 在资源/公共/ JavaScript /后端/ 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);
    });

  1. 在您的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

答案 1 :(得分:0)

添加'multiple'属性将使文件选择器选择多个文件。但是您将需要扩展viewhelper'formvh:form.uploadedResource'来处理这些多个文件。

即使您可以添加自己的viewhelper来实现您要对上传的文件执行的操作。

谢谢。

How to build a custom viewhelper