---
title: Upload Signatures to a Server
product: Form Library
description: Learn how to upload signature data to a specified storage and save signature image URLs in survey results. View this free demo with a code example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/upload-signature-pad-data-to-server/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Upload Signatures to a Server (React)

A Signature Pad input field enables respondents to sign a form with a finger or mouse pointer by simply drawing a signature within a dedicated signature pad area. Resulting signature files can be uploaded to a server separately from survey results or stored directly in the survey results JSON object in Base64 format. If you choose to upload the signature images to a server, the survey results JSON object contains only unique image identifiers (file names or URLs). Such an approach significantly reduces the size of this object. This demo shows how to upload a signature file to a server-side storage.

## Upload Signature Images to a Server

Follow the steps below to implement image upload:

1. Disable the [`storeDataAsText`](https://surveyjs.io/form-library/documentation/api-reference/signature-pad-model#storeDataAsText) property for the Signature question.

2. Handle `SurveyModel`'s [`onUploadFiles`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onUploadFiles) event to upload signature images and save the uploaded image URLs in survey results. The event handler will be called when a user moves focus out of the signature area (clicks outside the area, navigates to another page, completes the survey). Within the `onUploadFiles` event handler, call the `options.callback` function upon server response. Pass the successfully uploaded signature image as the first argument. As the second argument, pass an array of error messages if the upload failed.

3. Enable Signature's [`waitForUpload`](https://surveyjs.io/form-library/documentation/api-reference/signature-pad-model#waitForUpload) property to ensure that users do not submit a form until the signature is uploaded.

## Remove a Signature Image from a Server

Users can click the Clear button to delete their signature. Handle `SurveyModel`'s [`onClearFiles`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onClearFiles) event to remove the signature image from the server. Within an `onClearFiles` event handler, use the `options.value` parameter to identify the signature image you need to delete. Send a DELETE request to your server. Upon receiving a response, call the `options.callback` method and pass `"success"` or `"error"` to indicate the operation status.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    survey.onUploadFiles.add((_, options) => {
        const formData = new FormData();
        options.files.forEach((file) => {
            formData.append(file.name, file);
        });
    
        fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
            method: "POST",
            body: formData
        })
            .then((response) => response.json())
            .then((data) => {
                options.callback(
                    options.files.map((file) => {
                        return {
                            file: file,
                            content: "https://api.surveyjs.io/private/Surveys/getTempFile?name=" + data[file.name]
                        };
                    })
                );
            })
            .catch((error) => {
                console.error("Error: ", error);
                options.callback([], "An error occurred during the file upload.");
            });
    });
    
    async function deleteFile(fileURL, options) {
        try {
            const name = fileURL.split("=")[1];
            const apiUrl = `https://api.surveyjs.io/private/Surveys/deleteTempFile?name=${name}`;
            const response = await fetch(apiUrl, {
                method: "DELETE"
            });
    
            if (response.status === 200) {
                console.log(`File ${name} was deleted successfully`);
                options.callback("success");
            } else {
                console.error(`Failed to delete file: ${name}`);
                options.callback("error");
            }
        } catch (error) {
            console.error("Error while deleting file: ", error);
            options.callback("error");
        }
    }
    
    survey.onClearFiles.add(async (_, options) => {
        if (!options.value || options.value.length === 0)
            return options.callback("success");
        if (!!options.value) {
            await deleteFile(options.value, options);
        }
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "signaturepad",
      "name": "signature",
      "title": "Please sign here",
      "isRequired": true,
      "storeDataAsText": false,
      "waitForUpload": true,
      "signatureWidth": 600,
      "penColor": "#2D4760"
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/upload-signature-pad-data-to-server/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/upload-signature-pad-data-to-server/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/upload-signature-pad-data-to-server/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/upload-signature-pad-data-to-server/vanillajs.md)