[英]How to multiupload in Form of TYPO3 v9.5?
Since I'm using TYPO3 v9.5.3 and want to use the sysext "form" but cant manage it to accept & send multiuploads via mail.由于我使用的是 TYPO3 v9.5.3 并想使用 sysext“表单”,但无法管理它以通过邮件接受和发送多重上传。
What I have done so far:到目前为止我做了什么:
Override standard .yaml file覆盖标准 .yaml 文件
plugin.tx_form {
settings {
yamlConfigurations {
100 = fileadmin/Form/CustomFormSetup.yaml
}
}
}
created a new Template file for "ImageUpload.html" and added:为“ImageUpload.html”创建了一个新的模板文件并添加:
multiple="multiple"
so now it looks like that:所以现在看起来像这样:
<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>
Since now I also see the button changed to the plural version and I'm able now to select multiple files in the frontend.从现在开始,我还看到按钮更改为复数版本,现在我可以在前端选择多个文件。
What problem still presists:还存在什么问题:
When I select multiple files and send the form (then result gets send by mail) the Mail contains everything but uploads.当我选择多个文件并发送表单(然后通过邮件发送结果)时,邮件包含除上传之外的所有内容。 When switching back to single-upload-version everything works but just with one picture.当切换回单一上传版本时,一切正常,但只有一张图片。
Is there someone who can help me with that?有人可以帮助我吗? What do I have to do to make form processing the images/uploads when I have multiple of them?当我有多个图像/上传时,我必须做什么才能使表单处理图像/上传?
I also read this LINK but it did not solve my problem, as I want to solve this in the standard Form extension.我也阅读了这个LINK但它没有解决我的问题,因为我想在标准的 Form 扩展中解决这个问题。
This thread is a bit old, but I was still facing the same problem in 2020 and decided to post a solution.这个帖子有点旧,但我在 2020 年仍然面临同样的问题,并决定发布一个解决方案。 If any experienced Typo3 developers will correct/add to my answer, this would be awesome.如果任何有经验的 Typo3 开发人员会更正/添加到我的答案中,那就太棒了。
<?php namespace YOUREXTKEY\\Domain\\Model; use TYPO3\\CMS\\Form\\Domain\\Model\\FormElements\\GenericFormElement; class MultipleUpload extends GenericFormElement { }
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'
<?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 } }
<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>
// 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); });
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
and also your element:还有你的元素:
- 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
Adding the 'multiple' attribute will enable the file selector to select multiple files.添加 'multiple' 属性将使文件选择器能够选择多个文件。 But you will need to extend the viewhelper, 'formvh:form.uploadedResource' to handle these multiple files.但是您需要扩展视图助手“formvh:form.uploadedResource”来处理这些多个文件。
Even you can add your own viewhelper to implement what you wanted to do with the uploaded files.甚至您可以添加自己的视图助手来实现您想要对上传的文件执行的操作。
Thanks.谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.