--- title: Delayed File Upload product: Form Library description: Learn how to effectively implement delayed file upload methods to optimize storage space and enhance user experience. Follow the step-by-step instructions for JavaScript to handle file uploads, downloads, and storage within various event handlers. framework: React source: https://surveyjs.io/form-library/examples/delayed-file-upload/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Delayed File Upload (React) Delayed file upload is a technique that enables you to postpone file upload until a certain moment. This technique helps save storage space on your server: if a user selects a file and then changes it to another, the first file won't be uploaded. This demo shows how to upload files when a survey is completed. Until that moment, files are stored in a variable as base64-encoded strings. To implement delayed file upload, program different functionalities within the following event handlers: - [`onUploadFiles`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onUploadFiles)\ Add files to a variable that acts as a temporary file storage and load file previews. - [`onClearFiles`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onClearFiles)\ Remove all or individual files from the temporary file storage. - [`onComplete`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onComplete)\ Upload files to a server and save metadata about them as the question value. For more information, view code listings for Angular, React, Vue, jQuery, or Vanilla JavaScript. > 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
``` ### `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 displaySurveyResults(result, data) { const text = JSON.stringify(data || result.data, null, 3); ["content-result-json-code", "surveyResult"].forEach(id => { const el = document.getElementById(id); if (el) el.textContent = text; }); } function SurveyComponent() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); const tempFileStorage = {}; // Temporary storage for uploaded files function getStorageKey({ name, parent }) { let storageKey = name; // Check if the file upload is inside a dynamic panel and adjust the storage key accordingly if (parent && parent.parentQuestion && parent.parentQuestion.getType() === "paneldynamic") { const dynPanel = parent.parentQuestion; const panel = parent; const i = dynPanel.visiblePanels.indexOf(panel); storageKey = dynPanel.name + "_" + i + "_" + name; } return storageKey; } function getQuestionByStorageKey(survey, storageKey) { let q = survey.getQuestionByName(storageKey); if (!q) { // Parse storageKey to determine if it belongs to a dynamic panel const keyParts = storageKey.split("_"); const dynPanelName = keyParts[0]; const dynPanel = survey.getQuestionByName(dynPanelName); if (dynPanel && dynPanel.getType() === "paneldynamic") { const i = parseInt(keyParts[1], 10); const qName = keyParts.slice(2).join("_"); // Handle cases when the question name contains underscores q = dynPanel.panels[i] && dynPanel.panels[i].getQuestionByName(qName); } } return q; } survey.onUploadFiles.add((_, options) => { const key = getStorageKey(options.question); // Store files in a temporary storage if (tempFileStorage[key] !== undefined) { tempFileStorage[key] = tempFileStorage[key].concat(options.files); } else { tempFileStorage[key] = options.files; } // Generate file previews const content = []; options.files.forEach((file) => { const fileReader = new FileReader(); fileReader.onload = () => { content.push({ name: file.name, type: file.type, content: fileReader.result, file: file, }); if (content.length === options.files.length) { // Return a file preview options.callback( content.map((fileContent) => ({ file: fileContent.file, content: fileContent.content, })) ); } }; fileReader.readAsDataURL(file); }); }); // Handles file removal survey.onClearFiles.add((_, options) => { const key = getStorageKey(options.question); // Clear all files if "Clear All" is clicked if (options.fileName === null) { tempFileStorage[key] = []; options.callback("success"); return; } // Remove a specific file const tempFiles = tempFileStorage[key]; if (tempFiles && tempFiles.length > 0) { const fileInfoToRemove = tempFiles.find( (file) => file.name === options.fileName ); if (fileInfoToRemove) { const index = tempFiles.indexOf(fileInfoToRemove); tempFiles.splice(index, 1); } } options.callback("success"); }); // Handles file uploads when the survey is completed survey.onComplete.add((result) => { displaySurveyResults(result, { data: "Please wait for files to upload." }); const storageKeys = Object.keys(tempFileStorage); if (storageKeys.length === 0) { displaySurveyResults(result); return; } // Process each stored file set for upload const uploadPromises = storageKeys.map((key) => { const filesToUpload = tempFileStorage[key]; const formData = new FormData(); filesToUpload.forEach((file) => { formData.append(file.name, file); }); return fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", { method: "POST", body: formData, }) .then((response) => response.json()) .then((data) => { // Assign the uploaded file metadata to the corresponding question const q = getQuestionByStorageKey(survey, key); if (q) { q.value = filesToUpload.map((file) => ({ file: file, type: file.type, content: "https://api.surveyjs.io/private/Surveys/getTempFile?name=" + data[file.name] })); } }) .catch((error) => { console.error("Error:", error); }); }); // Wait for all uploads to complete before displaying survey results Promise.all(uploadPromises).then(() => { displaySurveyResults(result); }); }); return (); } 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(); ``` ### `src/json.js` ```js export const json = { "elements": [ { "type": "file", "title": "Please upload your files", "name": "files", "storeDataAsText": false, "allowMultiple": true, "maxSize": 102400 } ] }; ``` ### `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/delayed-file-upload/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/delayed-file-upload/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/delayed-file-upload/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/delayed-file-upload/vanillajs.md)