Upload PDF to Base64 and API

[Tony Kennard]

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

[Tony Kennard]

Just to confirm , I am using Javascript on frontend for this purpose -Thanks

[Aleksandar]

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

[Tony Kennard]

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

[Aleksandar]

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

[Tony Kennard]

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

[Aleksandar]

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