If you have to write some data individually to the ESP8266/ESP32 module for the Sketch behavior, the [AutoConnectFile](acelements.md#autoconnectfile) element will assist with your wants implementation. The AutoConnectFile element produces an HTML `<input type="file">` tag and can save uploaded file to the flash or external SD of the ESP8266/ESP32 module. The handler for saving is built into AutoConnect. You can use it to inject any sketch data such as the initial values for the custom Web page into the ESP module via OTA without using the Sketch data upload tool of Arduino-IDE.
3. Place AutoConnectSubmit on the same custom Web page.
4. Perform the following process in the on-handler of submitting destination:
- Retrieve the [AutoConnectFile instance](apielements.md#autoconnectfile) from the custom Web page where you placed the AutoConnectFile element using the [AutoConnectAux::getElement](apiaux.md#getelement) function or the [operator \[\]](apiaux.md#operator).
- Start access to the device specified as the upload destination. In usually, it depends on the file system's begin function. For example, if you specified Flash's SPIFFS as the upload destination, invokes *SPIFFS.begin()*.
- The [value member](acelements.md#value_3) of AutoConnectFile contains the file name of the upload file. Use its file name to access the uploaded file on the device.
- Invokes the end function associated with the begin to close the device. It is the *SPIFFS.end()** if the flash on the ESP module has been begun for SPIFFS.
The following sketch is an example that implements the above basic steps. The *postUpload* function is the on-handler and retrieves the AutoConnectFile as named `upload_file`. You should note that this handler is **not** for a custom Web page placed with its AutoConnectFile element. The uploaded file should be processed by the handler for the transition destination page from the AutoConnectFile element placed page. AutoConnect built-in upload handler will save the uploaded file to the specified device before invoking the *postUpload* function.
However, If you use uploaded files in different situations, it may be more appropriate to place the actual handling process outside the handler. It applies for the parameter file, etc. The important thing is that you do not have to sketch file reception and storing logic by using the AutoConnectFile element and the upload handler built into the AutoConnect.
- Flash : `AC_File_FS` for the API parameter or `fs` for the JSON document
- SD : `AC_File_SD` for the API parameter or `sd` for the JSON document
- Other : `AC_File_Extern` for the API parameter or `extern` for the JSON document
The substance of AC_File_FS (fs) is a SPIFFS file system implemented by the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance **SPIFFS** to access SPIFFS.
Also, the substance of AC_File_SD (sd) is a FAT file of Arduino SD library ported to the ESP8266/ESP32 core, and then AutoConnect uses the Global Instance **SD** to access SD. When saving to an external SD device, there are additional required parameters for the connection interface and is defined as the macro in AutoConnectDefs.h.
```cpp
#define AUTOCONNECT_SD_CS SS
#define AUTOCONNECT_SD_SPEED 4000000
```
`AUTOCONNECT_SD_CS` defines which GPIO for the CS (Chip Select, or SS as Slave Select) pin. This definition is derived from pins_arduino.h, which is included in the Arduino core distribution. If you want to assign the CS pin to another GPIO, you need to change the macro definition of AutoConnectDefs.h.
`AUTOCONNECT_SD_SPEED` defines SPI clock speed depending on the connected device.
!!! info "Involves both the begin() and the end()"
The built-in uploader executes the begin and end functions regardless of the Sketch whence the file system of the device will terminate with the uploader termination. Therefore, to use the device in the Sketch after uploading, you need to **restart it with the begin** function.
Upload handler will be launched by ESP8266WebServer/WebServer(as ESP32) library which is triggered by receiving an HTTP stream of POST BODY including file content. Its launching occurs before invoking the page handler.
At the time of the page handler behaves, the uploaded file already saved to the device, and the [member variables](acelements.md#name_3) of AutoConnectFile reflects the file name and transfer size.
AutoConnetFile saves the uploaded file with the file name you selected by `<input type="file">` tag on the browser. The file name used for uploading is stored in the AutoConnetFile's value member, which you can access after uploading. (i.e. In the handler of the destination page by the AutoConnectSubmit element.) You can not save it with a different name. It can be renamed after upload if you need to change the name.
You can output the file to any device using a custom uploader by specifying [**extern**](acjson.md#acfile) with the [**store**](acjson.md#acfile) attribute of [AutoConnectFile](acjson.md#acfile) (or specifying [**AC_File_Extern**](acelements.md#store) for the [**store**](apielements.md#store) member variable) and can customize the uploader according to the need to upload files to other than Flash or SD. Implements your own uploader with inheriting the [**AutoConnectUploadHandler**](#upload-handler-base-class) class which is the base class of the upload handler.
Implementing the custom uploader requires a little knowledge of the c++ language. If you are less attuned to programming c++, you may find it difficult. But don't worry. You can make it in various situations by just modifying the Sketch skeleton that appears at the end of this page.
The **upload** public function is an entry point, the ESP8266WebServer (WebServer as ESP32) library will invoke the upload with each time of uploading content divided into chunks.
Also, the **\_open**, **\_write** and **\_close** protected functions are actually responsible for saving files and are declared as pure virtual functions. A custom uploader class that inherits from the AutoConnectUploadHandler class need to implement these functions.
The actual upload process is handled by the three private functions above, and then upload only invokes three functions according to the upload situation. In usually, there is no need to override the upload function in an inherited class.
<dd><spanclass="apidef">upload</span><spanclass="apidesc">A data structure of the upload file as <b>HTTPUpload</b>. It is defined in the ESP8266WebServer (WebServer as ESP32) library as follows:
An upload handler needs to implement a procedure corresponding with **HTTPUploadStatus** enum value indicated by the uploading process of ESP8266WebServer class, which contained in HTTPUpload.status as following values:
The \_open function will be invoked when HTTPUploadStatus is **UPLOAD_FILE_START**. Usually, the implementation of an inherited class will open the file.
The \_write function will be invoked when HTTPUploadStatus is **UPLOAD_FILE_WRITE**. The content of the upload file is divided and the \_write will be invoked in multiple times. Usually, the implementation of an inherited class will write data.
The \_close function will be invoked when HTTPUploadStatus is **UPLOAD_FILE_END** or **UPLOAD_FILE_ABORTED**. Usually, the implementation of an inherited class will close the file.
For reference, the following AutoConnectUploadFS class is an implementation of AutoConnect built-in uploader and inherits from AutoConnectUploadHandler.
In order to upload a file by the custom uploader, it is necessary to register it to the custom Web page beforehand. To register a custom uploader, specify the custom uploader class name in the template argument of the [AutoConnectAux::onUpload](apiaux.md#onupload) function and invokes it.
<dd><spanclass="apidef">T</span><spanclass="apidesc">Specifies a class name of the custom uploader. This class name is a class that you implemented by inheriting AutoConnectUploadHandler for custom upload.</span></dd>
<dd><spanclass="apidef">uploadClass</span><spanclass="apidesc">Specifies the custom upload class instance.</span></dd>
