How to get response from server

[giansalvo]

Hi there,
congrats for the good job!
In my application I need to send an image and to get another one in the response.
The first part (sending) is quite clear, but I don't understand if/how is possible to get the image in response. Is there a specific Hook? I looked at useItemFinalizeListener and useItemFinishListener. Is it correct? How can I use them? (please can you give an example?)
Thanks any help is much appreciated.

[yoavniran]

Hey @giansalvo thanks!
Yes, you can use useItemFinishListener exactly for that.
The API doc page shows an example of how to access the response.

Here it is:

import { useItemFinishListener } from "@rpldy/uploady";

const MyComponent = () => {
    useItemFinishListener((item) => {
        console.log(`item ${item.id} finished uploading, response was: `, item.uploadResponse, item.uploadStatus);
    });

    //...
};

If your server responds with data to the upload request, it will be available from the item.uploadResponse

[giansalvo]

thanks for the quick reply.

[giansalvo]

Sorry for reopening thi question. The problem is that I do receive a blob with local URL but I'm not enable to save the image returned from server neither to show it on screen. This is the code I wrote:

const PredictedImage = () => {
     useItemFinishListener((item) => {
         var bytes = new Uint8Array(item.uploadResponse.data);
         const blob = new Blob( [bytes] );
         const url = URL.createObjectURL( blob );
         console.log("URL: " + url)
        FileSaver.saveAs(url, "./image.jpg")
   });
   return (
     <div">
       {prediction ?
       <div>
         {
             <img src={prediction} width="100%" alt="predicted image" />
         }
       </div> : <img src = {image_placeholder} width="100%" alt="placeholder"/>}
     </div>
   )};

...

<Uploady
            multiple={false}
            destination={{ url: "http://[::1]:8438/prediction/do-prediction/" }}
            // inputFieldContainer = "img-preview-wrapper"
            // method="GET"
            inputFieldName = "image"
            formatServerResponseMethod = "blob"
          >
        <div>
          <UploadButton>Select File to upload</UploadButton>
          <br />
          <UploadPreview
            PreviewComponent={ItemPreviewWithCrop}
            previewComponentProps={{ previewMethods: previewMethodsRef }}
            previewMethodsRef={previewMethodsRef}
            fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"
          />
        </div>
        <div className="column_images">
          <PredictedImage/>
        </div>
      </Uploady>

The only thing I get is a blog like the following that doesn't get displayed or saved as an image:
blob:http://localhost:3000/43740a80-7ead-4ceb-a171-19279b4eb457

[yoavniran]

hey @giansalvo
This question is outside of Uploady's scope (or any uploader for that matter) as I dont know what is returned from your server and whether its valid.

I can tell that you're usage of Uploady is fine, but beyond that, you'd need to debug the data sent back and how to load it correctly as an image.