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">All files allowed.  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">All files allowed.  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
$upload = new Quform_Element_File('upload');
$form->addElement($upload);
$upload = new Quform_Element_File('upload');
$form->addElement($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 4 things:

  • Your hidden input MAX_FILE_SIZE as shown below
  • 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

NOTE: The PHP manual recommends that you add a hidden input before your file input with the maximum allowed file size in bytes, this way users
do not have to wait for files to be uploaded completely before being told that they are too large (though they will still need to upload at least the number of bytes that you set in this hidden input). The code you need to add is below and should be placed before your file input element. The number is the maximum file size in bytes (1048576 bytes = 1MB) so if you wanted to allow a 10MB file set the value to 1048576 x 10 = 10485760.

1
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" />

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 1MB (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 1MB (each). Two uploads required.</p>
        </div>
    </div>
</div>
<!-- End Grouped Upload element -->

And in your process.php 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(1048576);
$form->addElement($uploads);
$uploads = new Quform_Element_File('uploads[]');
$uploads->getFileUploadValidator()
    ->setRequired(true)
    ->setRequiredCount(2)
    ->setAllowedExtensions(array('gif', 'jpeg', 'jpg', 'png'))
    ->setMaximumFileSize(1048576);
$form->addElement($uploads);

Require a specific number of uploads for a multiple element

If you used the grouped upload code above and you set the field to be required using $upload->getFileUploadValidator()->setRequired(true); then all 3 uploads would be required. If you wanted only one upload to be required from the group then you should add the code below:

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

Still having trouble? Head over to the forums.

Forums