One Upload, Multiple Uses

[Lee]

I have a kendo upload on my page where users can upload multiple files. It is NOT set to batch mode, so each file is uploaded individually. I need to use the same upload and the same set of files on two different endpoints. For the first endpoint, I need to upload only the first file. For the second endpoint, I need to upload every file (including the first one). I have two separate buttons that will trigger these. There is also some custom data that I need to include from other controls on the page (like a name, address, etc). How would I accomplish this? 

Button 1: Upload the first file to Endpoint A with extra data Y

Button 2. Upload all of the files to Endpoint B with extra data Z

 

This is the actual flow

1. Select all files

2. Analyze First File (upload only the first file to the server)

3. Server responds with some info about the file ({ type: "text", "author: "John Smith", creditor: "Wells Fargo", etc }

4. This data is placed in some inputs on the page where the user can change it, for example, the system says the author is John Smith but it is really Jane Doe. In my scenario, all files must use the same data regardless of what files 2 through X may contain, so even if Jack Jackson's name appears in File 2, we are using Jane Doe. This whole process is really just to make it easier when the user fills out the data form so that they just update the stuff that is wrong.

5. After the user approves the data in the inputs, they click a submit button. At this time, all of the files are uploaded along with the edited input data object {type: "text", author: "Jane Doe", creditor: "Wells Fargo", etc }

Example:

Upload:
[ Select Files...]

[ Test First File ]

Fill out the form:
Type:       _________
Author:   _________
Creditor: _________

Click the button below to upload all files using the data entered in the form.

[ Upload Files ]

[Nikolay]

Hi Lee,

To accomplish your described workflow with Kendo UI for jQuery Upload, you can use a single Upload widget, control the upload flow with custom buttons, and dynamically manage the endpoints and extra data. Here’s how you can implement each step, including handling the server response and populating the form for user adjustments.

---

1. Setup: Kendo Upload and Custom Buttons

• Use a single Kendo Upload widget with autoUpload: false.
• Add two custom buttons: one for analyzing the first file, and one for uploading all files after editing the form.

---

2. Upload Only the First File (Analyze)

• When the "Test First File" button is clicked:
  • Set a flag to indicate "analyze" mode.
  • Trigger the upload of only the first file.
  • In the upload event handler, update the saveUrl to Endpoint A and attach extra data Y if needed.
  • Remove all files except the first from the upload queue using e.files.splice(1).

---

3. Handle Server Response and Populate Form

• Use the success event of the Upload widget to capture the server response after the first file is uploaded.
• Parse the response and populate the form fields (type, author, creditor, etc.) so the user can edit them.

---

4. Upload All Files With Edited Data

• After the user edits/approves the form, clicking the "Upload Files" button:
  • Set a flag for "final upload" mode.
  • In the upload event handler, update the saveUrl to Endpoint B.
  • Attach the edited data from the form fields as extra data Z.
  • Allow all files to be uploaded.

---

5. Example Implementation

<input type="file" name="files" id="files" />
<button id="btnAnalyzeFirstFile">Test First File</button>
<br/><br/>
Type: <input type="text" id="type" /><br/>
Author: <input type="text" id="author" /><br/>
Creditor: <input type="text" id="creditor" /><br/>
<button id="btnUploadAll">Upload Files</button>

<script>
  var uploadMode = ""; // "analyze" or "final"

  $("#files").kendoUpload({
    async: {
      saveUrl: "https://initial-url", // Will be overridden dynamically
      autoUpload: false
    },
    upload: function(e) {
      if (uploadMode === "analyze") {
        // Only upload the first file to Endpoint A
        e.sender.options.async.saveUrl = "https://your-endpoint-a.com/upload";
        e.files.splice(1); // Remove all but first file
        // Optional: attach extra data Y here
        e.data = {
          // e.g., sessionId: "xyz"
        };
      } else if (uploadMode === "final") {
        // Upload all files to Endpoint B with form data
        e.sender.options.async.saveUrl = "https://your-endpoint-b.com/upload";
        e.data = {
          type: $("#type").val(),
          author: $("#author").val(),
          creditor: $("#creditor").val()
        };
      }
    },
    success: function(e) {
      // Only handle server response after analyzing first file
      if (uploadMode === "analyze" && e.operation === "upload") {
        // Assuming server returns { type: "...", author: "...", creditor: "..." }
        var response = e.response;
        // Populate the form fields
        $("#type").val(response.type || "");
        $("#author").val(response.author || "");
        $("#creditor").val(response.creditor || "");
      }
    }
  });

  $("#btnAnalyzeFirstFile").click(function() {
    uploadMode = "analyze";
    // Trigger upload (only first file will be uploaded)
    $(".k-upload-selected").click();
  });

  $("#btnUploadAll").click(function() {
    uploadMode = "final";
    // Trigger upload for all files with edited data
    $(".k-upload-selected").click();
  });
</script>

---

Additional Notes & Suggestions

• Alternative Approach: If you want more granular control, you could also use the Upload’s built-in methods like getFiles() and manually manage uploads with AJAX, but the above approach leverages the built-in widget features.
• Data Handling: Make sure the server response after the first upload contains the expected structure so you can easily populate the form.
• Clarification Needed: If your server response format is different or you need to handle additional data, please share the response structure for more tailored advice.

---

Summary of Workflow

1. User selects files.
2. User clicks "Test First File" → only the first file is uploaded to Endpoint A.
3. Server responds with data → form fields are auto-filled.
4. User edits/approves the data.
5. User clicks "Upload Files" → all files are uploaded to Endpoint B, along with the edited form data.

Let me know if you need further customization or if you have a specific server response format to consider.

Regards,

Nikolay
Progress Telerik

[Lee]

Thank you so much for this! I didn't realize I could manipulate e.files without permanently removing all of the files. The flag variable is a good idea too.