Error in uploading single/multiple files

[Rahul Kumar]

Hello sir,

On uploading single/multiple files, it shows error retry. Please refer to my code snippet attached below & make changes accordingly. Also i want to show the names of all uploaded files.

Thanks 

Rahul Kumar

Attachment: Dialog_Button_(2)_85602222.zip

[Keerthana Rajendran]

Hi Rahul kumar, 

 

Thanks for contacting Syncfusion support.  

 

We checked your sample. The saveUrl and removeUrl path is not mapped correctly with the corresponding file action (handler files) in your sample. We have modified the sample with online service links for reference. Refer to the following code 

 

$("#Uploadbox").ejUploadbox({ 

            saveUrl: "https://js.syncfusion.com/ejServices/api/uploadbox/Save", 

            removeUrl:"https://js.syncfusion.com/ejServices/api/uploadbox/Remove", 

            allowDragAndDrop: true, 

            multipleFilesSelection: true, 

             dropAreaHeight: "300px", 

            dropAreaWidth: "600px", 

            buttonText: { browse: "Choose File", upload: "Upload File", cancel: "Cancel Upload" }, 

            showFileDetails: true, 

            success:function(args) 

               { 

                console.log(args); 

               } 

        }); 

 

You can write your own code for save and remove actions by referring the below document.  

 

https://help.syncfusion.com/js/uploadbox/file-actions 

 

You can get the file details after upload through success event of Uploadbox as shown below 

 

 

 

Please refer to the below UG link for events available with ejUploadbox 

 

https://help.syncfusion.com/api/js/ejuploadbox#events 

 

We have modified the sample and attached in the following link for reference  

 

https://www.syncfusion.com/downloads/support/forum/161715/ze/Upload_action1747646987 

 

Please let us know if you need further assistance. 

 

Regards, 

Keerthana.  

[Rahul Kumar]

Hello Keerthana,

Thanks ! It's working fine now.

I want to ask another query, how can i show uploaded file names below the uploadbox & also show those uploaded data into pdf format on button click event.

Thanks

Rahul Kumar

[Keerthana Rajendran]

Hi Rahul kumar, 

 

Query: How can I show uploaded file names below the ejUploadbox 

 

You can get the uploaded file name with success event of Uploadbox and this can be displayed wherever required based on your requirement. 

 

$("#Uploadbox").ejUploadbox({ 

            saveUrl: "https://js.syncfusion.com/ejServices/api/uploadbox/Save", 

            removeUrl:"https://js.syncfusion.com/ejServices/api/uploadbox/Remove", 

            allowDragAndDrop: true, 

            multipleFilesSelection: true, 

             dropAreaHeight: "300px", 

            dropAreaWidth: "600px", 

            buttonText: { browse: "Choose File", upload: "Upload File", cancel: "Cancel Upload" }, 

            showFileDetails: true, 

           success:function(args) 

               { 

               $("#fileName").text(""+args.files.name+" is uploaded successfully"); 

               } 

        }); 

 

We have modified the sample based on this and attached in the following link 

 

https://www.syncfusion.com/downloads/support/forum/161715/ze/upload_file678893061 

 

Query: Show those uploaded data into PDF format on button click.  

 

Before we proceed, please share us some additional details on your exact requirement.  

 

1. Whether you need to convert the uploaded files to PDF document? then we support to export images https://help.syncfusion.com/file-formats/pdf/working-with-images and other file formats to PDF as mentioned in https://help.syncfusion.com/file-formats/pdf/working-with-document-conversions.
2. Need to convert the upload box data as table in PDF document? then we can export the PDF with the details as a table. 

 

Please let us know if you need further assistance.  

 

Regards, 

Keerthana.  

[Rahul Kumar]

Hello Keerthana,

Yes i need to convert the uploaded files to PDF document, but uploaded files must in multiple format mode (jpg/png).

Thanks 

Rahul Kumar

[Keerthana Rajendran]

Hi Rahul, 

 

Once the files are uploaded, the file details can be retrieved in save handler method and this can be converted to memory stream. After converting to memory steam, we can able to convert images to PDF and please find the below documentation for more details,   

 

UG: https://help.syncfusion.com/file-formats/pdf/working-with-images   

KB: https://www.syncfusion.com/kb/9541/how-to-convert-image-to-pdf-using-c-and-vb-net   

  

Other file formats to PDF: https://help.syncfusion.com/file-formats/pdf/working-with-document-conversions   

 

You can also refer the below KB for displaying a pdf file that is uploaded using Uploadbox. 

 

https://www.syncfusion.com/kb/9639/how-to-display-a-pdf-file-that-is-uploaded-using-the-uploadbox-control-in-pdf-viewer 

 

Please let us know, if you need further assistance. 

 

Regards, 

Keerthana. 

[Rahul Kumar]

Hello Keerthana,

Please can you elaborate the above query with example. Please refer to my code snippet & make changes accordingly.

Thanks

Rahul Kumar

Attachment: index_6__Copy_(4)__Copy_f7d06716.zip

[Keerthana Rajendran]

Hi Rahul, 

 

On further analysis, we have checked the possibilities to integrate the PDF solution (convert image to PDF) with your sample by using WCF service. Currently, we are trying to modify the provided sample with WCF service in our end and we will update the sample on February 15^th , 2021.  

 

Note: We do not have support for integrating PDF library with JavaScript, it is a C# library.   

 

Please let us know if any concerns.  

 

Regards, 

Keerthana. 

[Gowthamraj Kumar]

Hi Rahul,  

  

Sorry for the inconvenience caused. 

We are facing complexities to integrate the PDF solution (convert image to PDF) with your sample by using WCF service. We are still working on modifying the provided sample with WCF service in our end and we will update the sample on February 17th , 2021 without any delay.   

  

Regards, 

Gowthamraj K 

[Gowthamraj Kumar]

Hi Rahul, 

 

Thank you for your patience. 

 

We have integrate the PDF solution (convert Image into PDF )with provided sample by using Web API post call. We have attached the modified sample for your reference and kindly try the sample on your end and let us know the result.  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161715/ze/WebAPI-914226502 

Index: https://www.syncfusion.com/downloads/support/forum/161715/ze/Html-577942084  

 

Note: Please make sure the Web API application are running, while clicking the generate PDF button in the index file. 

 

Please let us know if you need any further assistance with this. 

 

Regards, 

Gowthamraj K 

[Rahul Kumar]

Hello Gowthamraj K,

Can you provide me a video demo of the solution? Also, can we use web API within the html code? 

Thanks

Rahul Kumar

[Gowthamraj Kumar]

Hi Rahul, 

 

Can you provide me a video demo of the solution?	We are currently preparing the video demo of the solution, we will update the sample video demo on February 22nd 2021.    Steps:  Run the wep api sample and localhost will be opened in browser. Then, you can upload the image files (png/jpg) from browser from your index file. Finally, click the generate PDF button, document will be generated in web api sample location.
Also, can we use web API within the html code?	As we said earlier, PDF control is a C# library, we could not use the web API (Image to PDF) conversion within the html code. https://help.syncfusion.com/file-formats/pdf/overview

 

Regards, 

Gowthamraj K 

[Gowthamraj Kumar]

 Hi Rahul, 

Please find the below video demo for running the sample. Please make sure the Web API application are running, while clicking the generate PDF button in the index file. Finally, the converted PDF document will be saved in Web API application location. 

Video Demo:  https://www.syncfusion.com/downloads/support/forum/162744/ze/Video-2003277555 

Please let us know if you need any further assistance with this. 

Regards, 

Gowthamraj K