Loading file from blob

[zeecorleone]

Currently I pass the file's URL to PDFAnnotate method in order to load it for edit. After making some changes, we can hit save. We can get the updated file's blob by using something like following, on Save button:

 var doc = new jspdf.jsPDF();
    ...
    ...
    var myPDF = doc.output('blob');

My question is, how can I initialize this file again in order to add some more changes? Remember, I did not post/write it on server as yet. I just did: doc.output('blob')

My Usecase I want to give user ability to select between two files for editing. When user hits 1st file (button) I'll load it using URL. But problem is when user moves to 2nd file and then wants to come back to 1st file again, because he wanted to add one more change in file which he forgot to make earlier while editing first file. I will post both files at the end to the server finally when user is sure he doesn't have to make any further changes. Meanwhile I'll keep edited files in blob. Or you have better suggestion? Any help/guidelines will be appreciated

@chanafdo @RavishaHesh

[abhimanusharma]

@zeecorleone Check @RavishaHesh 's answer to #9

[zeecorleone]

@abhimanusharma , thanks. But that solution is allows to load from JSON, not blob. Because when I want to write the files on server, I should have at least blobs ready for each edited files, so that I can send them to my server to write them as new PDF file. Can I do that with JSON?

[RavishaHesh]

@zeecorleone when you generate the PDF you can't edit that again because it's just a document which have set of full page images. What you can do is, when you save the blob save json separately with that. Then you can load back that when you want to edit the PDF again

[zeecorleone]

@RavishaHesh seems good suggestion. Thank you

[zeecorleone]

I'm having issue when loading annotations back from json data. Can you see if I'm missing something? What I'm doing is

1. Before closing file, I save it's serialized json by calling serializePdf method of pdfannotate.js var fileJsonData = pdf.serializePdf(); this returns stringified and saves that in fileJsonData like:

2. After that, when I have to load that file again, I use pdf = new PDFAnnotate("pdf-container", . . .

3. Once the plugin has finished loading file, I call loadFromJSON on pdf object. pdf.loadFromJSON(fileJsonData); inside loadFromJSON method, on line 311 as shown in below screenshot, jsonData[index] return only first brace "[" This is because it is jsonData param is string type, as showin in previous screenshot of step 1. Hence then it breaks while processing inside fabricObj.loadFromJSON, because it is trying to JSON.parse("[")

What am I doing wrong? I understand that the issue is that fileJsonData is giving me strigified json, but not the JSON itself. Reason I'm asking this question in details is that before making any change in core implementation of fabric.js and pdfannotate.js I wanted to confirm if I can avoid it by correcting my mistake in first place.

Thanks for support.

@RavishaHesh @chanafdo @abhimanusharma

[RavishaHesh]

Based on your explanation I guess you have tried this with a single page PDF file. This is a bug and I'll fix it ASAP. As a workaround you can wrap the json object before passing into load. Thanks for reporting

[abhimanusharma]

@RavishaHesh I tested this with single page pdf but this is working fine at my end in all cases.

[zeecorleone]

the pdf I'm using is multiple pages. Let me attach for you what I use: pdf.pdf

Secondly, is your JsonData parameter is string type, like mine? and also does it have first character as "["? Can you suggest a correct place/way where I should make change in order to get JSON, instead of JSONString.

[abhimanusharma]

@zeecorleone Before loading the annotation I am converting it from string to json as it is an array of objects converted in a string. this.annotation = JSON.parse(response.data.annotations);

Then,

this.pdf = 
    new PDFAnnotate('pdf-container', this.url, {
        onPageUpdated: (page, oldData, newData) => {
            //console.table(page, oldData, newData);
        },
        ready: function() {
            if(this.annotation) {
                this.loadFromJSON(this.annotation);
            }
        }.bind(this),
        scale: 1.8,
        pageImageCompression: "MEDIUM", // FAST, MEDIUM, SLOW(Helps to control the new PDF file size)
    }
);

Note: I tested this plugin in vuejs2 and vanilla javascript. Working like a charm in both cases.

[zeecorleone]

@abhimanusharma , thanks for nice suggestion. previously I had added that in pdfannotate.js like this:

Now I have moved this check inside ready callback.

Thanks guys. Closing the issue.

[kris08052000]

Hey can you give the code of this PDF editor?

[kris08052000]

@zeecorleone when you generate the PDF you can't edit that again because it's just a document which have set of full page images. What you can do is, when you save the blob save json separately with that. Then you can load back that when you want to edit the PDF again @RavishaHesh Hey i want to upload this as file it self not as images can you tell me how can i do it?