feat: Configure File Size Limit (#2543)

## Description 

Provide a concise summary of the changes made in this pull request
- [Added a new document for configuring large
files](https://appsmith-docs-git-feat-allow-large-files-co-9bacc2-get-appsmith.vercel.app/getting-started/setup/instance-configuration/file-size-limit)
- [updated environment variable doc to add the missing environment
variable for configuring file size
limit](https://appsmith-docs-git-feat-allow-large-files-co-9bacc2-get-appsmith.vercel.app/getting-started/setup/environment-variables#file-size-limit)
- updated Filepicker document to add correct property names
- added the file size config under instance configuration

## Pull request type

Check the appropriate box:

- [ ] Review Fixes
- [ ] Documentation Overhaul
- [x] Feature/Story
    - Link one or more Engineering Tickets
        * 
- [ ] A-Force
- [ ] Error in documentation
- [ ] Maintenance

## Documentation tickets

 Link to one or more documentation tickets:
 - 

## Checklist

From the below options, select the ones that are applicable:

- [x] Checked for Grammarly suggestions.
- [x] Adhered to the writing checklist.
- [ ] Adhered to the media checklist.
- [ ] Verified and updated cross-references or added redirect rules.
- [ ] Tested the redirect rules on deploy preview.
- [ ] Validated the modifications made to the content on the deploy
preview.
- [ ] Validated the CSS modifications on different screen sizes.

.github/styles/config/vocabularies/technical/accept.txt

@@ -151,4 +151,4 @@ functionality
 DigitalOcean
 AWS ECS EC2
 Droplet
-
+Validation

website/docs/getting-started/setup/environment-variables.md

@@ -266,6 +266,15 @@ If you prefer to host your Appsmith instance on a personalized domain, you can d
     Set this variable with your custom domain to access Appsmith. For more information about how to set up Custom domain and SSL Certificate, see [Custom Domain and SSL](/getting-started/setup/instance-configuration/custom-domain) guide.
 </dd>
 
+## File size limit
+
+The default file size limit in Appsmith is 150 MB. This limit is customizable based on your requirements for larger file uploads in self-hosted instances.
+
+#### `APPSMITH_CODEC_SIZE`
+<dd>
+Specifies the allowed file size. To change the file size limit, update the `APPSMITH_CODEC_SIZE` parameter in the configuration file specific to your deployment. For example, when installed on Docker, update the `docker.env` file, and when installed on Kubernetes, update the `values.yaml` file. For more information about large file uploads, see [Configure File Size Limit](/getting-started/setup/instance-configuration/file-size-limit).
+</dd>
+
 ## Supervisord 
 
 Access the Supervisord web interface seamlessly through Appsmith by setting login credentials using environment variables. Securely control your background processes, ensuring reliable application management.

website/docs/getting-started/setup/instance-configuration/file-size-limit.md

@@ -0,0 +1,47 @@
+# Upload File Size Limit
+
+In self-hosted Appsmith instances, the default file size limit is 150 MB. You can adjust the limit to support larger files. This page explains how to update the file size limit and configure reverse proxies or load balancers, if used, to ensure the new limits are applied.
+
+## Change file size limit
+
+To accommodate large files, update the Appsmith instance configuration by setting the `APPSMITH_CODEC_SIZE` environment variable in your deployment configuration. When installed on:
+
+- **Docker**: Update the `docker.env` file.
+- **Kubernetes**: Update the `values.yaml` file.
+
+For example, to increase the file size limit to 500 MB, use the following configuration:
+
+```bash
+APPSMITH_CODEC_SIZE=500MB
+```
+
+## Change reverse proxy or load balancer limit
+
+If your Appsmith instance is behind a reverse proxy or load balancer, you also need to configure the file size limits in the proxy or load balancer settings. Below are example configurations:
+
+* **Nginx**: Add or update the following directive in your Nginx configuration file. For example, to set a size limit of 500 MB, update the configuration as below:
+
+ ```bash
+  client_max_body_size 500M;
+ ```
+
+* **Caddy**: Set the `max_request_body` directive in your Caddy configuration file. For example, to set a size limit of 500 MB, update the configuration as below:
+
+ ```bash
+  max_request_body 500M;
+ ```
+
+* **Load balancers**: Configure the `proxy-body-size` or similar directive in your load balancer settings. For example, to set a size limit of 500 MB, update the configuration as below:
+
+ ```bash
+  proxy-body-size 500M;
+ ```
+
+## Important considerations
+
+- Ensure you have configured all relevant components: Appsmith instance, reverse proxy, and load balancer to handle the desired file size limits. 
+- If you’re using the FilePicker widget, make sure that the limits set for the [Max number of files](/reference/widgets/filepicker#max-no-of-filesnumber) and [Max file size](/reference/widgets/filepicker#max-file-sizenumber) properties fall within the file size limits configured for your Appsmith instance.
+
+## Troubleshooting
+
+After updating configurations, review your reverse proxy logs for errors if you encounter any issues. Use the chat widget at the bottom of the page to contact the support team if you need help.

website/docs/help-and-support/troubleshooting-guide/action-errors/README.md

@@ -1,5 +1,10 @@
+---
+description: The page provides information on common query errors and how to resolve them on Appsmith.
+---
 # Query Errors
 
+This page provides information on common query errors and how to resolve them on Appsmith.
+
 ## Timeout error
 
 <Message
@@ -8,24 +13,45 @@ messageContent="Timed out on query execution"></Message>
 
 #### Cause
 
-If your API / DB Query times out, it could be due to one of the following reasons
+Your API or database queries may time out due to one of the following reasons:
+
+- The API or database is behind a VPC that is not accessible from the Appsmith instance.
+- The API or query is taking too long to respond.
 
-- Your API / Database is behind a VPC which is not accessible from the appsmith Instance. This can be fixed by whitelisting the appsmith instance in your database or VPC.
-- Your API / Query is taking too long to respond. This can be fixed by fetching smaller datasets using
+#### Solution
 
-### Solution
+Apply the following resolutions to fix timeout errors:
 
-You could resolve the error response by doing one of the following:
+- **Server-side pagination**: Allows you to manage and display large datasets within your application. It involves fetching and displaying a small set of data from the server at a time, improving performance. For more information, see [Server-side pagination](/build-apps/how-to-guides/Server-side-pagination-in-table).
 
-- [Server-side pagination](/build-apps/how-to-guides/Server-side-pagination-in-table): Allows you to manage and display large datasets within your application. It involves fetching and displaying only a portion of data from the server at a time, enhancing performance.
+- **Timeout configuration**: The Appsmith server has a default internal timeout of 60 seconds. If your queries take longer, you can set a value greater than 60 seconds. For self-hosted instances, set the `APPSMITH_SERVER_TIMEOUT` environment variable to a value greater than 60 seconds. For more information, see [Timeout Configuration in Query Settings](/connect-data/reference/query-settings).
 
-- [Timeout Configuration](/connect-data/reference/query-settings): The Appsmith server has a default internal timeout of 60 seconds. If your queries take longer than this, you can set a value greater than 60 seconds. For self-hosted instances, you can set the `APPSMITH_SERVER_TIMEOUT` environment variable to a value greater than 60 seconds. For example, if you want a timeout of 80 seconds, use- `APPSMITH_SERVER_TIMEOUT=80`.
+- **Whitelist VPC**: If your API or database is behind a VPC, whitelist the Appsmith instance IPs in your database, servers hosting APIs, or VPC to ensure that the Appsmith instance can access the databases or APIs.
 
 ## Base64 encoding error
 
-```
-File content is not base64 encoded
-```
+<Message
+ messageContainerClassName="error"
+messageContent="File content is not base64 encoded"></Message>
+
+#### Cause
+
+The query expects a Base64 encoded value, but the value passed is not Base64 encoded.
+
+#### Solution
+
+To fix this error, ensure that the data sent is in Base64 encoded format. If you are using a FilePicker widget, you can set the data type. For more information, see [Data format](/reference/widgets/filepicker#data-format-string).
+
+## Payload too large error
+
+<Message
+ messageContainerClassName="error"
+messageContent="Payload too large. File size cannot exceed 100MB."></Message>
+
+#### Cause
+
+Appsmith imposes a default file size limit of 150 MB. This is a configurable limit if you're using a self-hosted Appsmith instance. The reason you may get this error is due to a file size limit set at 100 MB on your self-hosted instance.
+
+#### Solution
 
-This message indicates that the query was expecting a base64 encoded value as content body, but the actual value passed to it was not base64 encoded.
-This error can be fixed by setting the data format property of the filepicker to base64
+Configure Appsmith instance to support larger files by changing the file size limit. For more information on configuring file size limits, see [Configure File Size Limit](/getting-started/setup/instance-configuration/file-size-limit).

website/docs/reference/widgets/filepicker.md

@@ -79,7 +79,7 @@ When enabled, it automatically determines the data types for columns in a CSV fi
 
 
 
-#### Maximum No. of files	`number`
+#### Max no. of files	`number`
 
 <dd>
 
@@ -89,30 +89,22 @@ Sets the maximum number of files that a user can select. The default value is `1
 ### Label
 
 #### Text `string`
-
 <dd>
-
 Sets the text on the widget. The default value is `Select Files`.
-
 </dd>
 
 ### Validation
 
-#### Required `boolean`
-
+These properties define the types of validations available for the FilePicker widget.
 
+#### Required `boolean`
 <dd>
-
-Enabling this property makes the Filepicker widget mandatory, requiring users to select a file. I When the widget is placed within a Form widget, enabling the **Required** property ensures that the Form's submit button remains disabled untila a file is selected.
-
+Enabling this property makes the Filepicker widget mandatory, requiring users to select a file. When the widget is placed within a Form widget, enabling the **Required** property ensures that the Form's submit button remains disabled until a file is selected.
 </dd>
 
-#### Maximum File Size	`number`
-
+#### Max file size	`number`
 <dd>
-
-Sets the maximum allowed size of each file that a user can upload. The default value is set to `5 MB`.
-
+Use this property to set the size of each file that a user can upload. The default value is set to `5 MB`. 
 </dd>
 
 ### General

website/sidebars.js

@@ -179,6 +179,7 @@ const sidebars = {
                 'getting-started/setup/instance-configuration/frame-ancestors',
                 'getting-started/setup/environment-variables',
                 'advanced-concepts/version-control-with-git/updating-local-file-path',
+                'getting-started/setup/instance-configuration/file-size-limit',
               ],
             },
             {

website/src/components/Message.js

@@ -1,4 +1,6 @@
 import React from "react";
+import { AiFillExclamationCircle } from 'react-icons/ai';
+
 /**
  * The component can be used to highlight the text in the documentation. 
  * For example, use it to highlight the errors, warnings in the troubleshooting guide.
@@ -15,7 +17,10 @@ export default function Message(props) {
     return (
         <div className={messageContainerClassName}>
             <div className={captionClassName}>{caption}</div>
-            <div className={messageContentClassName}> {messageContent}</div>
+            <div className={messageContentClassName}>
+                <AiFillExclamationCircle className="error-icon" />
+                {messageContent}
+            </div>
         </div>
     );
 };

website/src/css/custom.css

@@ -4,6 +4,7 @@
  * work well for content-centric websites.
  */
 @import url(https://rsms.me/inter/inter.css);
+@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@100;200;300;400;500;600;700;800;900&display=swap&display=swap);
 
 /* You can override the default Infima variables here. */
 :root {
@@ -377,20 +378,29 @@ h6 {
 }
 
 .error {
-  line-height: normal;
+  position: relative;
+  line-height: 1.5;
   max-width: 100%;
-  background: #fff;
-  border: solid 1px #e1e4e5;
-  font-size: 80%;
-  padding: 5px;
-  margin: 10px;
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", Courier, monospace;
-  color: #e74c3c;
+  border: solid 2px #ee5867;
+  font-size: 0.92rem;
+  padding: 10px 15px 10px 50px;
+  margin: 15px 0;
+  font-family: Nunito, system-ui, -apple-system;
+  color: #b71c1c;
   overflow-x: auto;
-  border-radius: 2px;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   font-style: normal;
-  font-weight: 400;
+  font-weight: 500;
+}
+
+.error-icon {
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  transform: translateY(-50%);
+  font-size: 22px;
+  color: #b71c1c;
 }
 
 p>code,