---
title: Manage Image Uploads
product: Survey Creator
description: With SurveyJS, you can use images to make you surveys questions even more engaging and precise. This free demo for JavaScript shows how to handle the storage of such uploaded images on a server in order to reduce the size of a survey JSON file.
framework: Vanilla JS
source: https://surveyjs.io/survey-creator/examples/file-upload/vanillajs
index: https://surveyjs.io/survey-creator/examples/overview.md
---

# Manage Image Uploads (Vanilla JS)

When survey authors design a form or questionnaire, they can add images to use as a survey [logo](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#logo) or [background](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#backgroundImage), in the survey header, or within [Image](https://surveyjs.io/form-library/examples/questiontype-image/) and [Image Picker](https://surveyjs.io/form-library/examples/image-picker-question/) questions. Those images are embedded in the survey and theme JSON schemas as Base64 URLs. However, this technique increases the schema size. To avoid this, you can upload images to a server and save only image links in the JSON schemas, as shown in this demo.

To implement image upload, handle the [`onUploadFile`](https://surveyjs.io/survey-creator/documentation/api-reference/survey-creator#onUploadFile) event. Its `options.files` parameter stores the images you should send to your server. Once the server responds with an image link, call the `options.callback(status, imageLink)` method. Pass `"success"` as the `status` parameter and a link to the uploaded image as the `imageLink` parameter.

> In this demo, images 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 image uploads when you use SurveyJS to collect sensitive respondent data in your application.

## Files

### `public/index.html`

```html
<!-- Uncomment the following lines to enable Ace Editor in the JSON Editor tab -->
<!-- 
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ace.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/ext-searchbox.js"></script>
<script src="https://unpkg.com/ace-builds/src-min-noconflict/theme-clouds_midnight.js"></script>
-->

<div id="surveyCreatorContainer" style="position: absolute; height: 100%; width: 100%"></div>
```

### `src/index.css`

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

### `src/index.js`

```js
import { SurveyCreator } from "survey-creator-js";
import "survey-core/survey.i18n";
import "survey-creator-core/survey-creator-core.i18n";
import "survey-core/survey-core.css";
import "survey-creator-core/survey-creator-core.css";
import "./index.css";
import SurveyTheme from "survey-core/themes";
import { registerCreatorTheme } from "survey-creator-core";

registerCreatorTheme(SurveyTheme); // Add predefined Survey Creator UI themes

const creator = new SurveyCreator();

creator.onUploadFile.add(function (_, options) {
    const formData = new FormData();

    options.files.forEach(function (file) {
        formData.append(file.name, file);
    });
    fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
        method: "post",
        body: formData
    }).then((response) => response.json())
        .then((result) => {
            options.callback(
                "success",
                // A link to the uploaded file
                "https://api.surveyjs.io/private/Surveys/getTempFile?name=" + result[options.files[0].name]
            );
        })
        .catch((error) => {
            options.callback('error');
        });
});

creator.JSON = {
    "elements": [
        {
            "type": "image",
            "name": "question1",
            "imageLink": "https://surveyjs.io/Content/Images/examples/cat.png"
        }
    ]
};

creator.render("surveyCreatorContainer");
```

### `package.json`

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

## Other Frameworks

- [Angular](https://surveyjs.io/survey-creator/examples/file-upload/angular.md)
- [React](https://surveyjs.io/survey-creator/examples/file-upload/reactjs.md)
- [Vue 3](https://surveyjs.io/survey-creator/examples/file-upload/vue3js.md)
- [jQuery](https://surveyjs.io/survey-creator/examples/file-upload/jquery.md)