Cannot understand how do I extract upload details and send it with request via params

[rohanm19]

Hi All,

I am trying to use Uploady for a react app, and I am failing to understand how do I extract details like file name and contents to send to my node server.

In the following snippet, QueueItem is where I extract the information. the console logs look fine. But since it is part of UploadPreview props, I am not sure how the parent prop "destination" can access this before rendering.

Not sure if I am able to clearly articulate the problem. But for me both the filename and body is not set, I just get a blank file with 0 as the filename

`
useItemProgressListener(item => {
if (item.completed > progress) {
setProgress(() => item.completed);
setItemState(() =>
item.completed === 100 ? STATES.DONE : STATES.PROGRESS
);
}
console.log("item",item)
setFileName(item.file.name);

  fetchAsBlob(props.url)
 .then(convertBlobToBase64)
 .then(setUploadBody)
 .then(console.log("uploadBody",uploadBody))
 .then(setIsLoading(false))

}, props.id);

`

<Uploady // debug destination={{ url: '/s3createObject', headers: {'filekey': nodePath[nodePath.length-1].Key + fileName, 'accept': '*.jpg'}, params : {'body': uploadBody}} } // enhancer={composeEnhancers(mockSenderEnhancer)} > {/* <UploadProgress/> */} <UploadyButton></UploadyButton> <PreviewsContainer> <UploadPreview rememberPreviousBatches PreviewComponent={QueueItem} /> </PreviewsContainer> </Uploady>

[yoavniran]

hi @rohanm19

Im not sure exactly what you're trying achieve.

When uploading with Uploady, the default upload is done using a POST request with formdata.
The browser takes care of sending the file content and its info to the server:

You need to make sure your server knows how to handle multipart uploads (ex: Multer for Express on Node).

Any data you wish to add to the upload can be done using the params prop. Dynamically adding params can be done easily with the
useRequestPreSend hook.

Check out the Dynamic Parameters Guide for sample code.

Let me know if something is still unclear

[x-N0]

@yoavniran I think what he wants to do its to send it as json body instaed of formdata (multipart form), is that possible with the latest version?

How can you do something like this with useRequestPreSend?

[yoavniran]

Changing the format of the request cannot be done with useRequestPreSend.
A lower-level change is required.

There's a (yet-to-be-documented) feature of the xhr-sender that can be leveraged.
It's the ability to create an instance of the sender with a customized request body.

Something like this:

import { Uploady } from "@rpldy/uploady";
import { getXhrSend } from "@rpldy/sender";

const mySend = getXhrSend({
  getRequestData: (items, options) => {
                               // !! return the json object you want to send here !!
                        },
});

const MyApp = () => {
    return (
         <Uploady send={mySend}>
              <RestOfMyApp/>
         </Uploady>
    );
};

Note that if you do this, its completely up to you to include everything you want in the data sent to the server. Uploady will not be involved.