We embedded our self-developed survey JS page into the app through iframe tags, but when we tried to upload it, there was no response when we clicked upload. Our app has its own methods for uploading images and taking photos. How should I handle this situation? I see a custom file preview available. Can I customize the upload components? In this case, we use the APP to upload internally, and use SurveyJS to upload externally. I'm not sure if this plan is feasible, or do you have any other options?
CodefileUploadFn(){
let _this=this;
console.log('1')
this.surveyView.onUploadFiles.add(async (_, options) => {
console.log('2',options.files)
if(options.files && options.files.length>0){
console.log('3',options.files)
options.files.forEach(async (item)=>{
console.log('4',item)
await uploadFn(item,options);
})
}
});
async function uploadFn(item,options){
console.log('5',item,options)
const formData = new FormData();
let fileName=item.name;
formData.append('file', item);
formData.append('fileName', item.name);
formData.append('name', item.name);
let headers={
"Timestamp":new Date().getTime(),
"Content-Type": "Multipart/form-data",
'Request_node_ip':'127.0.0.1',
timeout:20000
}
console.log('6',item,options)
console.log(deviceTest(),'应用端')
if(deviceTest()=='android' || deviceTest()=='ios'){
let params={
item,
fileName,
formData,
headers,
url:`${API.uploadByteFile+"?filePath="+fileName}`,
sourceType:'formExecution',
options
}
console.log('上传7',params)
_this.uploadApp(params)
}else{
_this.$getInterfaceData(
API.uploadByteFile+"?filePath="+fileName,
"POST",
formData,
headers,
'uploadFile')
.then((response) => {
let {code, data, msg }=response.data
if(code == 0){
let objectKey=data.objectKey;
options.callback( new Array({ file: item, fileName:fileName, content: "/tkhos-file-cluster/fileOs/getByteFile?name="+fileName+"&objectKey="+objectKey}));
}else{
_this.$message({
message: msg,
type: 'error'
});
options.callback([], [ 'An error occurred during file upload.' ]);
}
});
}
}
async function deleteFile(fileURL, options) {
try {
const urlParams = new URLSearchParams(fileURL);
const name = urlParams.get('objectKey');
// console.log('myParam:', myParam);
// const name = fileURL.split("?")[1].split('=')[1];
let headers={
"Timestamp":new Date().getTime(),
'Request_node_ip':'127.0.0.1'
}
let data={
objectKey:name
}
_this.$getInterfaceData(
API.delete,
"POST",
data,
headers)
.then((response) => {
let {code, msg }=response.data
if(code == 0){
options.callback("success");
}else{
_this.$message({
message: msg,
type: 'error'
});
options.callback("error");
}
});
}
catch (error) {
console.error("Error while deleting file: ", error);
options.callback("error");
}
}
this.surveyView.onClearFiles.add(async (_, options) => {
if (!options.value || options.value.length === 0)
return options.callback("success");
if (!options.fileName && !!options.value) {
for (const item of options.value) {
await deleteFile(item.content, options);
}
} else {
const fileToRemove = options.value.find( (item) => item.name === options.fileName );
if (fileToRemove) {
await deleteFile(fileToRemove.content, options);
} else {
console.error(`File with name ${options.fileName} is not found`);
}
}
});
async function confirmDialog(){
return _this.$confirm('是否删除当前文件?', '提示', {
cancelButtonText: '取消',
confirmButtonText: '确定',
type: 'warning'
})
}
settings.confirmActionAsync=(message,callback)=>{
confirmDialog(message).then(result=>{
callback(result);
}).catch(()=>{
})
return true;
}
},
The app should have disabled native uploads and require my own internal uploads. Do I need to write a custom upload component to override SurveyJS?
Can only go to print 1, not print 2
Hello,
From what I gather, when you use a File Upload question within your form embedded within an iFrame, the Select File button doesn't activate the standard file upload dialog and therefore, you cannot select a file and the
survey.onUploadFilesfunction is not raised.To override the standard file chooser dialog, implement the
SurveyModel.onOpenFileChooserfunction. This function is raised when a respondent clicks "Select File". You may want to activate your custom file chooser dialog within this function. Once a file is selected, call theoptions.callbackfunction with selected files. Afteroptions.callbackis called, thesurvey.onUploadFileswill be raised and you'll be able to upload files to your proprietary storage. An example on how to override the standard file chooser dialog is available here.Please let me know if you have any further questions.
The SurveyModel. nOpenFileChooser function can trigger the selection of a file, because I am an iframe nested inside someone else's app. After triggering the selection of a file, I call someone else's method of uploading an image. After the upload is successful, someone returns me the ID of the image, but I hope this ID can be displayed in options. callback(), but currently it cannot be displayed.
Is there a way to directly assign values to files, such as clicking a button and displaying several files directly on the file, when editing with the survey tool
Hello,
If you wish to disable the default file upload behavior, implement the
survey.onOpenFileChooserand implement a custom file selection function. You're expected to call theoptions.callbackfunction from theonOpenFileChooserand pass a selected image. After that, thesurvey.onUploadFilesfunction is raised. It receives selected images. You may upload those images to your storage.If images are stored as Base64 encoded strings, they can be successfully previewed in a file upload form element. However, if you store images by IDs, you need to additionally implement the survey.onDownloadFile function, retrieve files from your storage and send them to the preview. Please follow this demo: Retrieve Uploaded Files for Preview Using File Names.
With this option, a file upload will be able to display previews of uploaded images.
I hope this information helps.
The File Upload is a question type which allows users to upload files when they fill in a survey. From what I gather, you wish to upload some default files which will be available for respondents. Please let me know if I misunderstood your task.