This is a migrated thread and some comments may be shown as answers.

Upload PDF to Base64 and API

6 Answers 1512 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Tony Kennard
Top achievements
Rank 1
Tony Kennard asked on 11 Jan 2021, 03:59 PM

Hello,

I am new to KendoUI web and using basic Jquery widget for uploading/dropping PDF file. I want to convert uploaded PDF file into Base64 string and then pass that data on to Restfull API(C#) to be saved in database.

 I did not find a way to achieve this in this section of the forums. Can anyone please help on how to do this or point me into right direction please??

Sample code would be great help if anyone got it please !!

Thanks

6 Answers, 1 is accepted

Sort by
0
Tony Kennard
Top achievements
Rank 1
answered on 11 Jan 2021, 04:13 PM
Just to confirm , I am using Javascript on frontend for this purpose -Thanks
0
Aleksandar
Telerik team
answered on 13 Jan 2021, 10:25 AM

Hi Tony,

I would suggest considering the approach suggested in this Knowledgebase article on resizing images before upload:

https://docs.telerik.com/aspnet-core/knowledge-base/upload-resize-image-before-upload

You can use this approach, however, instead of images add a file restriction that only pdf files can be uploaded, using the allowedExtensions configuration option. You can then customize the Upload select event handler to convert the pdf file to a base64 string. A possible approach is discussed in this StackOverflow thread

<input type="file" name="files" id="files" />
<script>
    $("#files").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove",
            autoUpload:false
        },
         validation: {
                allowedExtensions: [".pdf"]
            }
        select: fileSelectHandler
    });

    function fileSelectHandler(e) {
       // implement pdf-to-base64string conversion
    };
</script>

I hope the above details will help you implement the desired functionality.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Tony Kennard
Top achievements
Rank 1
answered on 13 Jan 2021, 04:47 PM

Hi Aleksandar,

Thank you for response. I am developing something on similar lines but i have to pass Base64 string as Json object from javascript. Restful API only accept Json string(Base64) and then save it to database. Here is what i have done.

** This will draw UI component on the page fine**

$("#files").kendoUpload({
                async: {
                    autoUpload: false,
                    saveUrl: "http://my-app.localhost/save"//,
                   // removeUrl: "http://my-app.localhost/remove"
                },
                validation: {
                    allowedExtensions: [".pdf"]
                }
                ,useArrayBuffer: true
            });

This above code is drawing upload widget correctly.

** I also have requirement to upload document when submit button is click so below code will intiate upload and then read files back from widget and try to convert to base64 string. String seems to be converting but not available outside onload event below**

 $("#getFiles").on('click', function (e) {
                e.preventDefault();
                var filecontent;
                var upload = $("#files").data("kendoUpload").upload();
                files = $("#files").data("kendoUpload").getFiles();
                for (var i = 0; i < files.length; i++) {
                        var reader = new FileReader();
                    reader.readAsDataURL(files[i]);
                     reader.addEventListener("load", function () {
                        filecontent = "";
                        filecontent = reader.result;/* Problem here is that this base64 conversion is not available outside i.e. if i alert it here i can see base64  string  */                   
                    }, false);
alert(filecontent );/*Above base64 string is not available in here for me to send that as JSON object parameter
                }

 

Hope it is clearer what i am trying to do. Any help appreciated thanks

0
Aleksandar
Telerik team
answered on 15 Jan 2021, 02:17 PM

Hi Tony,

Note that FileReader.readAsDataURL() is asynchronous, so possibly by the time you are trying to alert the base64 string it is not yet converted. Check this thread for details on how to handle the scenario:

 https://stackoverflow.com/questions/47195119/how-to-capture-filereader-base64-as-variable

I hope this helps.

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Tony Kennard
Top achievements
Rank 1
answered on 15 Jan 2021, 02:37 PM

Thanks Aleksandra for suggestion.

I tried exactly same thing as suggested as solution in this link but it did not work and return undefined when i tried to return something inside Load function  so we decided to go back to basic and use Base 64 conversion in API instead of client  side but Sample service examples code given in https://demos.telerik.com/kendo-ui/upload/index OR https://demos.telerik.com/kendo-ui/upload/basicusage did not work as this seems to be designed for MVC instead of Restful API? I am going through one problem at a time to see if i can fix them

0
Aleksandar
Telerik team
answered on 19 Jan 2021, 09:04 AM

Hi Tony,

Indeed the backend of the example is an ASP.NET MVC application. In general, if the save and remove handlers match the requirements described in the documentation linked below you should be able to make the Upload widget work with a REST API:

https://docs.telerik.com/kendo-ui/controls/editors/upload/modes#configuring-the-save-handler

You can check the following forum threads where similar cases have been discussed: here and here

Regards,
Aleksandar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Upload
Asked by
Tony Kennard
Top achievements
Rank 1
Answers by
Tony Kennard
Top achievements
Rank 1
Aleksandar
Telerik team
Share this question
or