React Upload

[MZhou]

I use the React Upload component. I used the simple synchronous version in my project without any problems. Due to the file size I need to switch to the async Version. But I am not able to "transpile" my project. I have the following error message during project build:

Attempted import error: 'UploadAsync' is not exported from '@progress/kendo-react-upload' (imported as 'UploadAsync').

Reference: https://www.telerik.com/kendo-react-ui/components/upload/api/uploadasyncprops

In code I have no errors - only during the build process.

Here are my packages:

    "@progress/kendo-licensing": "^1.3.5",

    "@progress/kendo-react-grid": "^10.1.0",

    "@progress/kendo-react-listview": "^10.1.0",

    "@progress/kendo-react-treeview": "^10.1.0",

    "@progress/kendo-react-upload": "^10.1.0",

    "@progress/kendo-svg-icons": "^4.0.0"

 

How can I use the async React Upload component?

[Vessy]

Hello, Marc, 

The error you're encountering is due to attempting to import a non-existent UploadAsync component from the @progress/kendo-react-upload package. The KendoReact Upload component inherently supports asynchronous uploads without requiring a separate UploadAsync component.

Here's how you can configure the existing Upload component for asynchronous uploads:

• Make sure you are importing the Upload component correctly. There is no UploadAsync component, so you should import Upload from @progress/kendo-react-upload.

  import { Upload } from "@progress/kendo-react-upload";
  

• Configure the Upload component with the necessary properties for asynchronous functionality. You can control the upload process and specify the endpoints for saving and removing files.

  <div className="upload">
    <Upload
      autoUpload={false} // Set to false for manual control
      actionsLayout="start" 
      defaultFiles={[]} 
      withCredentials={false} 
      saveUrl={'https://your-upload-endpoint.com/save'} 
      removeUrl={'https://your-upload-endpoint.com/remove'} /
    />
  </div>
  

For more information on using the Upload component, please refer to the documentation:

• https://www.telerik.com/kendo-react-ui/components/upload/get-started
• https://www.telerik.com/kendo-react-ui/components/upload/api/uploadlistitemprops#async 

I hope the provided information will be helpful for you but let me know if I can assist you any further on this matter.

Regards,

Vessy
Progress Telerik

[MZhou]

Thanks for your answer. I used the async behavior in jQuery Kendo a lot and I need to contro the other async settings too. For example how can I set the chunkSize? Or maybe is mixed with streaming upload function. How can I enable the streaming transfer?

[MZhou]

I miss also all meta-Information about chunk-index, total chunks etc. How can I enable the streaming upload?

[Vessy]

Hi, Marc,

i am afraid that unlike the Upload widget for jQuery, the KendoReact Upload component does not support chunked uploads or streaming uploads natively at the moment. This functionality is not yet implemented in the KendoReact library. However, there is an existing feature request for chunk upload support, and you can follow its progress or vote for it to increase its priority:

• https://feedback.telerik.com/kendo-react-ui/1458695

The current KendoReact Upload component does not provide also meta-information like chunk-index or total chunks out of the box. You will need to implement custom logic to track and manage this information during the upload process.

If you have specific requirements or ideas for how you would like these features to work, I recommend adding your comments to the feature request linked above to provide more context to the development team. This will help in prioritizing the development of these features.