In the pages you create in Deployteq, you can now create an input field for uploading files. This will ensure that files uploaded here will be placed in a specified (external) folder in Deployteq's file manager or sent as attachments in an email using the PDF attachments module.


Installing the app

In the Deployteq Store, you can find the app named "Page Upload Files".

You can install the app in two simple steps:


Installing the app adds the capability to add an input type of "File" when creating/editing a page, enabling the addition of upload functionality.

When inserting, you can add a form element for your file upload.


Using the functionality in Pages

When the app is installed, you can insert a new input on the desired page (not a page template!) through the editor.


Just like with any form, you first select a form tag and add it to your page. Within the form element, the input element of type "File" must be added.


If you have chosen the file type, you will get additional options to configure. These extra options are explained below:

File path*
Here, you can choose a folder within the file manager where the files should be saved. This can be a local folder in the file manager or an external folder, such as an SFTP on your domain. For more information on adding external folders, you can refer to the guide on Using the (S)FTP Functionality in the File Manager.


Filename

By default, we retain the filename of the uploaded file and append a unique ID to it, ensuring that files with the same name do not overwrite each other. For example: <original name>_980c038f-30ed-4e55-979a-c9af787ce90b.png
You can also provide your own name for the uploaded files.


Maximum file size (MB)
By default, Deployteq has a maximum file size limit of 10 MB. However, you may prefer a smaller limit. The file size limit can be adjusted accordingly.


File MIME-type *
We adhere to MIME types here instead of file extensions. Below is a list of the most common ones for such cases. It's possible to specify multiple MIME types by separating the values with commas: image/jpg, image/png.


Multiple files
By default, it will be possible to add one file at a time to the page. With this option, it's possible to add multiple files simultaneously. Of course, you can also use multiple upload fields if, for example, the file name needs to change per field.


* These fields are mandatory for configuring the file upload.



MIME types 

The most commonly used MIME types in Deployteq pages are:

ExtensieBestandMIME Type
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dwgAutoCAD Drawing Formatimage/x-dwg
image/vnd.dwg
application/acad
application/octet-stream
.gifGraphics Interchange Format (GIF)image/gif

.jpeg

.jpg

JPEG imagesimage/jpeg
.mp3MP3 audioaudio/mpeg
.mpegMPEG Videovideo/mpeg
.mp4MP4 videovideo/mp4
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.zipZIP archiveapplication/zip

A complete list can be found online, for example at Mozilla.

Smarty for upload

When you have configured everything according to your preferences and click on insert, you will receive a piece of Smarty code for uploading on your page. See the examples below:

Single upload
{{input name='fileupload1' type='file' field='environment' file_path='Upload campagne.folder' file_mime='image/png' required='true' error_message='Upload jouw bestand' error_class='error'}}
Multiple uploads
{{input name='fileupload1' type='file' field='environment' file_path='Upload campagne.folder' file_mime='image/png' required='true' error_message='Upload jouw bestand bij veld 1' error_class='error'}}
{{input name='fileupload2' type='file' field='environment' file_path='Upload campagne.folder' file_mime='image/png' required='true' error_message='Upload jouw bestand bij veld 2' error_class='error'}}

For each upload button, you will see the selected field:

Screenshot 2022-03-02 at 15.57.37.png

Multiupload
{{input name='Multiupload' type='file' field='environment' file_path='Upload campagne.folder' file_mime='image/png' required='true' error_message='Upload jouw bestand(en)' error_class='error' file_multiple_allowed='true'}}

In the page, you can then see how many files are being offered simultaneously;

Screenshot 2022-03-02 at 15.55.09.png

CSS Styling

Of course, you'll want to style the upload button to fit seamlessly within your form. When you inspect the source code of the final page, you'll see that it has become an input element, allowing you to customize its appearance using CSS.


image2020-5-8_16-50-11.png


Send as attachment

With the PDF Attachments module, you can directly use the uploaded files as attachments in emails. In the campaign, the environment variable is available based on the name of your file upload input element. In this example, it's "Multiupload".

When the PDF Attachments module is configured, an extra option will be available when sending emails to select an environment variable with the file. In this case, the page upload App has created 2 environment variables:

  • page.Multiupload
    • This variable contains all file names, comma-separated, which have been uploaded. These can be optionally displayed in the email confirmation by adding the following Smarty code to the email content or page:
      • {{manual field="page.Multiupload"}}

      • Screenshot 2022-03-02 at 15.24.24.png

  • page.Multiupload_attachments
    • This variable contains the local path to the files and can be used to add the uploaded files as attachments.


Please note!

In case multiple upload fields are added to the form, only 1 file can be added as an attachment. To achieve this, a multi-upload field can be used, as shown in the example above.