File uploads

You can add file upload form elements to your form and you can attach the uploaded files to the email that is sent out to you.

Step 1

Add your file upload HTML element to your form. Below is sample HTML for a file upload field with standard Quform wrappers (taken from the file example-file-uploads.html):

1
2
3
4
5
6
7
8
9
10
11

<!-- Begin Upload element -->
<div class="quform-element quform-element-file">
    <div class="quform-spacer">
        <label for="upload">Upload <span class="quform-required">*</span></label>
        <div class="quform-input">
            <input class="upload-element" id="upload" type="file" name="upload" />
            <p class="quform-description">Allowed extensions .jpg, .jpeg, .png, .gif. Maximum size 10MB.</p>
        </div>
    </div>
</div>
<!-- End Upload element -->

<!-- Begin Upload element -->
<div class="quform-element quform-element-file">
    <div class="quform-spacer">
        <label for="upload">Upload <span class="quform-required">*</span></label>
        <div class="quform-input">
            <input class="upload-element" id="upload" type="file" name="upload" />
            <p class="quform-description">Allowed extensions .jpg, .jpeg, .png, .gif. Maximum size 10MB.</p>
        </div>
    </div>
</div>
<!-- End Upload element -->

Step 2

Add this code to process.php to make the PHP code aware of your file element.

1
2
3

$upload = new Quform_Element_File('upload');
$upload->getFileUploadValidator()->setAllowedExtensions(array('gif', 'jpeg', 'jpg', 'png'));
$form->addElement($upload);

$upload = new Quform_Element_File('upload');
$upload->getFileUploadValidator()->setAllowedExtensions(array('gif', 'jpeg', 'jpg', 'png'));
$form->addElement($upload);

The second line of code sets the allowed file extensions. It’s important to specify a whitelist of allowed extensions so that an attacker cannot gain access to the server. It’s much easier to guess which extensions you might want to allow than it is to guess which ones an attacker might try to upload.

See the troubleshooting page if you are having problems with the file uploads.

Attaching the file upload to the notification email

Any file uploads are automatically added to the email as attachments.

Preventing a file upload from attaching to the notification email

To prevent a file upload automatically attaching to the notification email, you can use the code below after creating your element in process.php.

1

$upload->setAttach(false);

$upload->setAttach(false);

Making the upload required

To make the upload required use the following code:

1

$upload->getFileUploadValidator()->setRequired(true);

$upload->getFileUploadValidator()->setRequired(true);

Setting allowed file extensions

You can set the allowed file extensions so that any other files will be rejected by the form. You should pass in an array of lowercase file extensions e.g.:

1

$upload->getFileUploadValidator()->setAllowedExtensions(array('gif', 'jpeg', 'jpg', 'png'));

$upload->getFileUploadValidator()->setAllowedExtensions(array('gif', 'jpeg', 'jpg', 'png'));

Setting a maximum file size

You can also limit the upload by file size. The default upload limit is 10MB since many email providers do not support attachments larger than that. To set the
maximum upload size, use this code:

1

$upload->getFileUploadValidator()->setMaximumFileSize(10485760);

$upload->getFileUploadValidator()->setMaximumFileSize(10485760);

The maximum file size is in bytes which is (Size in MB x 1048576)

The file upload size can be limited by 3 things:

• The Quform max size setting $upload->getFileUploadValidator()->setMaximumFileSize(10485760);, you can set this to no limit by using $upload->getFileUploadValidator()->setMaximumFileSize(0);
• The PHP configuration setting post_max_size
• The PHP configuration setting upload_max_filesize

Chaining upload validator methods

You can chain the methods together to save yourself repeating code a lot. E.g.

1

$upload->getFileUploadValidator()->setRequired(true)->setAllowedExtensions(array('jpg'))->setMaximumFileSize(1024055);

$upload->getFileUploadValidator()->setRequired(true)->setAllowedExtensions(array('jpg'))->setMaximumFileSize(1024055);

More than one upload field

To add another upload field, simply repeat Steps 1-2, you will need to change the unique name of the element to something other than upload and change the HTML and PHP code to match.

Grouping multiple file uploads

If you have multiple upload fields you can group them under the same element using the multiple field syntax (square brackets) e.g. element_name[]. This way you do not need to create a Quform_Element_File object in the PHP code for each upload element and they can all share the same settings. For example you could have the following code to group 3 uploads (taken from the file example-file-uploads.html):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- Begin Grouped Upload element -->
<div class="quform-element quform-element-file">
    <div class="quform-spacer">
        <label>Grouped file upload <span class="quform-required">*</span></label>
        <div class="quform-input">
            <div class="quform-input-file">
                <input type="file" class="upload-element" name="uploads[]" />
            </div>
            <div class="quform-input-file">
                <input type="file" class="upload-element" name="uploads[]" />
            </div>
            <div class="quform-input-file">
                <input type="file" class="upload-element" name="uploads[]" />
            </div>
            <p class="quform-description">Allowed extensions .jpg, .jpeg, .png, .gif. Maximum size 5MB (each). Two uploads required.</p>
        </div>
    </div>
</div>
<!-- End Grouped Upload element -->

<!-- Begin Grouped Upload element -->
<div class="quform-element quform-element-file">
    <div class="quform-spacer">
        <label>Grouped file upload <span class="quform-required">*</span></label>
        <div class="quform-input">
            <div class="quform-input-file">
                <input type="file" class="upload-element" name="uploads[]" />
            </div>
            <div class="quform-input-file">
                <input type="file" class="upload-element" name="uploads[]" />
            </div>
            <div class="quform-input-file">
                <input type="file" class="upload-element" name="uploads[]" />
            </div>
            <p class="quform-description">Allowed extensions .jpg, .jpeg, .png, .gif. Maximum size 5MB (each). Two uploads required.</p>
        </div>
    </div>
</div>
<!-- End Grouped Upload element -->

And in your process.php file, the code would look like:

1
2
3
4
5
6
7

$uploads = new Quform_Element_File('uploads[]');
$uploads->getFileUploadValidator()
    ->setRequired(true)
    ->setRequiredCount(2)
    ->setAllowedExtensions(array('gif', 'jpeg', 'jpg', 'png'))
    ->setMaximumFileSize(5242880);
$form->addElement($uploads);

$uploads = new Quform_Element_File('uploads[]');
$uploads->getFileUploadValidator()
    ->setRequired(true)
    ->setRequiredCount(2)
    ->setAllowedExtensions(array('gif', 'jpeg', 'jpg', 'png'))
    ->setMaximumFileSize(5242880);
$form->addElement($uploads);

Require a specific number of uploads for a multiple element

If you used the grouped upload code above, change the number 2 on the 4th line to the number of required files. For example, to require only one upload, change it to:

1

->setRequiredCount(1)

->setRequiredCount(1)