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

Support
1

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.

// 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
1 Like
2

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.

1 Like
3

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

That said, I’m still not completely satisfied :sweat_smile: 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! :grinning_face_with_smiling_eyes:

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?

// 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);
4

Hi @bkermen,

Glad to hear it’s working now!

Here are the links to the uploadFile documentation:

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.