---
title: Photo Capture
product: Form Library
description: Learn how to enable the photo capture feature with this free demo for JavaScript. Allow users to snap pictures using their webcam directly in forms, ideal for user registration forms, job applications, etc., when identity verification is required. 
framework: jQuery
source: https://surveyjs.io/form-library/examples/photo-capture/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Photo Capture (jQuery)

Photo capture allows users to take their photo using a web camera directly within a form or survey and attach it to their response along with other data. This feature is particularly useful in applications such as user registration, job applications, employee information forms, etc., when you need respondents to verify their identity as part of the form submission.

Photo capture is a feature of the [File Upload](/form-library/examples/file-upload/reactjs) question. To enable it, set the question's [`sourceType`](/form-library/documentation/api-reference/file-model#sourceType) property to `"camera"` or `"file-camera"`. In the latter case, respondents can decide whether they want to upload a file from their device or take a photo using the camera.

> In this demo, files are uploaded to SurveyJS servers from where they are then deleted after a predefined period of time. We strongly encourage you to use your own servers for file uploads when you use SurveyJS to collect sensitive respondent data in your application.

## 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/index.css`

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

### `src/index.js`

```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

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 photo upload.' ]);
    });
});


$("#surveyElement").Survey({ model: survey });
```

### `src/json.js`

```js
export const json = {
  "elements": [
    {
      "type": "file",
      "title": "Upload your photo",
      "name": "photo",
      "storeDataAsText": false,
      "waitForUpload": true,
      "sourceType": "camera" // or "file-camera"
    }
  ]
};
```

### `src/theme.js`

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

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/photo-capture/angular.md)
- [React](https://surveyjs.io/form-library/examples/photo-capture/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/photo-capture/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/photo-capture/vanillajs.md)