Warning: Storing large data like images in your survey can be dangerous. Depending on the number of images, the image sizes, and the number of respondents, problems may develop while the survey is running - including slowness or even the survey going offline. You may want to limit the number of respondents taking your survey at any given time and frequently check that your survey's performance is still acceptable.

If we want to do this in a Lighthouse Studio survey, our best option is to encode the data into Base64 and store that encoded text in the survey. Then when it comes to processing responses, you'll have to run that data through a decoder to turn them back into normal images. One challenge with this is that encoded images become very large very fast. A medium-sized image can easily be larger than what your survey database can handle in a single column. To handle this, what we may have to do after encoding the image into Base64 is chop the encoded data into smaller parts and store each part in a separate survey field. So now analysis of responses will require us to first combine the data across a number of survey fields and then run that through a Base64 decoder.

If that all sounds acceptable, here's how I'd set it up. I'd start by creating a free format question with a few hidden, text-type variables named _EncodedFile1, _EncodedFile2, _EncodedFile3, etc. Then I'd give the question this HTML:

<input name=\"[% QuestionName() %]_Upload\" id=\"[% QuestionName() %]_Upload\" type=\"file\"/>\n\n<input name=\"[% QuestionName() %]_EncodedFile1\" id=\"[% QuestionName() %]_EncodedFile1\" class=\"encodedFileVariable\" type=\"hidden\" value=\"\"/>\n<input name=\"[% QuestionName() %]_EncodedFile2\" id=\"[% QuestionName() %]_EncodedFile2\" class=\"encodedFileVariable\" type=\"hidden\" value=\"\"/>\n<input name=\"[% QuestionName() %]_EncodedFile3\" id=\"[% QuestionName() %]_EncodedFile3\" class=\"encodedFileVariable\" type=\"hidden\" value=\"\"/>\n\n<style>\n#[% QuestionName() %]_Upload {\n\twidth: 400px;\n}\n</style>\n\n<script>\n$(document).ready(function(){\n\t// --------------------------------------------------\n\t// SETTINGS\n\t// --------------------------------------------------\n\tvar acceptableExtensions = ['png', 'jpg'];\n\tvar required = false;\n\tvar charactersPerVariable = 65000;\n\tvar maxBytes = 1000000;\n\tvar responseRequiredErrorMessage = 'Image must be uploaded.';\n\tvar fileSizeErrorMessage = 'File is too large.';\n\tvar genericErrorMessage = 'File could not be uploaded.';\n\t\n\t// --------------------------------------------------\n\t// RUN\n\t// --------------------------------------------------\n\tvar input = document.getElementById('[% QuestionName() %]_Upload');\n\t\n\tif (acceptableExtensions) {\n\t\t$(input).attr('accept', acceptableExtensions.map(ext => '.' + ext).join(','));\n\t}\n\t\n\t$('#[% QuestionName() %]_div').append('<input type=\"hidden\" id=\"[% QuestionName() %]_required\" value=\"' + (required ? responseRequiredErrorMessage : '') + '\"/>');\n\t\n\tvar convertBase64 = (file) => {\n\t\treturn new Promise((resolve, reject) => {\n\t\t\tvar fileReader = new FileReader();\n\t\t\tfileReader.onload = () => {\n\t\t\t\tresolve(fileReader.result);\n\t\t\t};\n\t\t\tfileReader.onerror = (error) => {\n\t\t\t\talert(genericErrorMessage);\n\t\t\t\treject(error);\n\t\t\t};\n\t\t\tfileReader.readAsDataURL(file);\n\t\t});\n\t};\n\n\tvar uploadImage = async (event) => {\n\t\t$('#[% QuestionName() %]_div .encodedFileVariable').val('');\n\t\tvar file = event.target.files[0];\n\t\tif (file.size > maxBytes) {\n\t\t\talert(fileSizeErrorMessage);\n\t\t\treturn;\n\t\t}\n\t\tvar base64 = await convertBase64(file);\n\t\t\n\t\tvar variablePosition = 0;\n\t\twhile (base64) {\n\t\t\tvariablePosition++;\n\t\t\t$('#[% QuestionName() %]_EncodedFile' + variablePosition).val(base64.substr(0, charactersPerVariable));\n\t\t\tbase64 = base64.slice(charactersPerVariable);\n\t\t}\n\t};\n\t\n\t$(input).change(function(e){\n\t\tuploadImage(e);\n\t});\n})\n</script>

Note the settings area:

acceptableExtensions can be set to an array of what file extensions you want to support, or null to allow any file type.
required controls whether the question requires an image to be uploaded.
charactersPerVariable is the maximum number of characters that the question will try to upload to an individual variable in your survey. The highest acceptable value for this will depend on the database being used for your survey, but I'd guess that ~65,000 is safe for most databases.
maxBytes is a maximum size permitted for the uploaded file, good for trying to limit respondents from sending up too large of data. What value you want here is totally up to you.
The final three settings are error messages that will display (1) if the page is submitted with no file uploaded, (2) the file is too large, or (3) some other failure occurs in the file upload process. Set these as you will.

I'd also give the question this custom JavaScript verification:

var requiredErrorMessage = $('#[% QuestionName() %]_required').val();\nif (requiredErrorMessage && !$('#[% QuestionName() %]_EncodedFile1').val()) {\n\tstrErrorMessage = requiredErrorMessage;\n}

The last question that needs to be resolved is how many variables the free format question requires. This depends on how large of images you want to support and your charactersPerVariable setting. You may want to initially put many variables in your question, try uploading the largest image you care to support, and then check how many variables that were set. Of course, that early part of the question's HTML should be copy-and-pasted as needed so you have one <input> element for each variable of the question.

As always, be sure to test this thoroughly before sending your survey to real respondents.

Respondent to upload image in survey