Custom Previews for File Upload Questions

All right,How to pop up a pop-up window to confirm before deleting a file, and how to control the display, hide, and delete functions in display and edit modes. Also, if there are many files, can we continue to use pagination and click the left and right arrows to view them instead of scrolling down

The following code has no effect

JavaScript
Survey.Serializer.getProperty("file", "showPreview").defaultValue = false;

Hello,
When you implement a custom file preview, you control a file removal operation and the way a template is rendered in read-only (display) mode. Therefore, you would activate a custom popup when a user clicks Delete: this is to be controlled from your custom component's code. Also, you are expected to apply necessary styles based on a question's read-only mode. Take note that the pagination option becomes disabled as soon as you enable a custom file preview. As you're creating a custom file preview, you would require to apply required styles and arrange file previews as needed.

You may consider using the default file preview. To display a removal confirmation dialog, enable the QuestionFileModel.needConfirmRemoveFile option.

Please let me know if you require further assistance.

How to globally set the property showPreview to false? I tried the following code but it didn't work

JavaScript
Survey.Serializer.getProperty("file", "showPreview").defaultValue = false;

Another issue is that after setting the above code in the questionnaire editor, the preview page content is blank

Hi,
The following code modifies the default value of a showPreview File Upload question setting:

JavaScript
import { Serializer } from "survey-core";

Serializer.getProperty('file', 'showPreview').defaultValue = false;

With this option, the custom file preview will be used instead of a default file preview. If you disable the showPreview option, you're expected to register a custom "sv-file-preview" component which renders a file preview: View Demo.

If you have additional questions or require further assistance, please feel free to contact us at any time.

my code as below:

JavaScript
/**
 * @description -自定文件預覽組件
 */
function customFilePreview() {
    if (!Survey) return;
    // 如果已經注冊先移除
    if (Survey.ko.components.isRegistered("sv-file-preview")) {
      Survey.ko.components.unregister("sv-file-preview");
    }
    // 禁止是否圖像預覽，使用自定義的文件上傳預覽組件
    Survey.Serializer.getProperty("file", "showPreview").readOnly = true;
    Survey.Serializer.getProperty("file", "allowImagesPreview").readOnly = true;
    Survey.Serializer.getProperty("file", "showPreview").defaultValue = false;
    Survey.Serializer.getProperty("file", "allowImagesPreview").defaultValue = false;
    Survey.ko.components.register("sv-file-preview", {
      viewModel: {
        createViewModel: function () {
          let self = this;
          self.koRecalc = Survey.ko.observable(1);
          self.getFiles = (question) => {
            const _dummy = self.koRecalc();
            if (question.koHasValue()) {
              return question.value;
            } else {
              return [];
            }
          };
          // 文件預覽事件處理
          self.previewFile = async function (question, fileItem) {
            //   pdf预览
            if (fileItem.type == "application/pdf") {
              let fileURL;
              layuiLayer({
                title: false,
                type: 1,
                area: ["70%", "100%"],
                content: async function () {
                  let pdffile = await getFileFromUrl(
                    jsonPath + fileItem.content,
                    fileItem.name,
                    "application/pdf"
                  );
                  // 使用 Blob 创建一个 URL
                  fileURL = URL.createObjectURL(pdffile);
                  return `<embed src="${fileURL}" type="application/pdf" width="100%" height="100%" />`;
                },
                fixed: false, // 不固定
                maxmin: false,
                shadeClose: true,
                resize: false,
                offset: "l",
                anim: "slideRight", // 从右往左
                end: function () {
                  URL.revokeObjectURL(fileURL);
                },
              });
            }
            //   圖片預覽
            else if (fileItem.type.startsWith("image/")) {
              let imagefile = await getFileFromUrl(
                jsonPath + fileItem.content,
                fileItem.name,
                fileItem.type
              );
              // 使用 Blob 创建一个 URL
              let imageURL = URL.createObjectURL(imagefile);
              layer.photos({
                photos: {
                  title: fileItem.name,
                  start: 0,
                  data: [
                    {
                      alt: "layer",
                      pid: 1,
                      src: imageURL,
                    },
                  ],
                },
                end: function () {
                  URL.revokeObjectURL(imageURL);
                },
              });
            }
          };
          // 文件下載事件添加
          self.downloadFile = function (question, fileItem) {
            let url = jsonPath + fileItem.content;
            window.open(url, "_self");
          };

          // 文件移除事件添加
          self.removeFile = function (question, fileName) {
            question.removeFile(fileName);
            self.koRecalc(self.koRecalc() + 1);
          };

          // 是否显示刪除按鈕
          self.isShowRemoveBtn = function () {
            return surveylibrary.mode == "edit";
          };
          // 是否顯示預覽按鈕
          self.isShowPreviewBtn = function (fileItem) {
            return (
              ["application/pdf"].includes(fileItem.type) ||
              fileItem.type.startsWith("image/")
            );
          };

          return self;
        },
      },
      template: `
          <div class="my-preview-container">
              <div class="files-container">
                <!-- ko foreach: { data: getFiles(question), as: 'fileItem' } -->
                <div class="button-container">
                  <div class="btn btn--choose"
                  data-bind="click: () => $parent.downloadFile(question, fileItem)"
                  >
                    <span data-bind="text: fileItem.name"></span>
                  </div>
                  <!-- 预览按钮-->
                  <div class="btn  btn--previrew" data-bind="visible: $parent.isShowPreviewBtn(fileItem),click: () => $parent.previewFile(question, fileItem)">
                      <i class="fa-regular fa-eye"></i>
                  </div>
                  <!-- 刪除按钮-->
                  <div class="btn btn--remove" data-bind="visible: $parent.isShowRemoveBtn(),click: () => $parent.removeFile(question, fileItem.name), attr: { title: 'Remove file' }">
                     <i class="fa-regular fa-trash-can"></i>
                  </div>
                </div>
                <!-- /ko -->
              </div>
            </div>
          `,
    });
  }

But there is a problem when deleting files. If I delete the first file and the request is successful, but the page still displays this file, if I start deleting from the last file, there will be no problem. Why is this

framework version：1.11.9
The operation is as follows

Hello,
I created the following demo for your reference: View Demo. A file is correctly removed when a user clicks the remove button.

I hope this demo helps. If you require further assistance, please update this example to illustrate the problematic behavior.

Thank you

The situation in the demo you provided is also the same. The console reported an error and could not obtain the file name. When clicking to delete the first file

It seems that the deletion was successful when the first click was clicked, but the DOM was not removed, so the second click prompted that the file name could not be found. How can this be resolved

Hello,
Thank you for the clarification. I managed to reproduce this issue using the survey-knockout-ui package. However, take note that the issue is not reproduced when using the survey-js-ui package and a custom file preview component: View Demo. As the SurveyJS Form Library for Knockout (the survey-knockout-ui package) no longer receives updates, I recommend that you migrate to the survey-js-ui package.

Should you have any further questions, please let us know.

There is still a bug after updating to React. When I upload multiple files and click to delete all files, only one file will be deleted in the end.

code:

JavaScript
survey.onClearFiles.add(async (_, options) => {
    // 簽名組件刪除
    if (options.question.getType() === "signaturepad") {
      if (options.value) {
        await deleteFile(options.value, options);
      }
      return;
    }

    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`);
      }
    }
  });

I still want to keep the page function, but SurveyFileItem needs to be customized. How to implement it.

Hello,

There is still a bug after updating to React. When I upload multiple files and click to delete all files, only one file will be deleted in the end.

I tested the following React demo, however, I didn't reproduce the mentioned issue. All files were correctly removed when I clicked the Clear button: Custom Previews for File Upload Questions. Please test this demo on your end and let me know how it goes.

I still want to keep the page function, but SurveyFileItem needs to be customized. How to implement it.

You may wan to review the source code of the default file preview at file-preview.tsx.

Should you have any further questions, please let us know.

I found the following issues while running the example you provided.
The following for loop will only delete one file and return success before continuing, so it will only delete one file。
error code:

JavaScript
for (const item of options.value) {
    await deleteFile(item.content, options);
}

source code:

JavaScript
survey.onClearFiles.add(async (_, options) => {
    debugger
    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`);
        }
    }
});

Hello,
Thank you for the update. I managed to reproduce this issue. It is caused by the fact that the options.callback("success") function is called within the deleteFile function. To fix this issue, it is necessary to modify the deleteFile function to return a promise and wait for all deletions before calling options.callback. As a result, the options.callback will be called only once within the onClearFiles event.

JavaScript
async function deleteFile(fileURL) {
    try {
      const name = fileURL.split("=")[1];
      const apiUrl = `https://api.surveyjs.io/private/Surveys/deleteTempFile?name=${name}`;
      const response = await fetch(apiUrl, { method: "DELETE" });

      if (response.status === 200) {
        console.log(`File ${name} was deleted successfully`);
        return "success";
      } else {
        console.error(`Failed to delete file: ${name}`);
        return "error";
      }
    } catch (error) {
      console.error("Error while deleting file: ", error);
      return "error";
    }
  }

  survey.onClearFiles.add(async (_, options) => {
    if (!options.value || options.value.length === 0) {
      return options.callback("success");
    }

    const filesToDelete = options.fileName
      ? options.value.filter((item) => item.name === options.fileName)
      : options.value;

    if (filesToDelete.length === 0) {
      console.error(`File with name ${options.fileName} is not found`);
      return options.callback("error");
    }

    const results = await Promise.all(
      filesToDelete.map((file) => deleteFile(file.content))
    );

    if (results.every((res) => res === "success")) {
      options.callback("success");
    } else {
      options.callback("error");
    }
});

View Demo

We'll update our website demos shortly.

Thank you