# File Upload (Pro feature)

Using the **File Upload** element allows you to upload files in different sizes, quantities and formats.&#x20;

## Element Tab

The File Upload element has the following attributes in the Element Tab:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FymGzemfTIFGMH6IjngUq%2Ffile%20upload.png?alt=media&#x26;token=eff9d691-24af-4432-8d3a-eb9c3b3cd034" alt=""><figcaption></figcaption></figure>

* Name - Title of the element.
* Description - Description of the element.
* Maximum file size - the maximum size of the file that can be uploaded.

{% hint style="info" %}
The field above takes its value from the configurations of the host server. Learn more about increasing the maximum file size [here](https://app.gitbook.com/o/-MDO-gEg-EzaIBt-7nI8/s/-MDTO7zmTA5-HpvK8JDA/c/Hsa0yQhgwoLAbane3aKP/calculator-elements/file-upload/how-to-increase-maximum-file-upload-size-in-wordpress).
{% endhint %}

* **Maximum attached files** - the maximum quantity of the files that can be attached.
* **File upload price** - shows the file upload price.
* **Supported file formats** - specifies the file formats that can be uploaded.

{% hint style="info" %}
By default, WordPress allows only common file formats to be uploaded. However, all file types can be set as allowed by taking certain steps. To learn more about it navigate to this [section](https://app.gitbook.com/o/-MDO-gEg-EzaIBt-7nI8/s/-MDTO7zmTA5-HpvK8JDA/c/Hsa0yQhgwoLAbane3aKP/calculator-elements/file-upload/how-to-allow-additional-file-types-in-wordpress).
{% endhint %}

## Settings Tab

The **File Upload** element has the following attributes in the Settings Tab:

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FrHSiIvgEjLvzwhdiAxsj%2Fimage.png?alt=media&#x26;token=5491ead6-aaa6-422a-b192-dadb06d00ceb" alt=""><figcaption></figcaption></figure>

* **Currency Sign** - Enable if you want to show the currency symbol.
* **Required** - Defines whether the element will be required to fill or not.
* **Hidden by Default** - The element will be hidden until a corresponding [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system) is met. If the element is hidden, its default value will be counted as '0' in the formula &#x20;
* **Calculate hidden by default** - If any case hides the element: via the **Hidden by Default** setting or  hidden by some [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system), the element's default value (if it is set) will be counted in the formula&#x20;
* **Show in Grand Total** - Disable if you want to hide the element in Grand Total.
* **Additional Classes** - Add extra classes to the HTML elements to further style changes.

### Add a measuring Unit

This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FaUEJlb55NNb0RUXVv0Hq%2Fimage.png?alt=media&#x26;token=cee277e1-e79f-4980-9e14-5e182e29490a" alt=""><figcaption><p>Add a measuring unit</p></figcaption></figure>

* **Unit Symbol** - enter the unit symbol&#x20;
* **Position** - select the position where the symbol should be displayed relative to the number
* **Thousands separator** - select the the symbol to [separate thousands ](#user-content-fn-1)[^1]
* **Number of decimals** - indicate the number of decimals in the fractional part
* **Decimal separator** - select the symbol to separate fractional part

## Example of Using File Upload

To add the **File Upload** element to your calculator simply drag and drop the element to your preferred place of the calculator.  Fill in the fields based on your preference and save the changes.

![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FXxooG3ixZtHVsUMeBbuh%2Ffile%20upload2.png?alt=media\&token=1992ae0c-e179-4765-a152-f97d6cd74bed)

Below you can see the result of the created sample calculator with File Upload element. By **Choose file** button you can upload files directly from your computer or upload files via **URL.**

{% tabs %}
{% tab title="Show in Grand Total enabled" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FTvVeJKGl7zrJKLIIczle%2FCCBN%20Screenshots%20-%20file%20on%20summary.png?alt=media&#x26;token=2f6f6e09-247d-4af6-9e19-98f9369bca3b" alt=""><figcaption></figcaption></figure>

The result of the **File Upload** element will be displayed in the total summary.
{% endtab %}

{% tab title="Show in Grand Total disabled" %}

<figure><img src="https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2F03buI1I4nSZCjq0cZzP6%2FCCBN%20Screenshots%20-%20file%20on%20summary%20hide.png?alt=media&#x26;token=d7807cc7-161b-45b3-b887-f5ff3cd4be42" alt=""><figcaption></figcaption></figure>

The result of the **File Upload** element will not be displayed in the total summary.
{% endtab %}
{% endtabs %}

Received orders can be located in **Dashboard > Cost Calculator > Orders.** Orders with attached files are displayed with **Paper Clip** icon beside them.

![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fp1aIDVs8jHCvvpLTJAfO%2FCCBN%20file%20order.jpg?alt=media\&token=3eea2875-bcb0-4a5b-ac20-d843d01ed9f5)

Uploaded files are available in the open form on the popup window which appears after clicking the **order**.

![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FKC6IKKPFrjxgVa0PwsH6%2FCCBN%20file%20order%20dwnk.jpg?alt=media\&token=2885e502-5a15-44a1-9753-a942655209fb)

{% hint style="info" %}
When [Woo Checkout](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-checkout) is enabled in calculator settings the details of the order will be displayed in the WooCommerce orders section and attached files can be found from the order details.
{% endhint %}

[^1]: r.g 7, 000, 000 (seven millions)
