Trigger file upload from multiple files based on an external generated id

[unkindee]

I have the following flow using react/redux:

1. upload files with autoUpload set to false
2. on button click I call a service which creates some stuff and returns some Ids(no file upload, just backend stuff)
3. based on each returned/created id I want to upload the file from 1. by customizing the upload url, like: url/id

example:
Step1: upload file1, file2, file3, and keep them pending
Step2: I get the ids from backend and I want to upload the files to url/id1 for file1, url/id2 for file2, url/id3 for file3 and possible other custom params

I have seen processPending and useRequestPreSend but I didn't find a way to upload only a certain file/batch out of multiple, is that possible?

[yoavniran]

hi @unkindee

You should be able to do this quite easily with the useRequestPreSend hook.

import React from "react";
import Uploady, { useRequestPreSend } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const getUrlForUpload = async (options) => {
  const importantParam = await Promise.resolve(Math.floor(Math.random() * 3));

  return importantParam > 0
    ? options.destination.url + `/item/${importantParam}`
    : null;
};

const UploadWithDynamicUrl = () => {
  useRequestPreSend(async ({ items, options }) => {
    const newUrl = await getUrlForUpload(options);

    return newUrl
      ? //set the new URL for this upload
        { options: { destination: { url: newUrl } } }
      : //not valid URL, cancel the upload
        false;
  });

  return <UploadButton />;
};

const MyApp = () => (
  <Uploady    
    destination={{ url: "https://made-up-server/upload" }}
  >
      <UploadWithDynamicUrl />   
  </Uploady>
);

The code above generates a random number and for 0 will cancel the upload (ie not valid URL) and for other results will append the number to the URL path.

• Updating is done by returning the modified destination URL as part of the options object from the hook's handler.
• Cancelling is done by returning false

The updated URL will be: https://made-up-server/upload/item/1 or https://made-up-server/upload/item/2

Working example can be found in this sandbox.

[unkindee]

Hi @yoavniran,

Thank you for the answer, it helps to some extent. Problem is I need the files to stay 'pending' and trigger them one by one in my last step. Basically your example works great if I upload only one file and keep autoUpload={false} but not for multiple because the flow would be like this:
Step1 - upload files, Step2 do some stuff, Step3 click on a button and trigger some actions, based on the number of files I return an equal number of IDs, after receiving the IDs I'll upload one file per one generated ID. (file-1 to /id1, file-2 to /id2 etc)

Component1

//STEP 1 - just upload files and do nothing
<Uploady
  destination={{
    url: 'PUT URL HERE',
  }}
  autoUpload={false}
  multiple
  grouped
>
  <MultiStep />
</Uploady>

Component2

• do other stuff in between

Component3

STEP 3 - do the upload once createdModelId has a value, trigger another upload once the createdModelId changes
const UploadButtonWithDynamicValues = () => {
  const { processPending } = useUploady()

  //this updates automatically once a new createdModelId is generated, value fetched from reducer automatically
  const createdModelId = useSelector(state => state.uploadModel.createdModelId)

  useRequestPreSend(async ({ items, options }) => {
    return createdModelId
      ? //set the new URL for this upload
        { options: { destination: { url: createdModelId } } }
      : //not valid URL, cancel the upload
        false
  })

  //this updates automatically once a new createdModelId is generated
  if (createdModelId) {
    - based on each new generated ID I would like to upload a specific file
    processPending('upload file and ignore the others, when createdModelId changes again, upload a new file and ignore the remaining ones')
  }

  const onCreate = () => {
    create() //this action triggers the generation of IDs + other things and saves each ID in a redux reducer
  }

  return (
     <button type="button" onClick={onCreate}>create</button>}
  )
}

[yoavniran]

@unkindee
Im still unclear about the flow you wish to achieve and what exactly the issue is.

A few questions/comments:

1. I see you use the grouped prop. This means that the items passed to the useRequestPreSend can have more than one item. The default for grouped is false. In that case you only get one item. If you need a different URL per file then you should leave grouped turned off.

2. "Component3" in your example is called UploadButtonWithDynamicValues but I dont see when the user gets to actually select files. Because the create you call only triggers your own logic which eventually changes "createModelId" so processPending will be called (once redux state changes)

3. Currently, your create() call doesnt take into account how many files were uploaded. Perhaps thats the source of the problem? In that case, you may want to use the useBatchAddListener which will give you the items (files) that the user selected. This way, you can base your creation logic accordingly.

It would be really useful if you could create a minimal working example sandbox that I could follow the flow and your requirements better so I can help with this.