---
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: Angular
source: https://surveyjs.io/form-library/examples/upload-signature-pad-data-to-server/angular
index: https://surveyjs.io/form-library/examples/overview.md
---
# Upload Signatures to a Server (Angular)
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
### `src/app/components/json.ts`
```ts
export const json = {
"elements": [
{
"type": "signaturepad",
"name": "signature",
"title": "Please sign here",
"isRequired": true,
"storeDataAsText": false,
"waitForUpload": true,
"signatureWidth": 600,
"penColor": "#2D4760"
}
]
};
```
### `src/app/components/survey.component.css`
```css
/* You can add your custom CSS here. */
```
### `src/app/components/survey.component.html`
```html
```
### `src/app/components/survey.component.ts`
```ts
import { Component, OnInit } from "@angular/core";
import { Model } from "survey-core";
import { json } from "./json";
import "./survey.component.css";
import "survey-core/survey-core.min.css";
@Component({
// tslint:disable-next-line:component-selector
selector: "component-survey",
templateUrl: "./survey.component.html",
styleUrls: ["./survey.component.css"]
})
export class SurveyComponent implements OnInit {
model: Model;
ngOnInit() {
const survey = new Model(json);
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);
}
});
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data, null, 3));
});
this.model = survey;
}
}
```
### `src/app/components/theme.ts`
```ts
export const themeJson = {};
```
### `src/app/app.component.css`
```css
```
### `src/app/app.component.html`
```html
```
### `src/app/app.component.ts`
```ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "CodeSandbox";
}
```
### `src/app/app.module.ts`
```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SurveyModule } from "survey-angular-ui";
import { SurveyComponent } from "./components/survey.component";
@NgModule({
declarations: [AppComponent, SurveyComponent],
imports: [BrowserModule, SurveyModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### `src/environments/environment.prod.ts`
```ts
export const environment = {
production: true
};
```
### `src/environments/environment.ts`
```ts
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false
};
```
### `src/index.html`
```html
```
### `src/main.ts`
```ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
```
### `src/polyfills.ts`
```ts
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import "core-js/proposals/reflect-metadata";
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
// import 'web-animations-js'; // Run `npm install web-animations-js`.
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import "zone.js/dist/zone"; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
```
### `src/styles.css`
```css
/* You can add your custom CSS here. */
```
### `src/typings.d.ts`
```ts
/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
id: string;
}
```
### `.angular-cli.json`
```json
{
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [ "assets", "favicon.ico" ],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"prefix": "app",
"styles": [ "styles.css" ],
"scripts": [ ],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
}
```
### `_tsconfig.json`
```json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"resolveJsonModule": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
}
}
```
### `package.json`
```json
{
"name": "surveyjs-angular",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "14.1.1",
"@angular/cdk": "14.1.1",
"@angular/common": "14.1.1",
"@angular/compiler": "14.1.1",
"@angular/core": "14.1.1",
"@angular/forms": "14.1.1",
"@angular/platform-browser": "14.1.1",
"@angular/platform-browser-dynamic": "14.1.1",
"@angular/router": "14.1.1",
"core-js": "3.6.4",
"rxjs": "6.5.4",
"survey-core": "latest",
"survey-angular-ui": "latest",
"tslib": "1.13.0",
"zone.js": "0.11.7"
},
"devDependencies": {
"@angular/cli": "1.6.6",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/core-js": "0.9.46",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "3.9.7"
},
"keywords": [ "angular", "surveyjs" ],
"description": "SurveyJS-Angular example project"
}
```
## Other Frameworks
- [React](https://surveyjs.io/form-library/examples/upload-signature-pad-data-to-server/reactjs.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)