Hiding a PDF in html for download on link click - javascript

I am facing a situation in my application where i need to add a pdf download link on to my page, but i cannot refer to any relative or absolute path for the file, I need to host my pdf inside the html only.
Is there any way to do this, using basic HTML and JavaScript?
Details summary of situation is as below :
there is an application which owned by someone else, i am customizing if for a particular client.
we are given a provision to place some html(s) in a directory which are used in a few pages in the application.
these htmls are not used with href or include in the product application, but are picked up by the product's java code and are added in the response, thus keeping a PDF in the same folder as my HTML and providing relative URL wont work here.. and putting absolute URL is also not a solution as this needs to work across multiple environments.

You can always use data URI links:
download PDF!
Possibly together with the download attribute:
...
E.g. http://jsbin.com/gutahugoci/ (PDF is from here).
To encode in base64 use base64 -w0 my_file.pdf > my_file.pdf.b64
Disclaimer: Please notice that I said "you can use", not "you should use. This should only be a last resort thing to do for PDFs, because the HTML file will become exceedingly big and your client might ask if your are kidding them.

why don't you encode the url
/download_pdf.php?id=r4yhr4hrb4rd54hddb4
Where r4yhr4hrb4rd54hddb4 is and encoded id?

Related

Javascript - read all filenames and output to html with hyperlink

I have a limited hosting server. I want to read the filetree (all files and folders) and create a hyperlink to them on a basic html page.
For clarity, I'm using Keybase, am publicly sharing files, but want to list them on an index.html page, not use their site's "filetree"
https://keybase.pub/example_user (keybase filetree)
https://example_user.keybase.pub (the index.html file)
The html file is in the root directory and I want to display all the (pdf) files in /subdir (and their sub-directories)
This isn't a "real" webserver. I'm looking for something easy and simple like a FOR loop on load within html
Thanks.
What you are trying to do is known as "screen scraping". If you do some googling on the keywords "javascript screen scraping" you will find lots of information and examples.
Basically, You fire off an AJAX request to retrieve the content of a page, parse that content to obtain the data your looking for, and then display that data in your page.

How Can I make my browser show files (images) that a server is sending me with download prompt?

The only solution I've found it to grab the link with getElementsByClassName then inject it into an html snippet on the page, but it looks so fake, and is also unnecessary (I don't want all the links)
I want to right click the link (one at a time) and show it to the next tab. If I right click the link the server sends me a download prompt. How can I evade this?
I think the browser decides to download a file or display it based on its MIME type.
If the server is under your control, you should make sure you supply the correct Content-Type HTTP header (e.g. you have to call a library function in PHP, and there should be a similar way to do that in other languages).
Otherwise, for a purely client-side solution in JavaScript, you can fetch the file with an XMLHttpRequest (most JavaScript toolkits have wrappers around it). Then, you can convert it to base 64, prefix the result data:image/png;base64,, and use it as the src attribute of an img element (thanks https://stackoverflow.com/a/21508186/324969).
Note that for security aspects, grabbing arbitrary files and stuffing them in a data: URL might not be safe. I don't know if any cross-site scripting or CORS attacks could be built upon this. You'll have to ask a separate question to know if the client-side solution is unsafe. For the server-side, be careful not to set the wrong content-type for user-uploaded data, or for endpoints of your service (e.g. letting the client-side send you in the request the Content-Type that it would like, as tempting as it looks, is a big no-no).
To open the image in a new tab, you can use window.open as usual, but download the image beforehand (using XMLHttpRequest) and put the data:image/png;base64,… as the URL of the new tab.
Since you can already see the images by placing their URL in an img tag, you can paint that img on a , extract a PNG from the canvas, craft a data:image/png;base64,… URL from that, and then either automatically open many tabs with these URLS, or write in your page a series of links to data: URLs.
You could also have a link to a tiny web page with just the img tag that you currently use: link text.

How to link javascript in html

I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...

Upload/download/save image to a local server from a remote server using an Image URL and PHP?

I am building a Discussion Forum as part of a bigger application I am building, the forum is just 1 section of the Application.
For my TextArea fields when posting a new Topic or a Post Reply, I have decided that nothing is as good as the PageDown Markdown Library. It is the same one that StackOverflow uses on all their sites and it works better than many of it's competitors.
The way the library ships though, I am not happy with the default Insert Image functionality. You hit the button to insert an image and it allows you to enter a URL for an Image and then it inserts the proper MarkDown syntax to show the linked image.
This just won't cut it. I need the functionality that you see on StackOverflow! Very similar anyways.
I need it to show a Dialog when you click the Insert Image button, like it does now, but instead of just an input field for a Image URL, it will have 2 filed options...
Upload image from your computer
Insert an Image URL and it will then DOWNLOAD the image from that URL and insert it into the post just as if you had uploaded it from your computer. This is important to not confuse this step. IT should not simply insert the Image linking it to the original Image URL. Instead it will take that URL and download/upload the Image to the same server that the upload from computer option does and then it will insert the NEW Image URL pointing to the newly uploaded image!
Based on some simple HTML like below for a Dialog window with a filed for my Upload from Computer functionality, which I already have working. I need to come up with some JavaScript and PHP that will download/save a remote image to my upload folder on my server when a button is clicked using only the URL that will be inside the URL text input field.
So it will need to do a few things...
Fetch and save an image file to my uploads folder using PHP when the only thing that the PHP function will receive is a URL of the image which could be on the same server or most likely a remote server.
After successfully saving/uploading an image from the URL, the PHP function will return a JSON string with the status/error and if successful then it will also return the actual URL and filename of where the new image is saved on the local server. The JavaScript/AJAX script will receive this JSON response and insert the Markdown syntax for the image into the PageDown editor.
The PHP function will need to ensure that the URL that it is trying to save/download is a valid image file and not some malicious file! Also not simply just some file of the wrong filetype like a non-image file unless we are allowing the file type.
It will be part of a module installed on many dinosaur servers so it needs to work on as many servers as possible too!
From the web
From your computer
I would be greatful of any help, tips, code snippets or anything to help with this. At this stage I really just need to build a nie PHP function that will upload images from a remote URL and also ensure that the URL passed in is a real image file or even better that it is in the allowed file types array!
A couple years ago I had started this but have now lost it and I am starting over and don't remeber much about how I went about doing it then.
The easiest way to download a file from a remote server would be to use copy (http://php.net/manual/en/function.copy.php):
copy('http://someurl.com/image.png', '/var/www/uploads/image.png');
As this function returns a bool, it is easy to determine whether the operation was successful and create a JSON response.
To verify that the file is an actual image, there is unfortunately no way that is 100% sure. It is probably enough to check the mimetype though. You can use finfo for that (http://php.net/manual/en/function.finfo-file.php):
$finfo = finfo_open(FILEINFO_MIME_TYPE);
echo finfo_file($finfo, $filename);
finfo_close($finfo);
For a gif, this would return image/gif for example. You will have to hardcode a list of all mimetypes you want to allow.

Load image for HTML img element from JSON property while URL not directly accessible

OK, this one is rather complicated to explain, which explains the verbose title:
In my Objective C application I generate a JSON string to hold all of my properties for the objects I need to draw in the ARchitect browser of the wikitude SDK (as far as I know the Wikitude SDK only handles JSON) via:
NSString *javaScript = [self convertPoiModelToJson:self.poiData.pois];
NSString *javaScriptToCall = [NSString stringWithFormat:#"newData('%#')", javaScript];
One particular object I am interested in is stored as a string in that JSON string, it's the URL to an image. However, this image is behind a password protected area on our webserver and the app handles the authentication.
The problems start when I am in the ARchitect Browser, which is basically a .html file with calls to specific wikitude javascript functions to build the augmented reality world and show it in a UIWebView in the app. I want to show that image when a POI in the augmented view is clicked in the footer popup which is a basic html div container. So now I have a URL to an image resource on the webserver, which I cannot directly access with
document.getElementById("thumb").src = jsonObject.thumbUrl;
because of the authentication needed and the only way I was successful to load that image was via the var poiImage = new AR.ImageResource(jsonObject[i].iconURL, {onError: errorLoadingImage}); method but then I can only display it in the augmented view but not in the footer.
I tried it with providing a static string from some other image in the web or to local resources to the img element in the footer section in the view without problems like that: document.getElementById("thumb").src="marker.png"; and it works fine, also the image is correctly loaded in the augmented view.
I have read about encoding the image (which I can access and download in the objective c part of the app) in base64 and storing that string in an additional JSON property to load it into the src property of the html img element with a <img src="data:image/png;base64,BASE&$_ENCODED_DATA"></img> but this seems like a really dirty and overly impractical workaround/hack for what I try to accomplish. Also I don't know if it's a better idea to start reading about how to implement the authentication to access that image in the protected area of the webserver or rather begin implementing the ugly base64 encoding or continue searching for alternatives.
I'm not asking for a solution but rather for suggestions what possibilities I have left to access that image. Since I ran out of ideas, any help is appreciated.
Thank you!
Short summary:
image accessible and downloaded in objective c part
image is accessible with the AR.ImageResource method of the wikitude SDK (but not needed)
image cannot be accessed directly via the url from javascript because authentication is needed
(I hope my question is comprehensible, feel free to ask If something is unclear, especially since English is not my first language and it would be even complicated to explain that in German..)
Have you tried downloading the image in Objective-C / Cocoa, store it locally on your iOS device and pass the local path of the image via JSON into your Architect World?
You can then load the local image with your AR.ImageResouce and your div container.
Ok, let's think a bit about this, as it seems like a good mess.
If I'm understanding well your problem, all is about your javascript code needing to reach a url where an image is located, being unable to do so because that place requires some sort of validation to access.
In this scenario I'd look for moving images to a place out of the restricted site. Maybe trying to save them from the objective-C part into one public place that's reachable by javascript. This may be tricky as the I/O operation could slow your code execution... Of course you'll always have the option to move those images just outside of the restricted area but I supose that's not feasible as you could suposed that solution by yourself.
Other way... if your environment configuration allows it (I fear there isn't enough info about it on the question) is to try to execute your javascript part (I wonder if it's enclosed into a webpage executed from a webserver) with a user with permissions into the restricted area. This, of course, could be totally a no-no depending on what your javascript part does and why your restricted area is protected by validation.
If you don't want to move out the files, copy them temporarily gives performance problems and errors, and user impersonation through the javascript executing user is not an option I fear your unique alternative is to efectively try to pass a binary stream of data with the image through the JSON string... dirty...
Looks like wikitude maintains 2 browser contexts: the host browser that loaded your HTML and an embedded browser-like object (or iframe or proxy server) represented by the UIWebView instance.
Only one of those (not clear which from your discussion) has the user/pass for access to your image. You will need to call something to repeat the authentication step or transfer credentials to the other context.

Categories

Resources