0

I'm using ilovepdf to compress a pdf file uploaded at the client side. I get the compressed file contents as the response.

Ideally what I want is to -:

  • Make a file(PDF) at the client side with file contents received response.
  • Attach the document to the file upload DOM element.
  • Submit the file to the backend.

But it looks like reading/writing a file with contents at client side(browser) is forbidden. So above could not be acheived. I also tried attaching just compressed file contents to a DOM element and submitting to backend with formdata, however, when i save file with contents received at backend, I find the file as damaged or cannot open.

Below code is triggered for download from ilovepdf server and upload to my server.

function downloadPDF() {
  $.ajax({
    type: 'GET',
    headers: {
      'Authorization': 'Bearer ' + token
    },
    url: "https://" + server + "/v1/download/" + task,
    success: function(response) {
      var form = new FormData();
      form.append("file", response);
      $.ajax({
        type: 'POST',
        url: "/properties/compressed",
        processData: false,
        contentType: false,
        data: form,
        success: function(response) {
          console.log("sent to server")
        }
      });
    }
  });
}

Compressed file response received

wayne
  • 393
  • 2
  • 13
  • 1) Use [JSPDF](https://parall.ax/products/jspdf) 2 & 3) create a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object and [upload the PDF file using AJAX](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload). You will have to use AJAX for this as you cannot attach data to a file input control for security reasons. You could base64 encode the PDF file and send it in a hidden input, but that's ugly and would require you to rebuild the file data when it's received on the server. – Rory McCrossan Apr 15 '20 at 12:56
  • tried using formdata and uploading with ajax, still having a damaged pdf file. – wayne Apr 15 '20 at 13:19
  • Then please show your code so we can help you debug it – Rory McCrossan Apr 15 '20 at 13:20
  • Edited and added code in the question – wayne Apr 15 '20 at 13:34
  • That you for editing. What is `response` in the `form.append("file", response);` line? I presume this is the decompressed output from 'ilovepdf'? If it's the compressed file, then that's the issue. – Rory McCrossan Apr 15 '20 at 13:37
  • I have attached the compressed file contents response received from ilovepdf. – wayne Apr 15 '20 at 13:42
  • That's the issue. The file data is compressed. For it to be readable by a PDF viewer it needs to be in PDF format, ie. not compressed. Whatever option you're using in ilovepdf to compress the file needs to be disabled, or reversed. In simple terms, right now you're effectively trying to open a ZIP file as a PDF (not exactly, but the idea is the same) – Rory McCrossan Apr 15 '20 at 13:43
  • @RoryMcCrossan using base64 encoding will increase the file size by roughly 1/3 which makes the point of compressing the file moot. This is most likely a X&Y question that really should be solved with GZIP compression on the transport layer- – max Apr 15 '20 at 14:01
  • Compressed file means decrease of size from 400kb to 200kb. I don't think if it's gzipping the content because the same api works when connected from a backend server – wayne Apr 15 '20 at 14:03
  • @max Agreed. I only mentioned the base64 method for the sake of completeness. I would never suggest actually doing it that way in any production system – Rory McCrossan Apr 15 '20 at 14:03
  • Sorry GZIP was a red herring. If you are using HTTP/2 the client will actually automatically compress the request and any further steps will unlikely result in any further reduction of file size that's worth the effort. https://stackoverflow.com/a/54797533/544825 – max Apr 15 '20 at 14:08
  • What I don't understand is why the client has to construct the PDF file in the first place? Can't you just send the form/JSON to the server and have your Rails app construct a PDF out of it? Even if it is possible to create a PDF in JS does not mean its a good idea, especially on underpowered mobile devices. – max Apr 15 '20 at 14:14
  • I am not creating PDF at the client side as read/write a file is not possible at client side. I am sending the form to the rails server, server is constructing the PDF file. The file saved by server is either damaged or does not open – wayne Apr 15 '20 at 14:22

1 Answers1

1

You can generate the PDF from your server by using wicked_pdf gem and encode the same in base64 return the base64 encoded string to client server and the on your client server you can use this code for download the PDF :

window.downloadPDF = function downloadPDF() {

    var dlnk = document.getElementById('dwnldLnk');
    dlnk.href = pdf; <this would be your return encoded string in response>

    dlnk.click();


    alert('toma');
}
Divya
  • 39
  • 4