resumake.io icon indicating copy to clipboard operation
resumake.io copied to clipboard

Source code display doesn't work on iOS... or maybe it does, but doesn't signal type to user?

Open paultopia opened this issue 8 years ago • 5 comments

It looks like you're providing binary data of some kind in response to the generate source button. In mobile safari, I get a binary file with a URL like blob:https://latexresu.me/a833e5be-1f05-46b5-b1c6-b445d5ad6082 --- shouldn't it just be a plain text .tex file?

Actually, poking around, I see that the very last commit just set that to application/zip. That wasn't clear to me from the interface---is source code download multiple files? Maybe it would be helpful to send the user a signal that they should be downloading a zip, like give it a filename or something?

paultopia avatar Jun 02 '17 04:06 paultopia

So the PDF and Source buttons are actually supposed to trigger a download of the PDF or Source code. Depending on the template, the source code download will either be a zip containing a .tex (for example, template1) file or a zip containing the .tex file as well as assets needed (for example, template2).

This seems to be more of a Safari issue instead of an iOS issue. I believe that Chrome and Firefox on iOS are actually just wrappers around Safari. In Safari there seems to be issues with the PDF button just opening the PDF instead of downloading it and the Source Code download just seems to fail outright.

I am going to describe the problem in detail in a second comment in case anyone else would also have any suggestions or ideas for solving this.

saadq avatar Jun 02 '17 05:06 saadq

Aaah. You know, that sounds familiar, now that you mention it. I recall reading other sites with safari workarounds for download links. Apparently it doesn't implement the href download attribute or some such. According to caniuse, no version of iOS safari supports, though at least it currently works on OSX Safari. See also notes from filesaver.js... Maybe the best solution might just be to warn users on iOS that they'll have to save the thing that appears as a zip?

paultopia avatar Jun 02 '17 05:06 paultopia

To download the PDF, I'm using an <a> tag with a download attribute which seems to not be supported in Safari.

The problem with downloading the source code I believe is stemming from the fact that I am trying to download the source using the FileSaver API. Looking at the issues for FileSaver, there seems to be several problems with iOS/Safari.

The reason this is tricky is because downloading via AJAX isn't actually natively supported in browsers. The reason I can't rely on native form submission instead of AJAX is because only one section of the form is rendered at any point in time, so I can't depend on native form submission as it won't contain the values of the other form fields you filled out.

How the app currently works

  1. The Preview Resume button is what actually submits the entire form via AJAX and receives the PDF as a response and converts it to a url which is then used to set the PDF display Here is the relevant code for requesting the resume.

  2. When you click the Download PDF button, it just does a download via the download attribute of an <a> tag which is set to the url created by the step above. The line for that is here.

  3. When you click Download Source, it does another AJAX request that takes the same resumeData that was sent the first time when creating the PDF and requests the source code for it. This is the relevant code for that. As mentioned earlier, FileSaver doesn't seem to work great with Safari.

How I might be able to fix this

This is a bit hacky, but when I can possibly do is create a hidden form and fill it with all the input values of resumeData. I can then submit that form using native form submission instead of doing a manual AJAX request which should then trigger a download as expected as long as I set a Content-Disposition header in my server. I would probably just need to add a line like: ctx.attachment('resume.zip') at the end of the source code route handler.

If anyone has any other suggestions, I would really like to hear them. Or if anyone else would like take a crack at it before I do, please let me know if you have ANY questions about the code architecture, I would gladly explain in more detail.

If no one else has anything to offer, I'll probably try to fix this using the method I described above.

saadq avatar Jun 02 '17 05:06 saadq

@paultopia I think I can get it working in iOS/Safari if I try out the plan I mentioned above, otherwise I'll prob end up doing as you suggested.

saadq avatar Jun 02 '17 05:06 saadq

Note to self: this might be a good reference.

saadq avatar Jun 02 '17 07:06 saadq