# Help with Custom Interface for File Uploads and Cancel Action (User Input)

**URL:** <https://community.mindstudio.ai/t/help-with-custom-interface-for-file-uploads-and-cancel-action-user-input/1803>\
**Category:** Support\
**Created:** [October 30, 2025, 12:59pm UTC](https://community.mindstudio.ai/t/help-with-custom-interface-for-file-uploads-and-cancel-action-user-input/1803 "2025-10-30T12:59:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bkermen](https://yyz2.discourse-cdn.com/flex008/user_avatar/community.mindstudio.ai/bkermen/32/1287_2.png) [@bkermen](https://community.mindstudio.ai/u/bkermen)\
**Post date:** [October 30, 2025, 12:59pm UTC](https://community.mindstudio.ai/t/help-with-custom-interface-for-file-uploads-and-cancel-action-user-input/1803/1 "2025-10-30T12:59:06Z")

</div>

I’m having some difficulty with a **custom interface** (User Input) designed to gather the following:

1. **Job posting** – single file upload

2. **Candidate resumes** – multiple file upload

Below is the generated code for the setup. I’m encountering two issues:

1. For the **job posting** (single file), I correctly receive the extracted text from the file. However, for the **resumes** (multiple files), I only get back an array of **URLs**. I need this to return an **array of extracted texts** instead.

2. I can’t figure out how to configure the **Cancel** action so that the workflow continues from the block specified as the **“On Cancel”** block in the User Input configuration.

Any insights or examples on how to handle these two cases would be greatly appreciated.

P.S. This works perfectly with the native interface.

```auto
// Handles the submission of all files
  const handleSubmit = useCallback(async () => {
    setError(null);
    if (!jobPostingFile) {
      setError('Please upload a job posting.');
      return;
    }
    if (resumesFiles.length === 0) {
      setError('Please upload at least one resume.');
      return;
    }

    setIsLoading(true); // Start loading state
    try {
      // Upload job posting file
      const jobPostingUrl = await uploadFile(jobPostingFile);

      // Upload all resume files in parallel
      const resumeUploadPromises = resumesFiles.map(file => uploadFile(file));
      const resumeUrls = await Promise.all(resumeUploadPromises);

      // Submit the CDN URLs of the uploaded files
      submit({
        job_posting: jobPostingUrl,
        resumes: resumeUrls,
      });
    } catch (err) {
      console.error('Submission error:', err);
      // Display a user-friendly error message
      setError('Failed to upload files or submit data. Please check your files and try again.');
    } finally {
      setIsLoading(false); // End loading state
    }
  }, [jobPostingFile, resumesFiles]); // Dependencies for useCallback

  // Handles the cancel action
  const handleCancel = useCallback(() => {
    // Submitting initialVariables or an empty object allows the workflow to proceed
    // with previously set values or default values, effectively "cancelling" new input.
    submit(initialVariables);
  }, [initialVariables]); // Dependency for useCallback

```

---

<div class="post-metadata">

**Author:** ![Alex\_MindStudio](https://yyz2.discourse-cdn.com/flex008/user_avatar/community.mindstudio.ai/alex_mindstudio/32/27_2.png) [@Alex\_MindStudio](https://community.mindstudio.ai/u/Alex_MindStudio)\
**Post date:** [October 30, 2025, 3:50pm UTC](https://community.mindstudio.ai/t/help-with-custom-interface-for-file-uploads-and-cancel-action-user-input/1803/2 "2025-10-30T15:50:21Z")

</div>

Hi @bkermen,

Thanks for the post!

If you’d like to let users upload multiple files in the Custom Interface, you can vibe code it to support multiple uploads and then use a Run Workflow block to trigger a sub-workflow with an Extract Text from File or OCR Image block. This way, the interface handles all file uploads, and you can pass those file links to the sub-workflow for extraction.

The On Cancel option is currently only supported with the Native Interface, but you can replicate that behavior using a Logic block. Your Custom Interface can populate a variable with specific values, and the Logic block can handle the routing based on those values.

---

<div class="post-metadata">

**Author:** ![bkermen](https://yyz2.discourse-cdn.com/flex008/user_avatar/community.mindstudio.ai/bkermen/32/1287_2.png) [@bkermen](https://community.mindstudio.ai/u/bkermen)\
**Post date:** [October 30, 2025, 6:18pm UTC](https://community.mindstudio.ai/t/help-with-custom-interface-for-file-uploads-and-cancel-action-user-input/1803/3 "2025-10-30T18:18:25Z")

</div>

Thanks, Alex; both of your suggestions worked perfectly! 🙌 I now have a fully functional agent with beautifully designed user interfaces.

That said, I’m still not _completely_ satisfied 😅 Adding the **Logic** and **Extract Text** blocks increased the **cost per run by about 20–30%**. It’s not a deal-breaker, but it’s noticeable. I could always revert to the native interface, of course, but it just feels so outdated now compared to the sleek custom interfaces. Quite the dilemma! 😄

One thing I still don’t fully understand: the **first file upload** automatically extracts the text, while the **second one** doesn’t even though both seem to rely on the same `uploadFile` function.

Is there any documentation available for the `uploadFile` function that I could review?

```auto
// Upload job posting file
const jobPostingUrl = await uploadFile(jobPostingFile);

// Upload all resume files in parallel
const resumeUploadPromises = resumesFiles.map(file => uploadFile(file));
const resumeUrls = await Promise.all(resumeUploadPromises);

```

---

<div class="post-metadata">

**Author:** ![Alex\_MindStudio](https://yyz2.discourse-cdn.com/flex008/user_avatar/community.mindstudio.ai/alex_mindstudio/32/27_2.png) [@Alex\_MindStudio](https://community.mindstudio.ai/u/Alex_MindStudio)\
**Post date:** [October 31, 2025, 12:42pm UTC](https://community.mindstudio.ai/t/help-with-custom-interface-for-file-uploads-and-cancel-action-user-input/1803/4 "2025-10-31T12:42:46Z")

</div>

Hi @bkermen,

Glad to hear it’s working now!

Here are the links to the uploadFile documentation:

- [Custom Function Methods | MindStudio University](https://university.mindstudio.ai/docs/developers/custom-function-methods#uploadfile-body-string-contenttype-string-encoding-bufferencoding-promise-less-than-url-string-great)
- [Custom Workflow Functions | MindStudio University](https://university.mindstudio.ai/docs/developers/custom-workflow-functions#more-information-about-custom-function-methods-here)

Uploading multiple files isn’t currently supported natively in the Custom Interface, but you’re welcome to create a post under the Feature Requests category for better visibility.