I'm attempting to display both PDF and JPG files that are served from my backend to a new tab inside of the user's web browser. The code below works great for PDF files (opens them in new tabs and has adjustable sizing) but it automatically downloads the JPG files.
I've looked into embedding the images and making them fullscreen in a new tab as well as some react packages but I'm curious to see if there is a better way of doing this
openFile(file) {
var url = url/path/to/backend/request;
window.open(url, this.state.song.Title)
}
How can I force the JPG files to be displayed in a new tab like the PDF files are?
window.open should work fine, if it download the file, please check the response header Content-Type of your url is set correctly, it should be image/jpeg or image/png, etc, which depends on your image format.
You can use curl in terminal or use chrome developer tool to find it. If you use curl, try to run curl -I -X GET "your image url" to find out your response headers. You should get something output like this:
HTTP/2 200
server: nginx/1.12.2
date: Sun, 14 Jul 2019 16:26:25 GMT
content-type: image/svg+xml
content-length: 5501
For one, window.open() is kind of a mean way to do this: it bypasses the normal browser navigation system, so you really want to build an a with target="_blank" instead, which will do the same thing while respecting the user.
(set its style to display:none, remember to add it to the document, then call a.click(), then remove it again)
That said, browsers decide on whether to show or download based on mime-type, so make sure your server responds with the appropriate mime type for the files you want your users to see in-browser rather than download (e.g. don't send images with application/octet-stream)
Related
I have PDFs, images, and text files in S3. I want the ability to create a download link to the file, but only sometimes. Sometimes my users want to view files on the web, but sometimes they want to click a "download" button to grab them in a single step (vs opening them and clicking the disk icon in the PDF viewer or hitting CTRL + S, etc.). For the latter case, I'd like to be able to generate a link that tells S3 what to do. It'd be nice if I could also control the name of the attachment, but I'd be more than happy to just be able to make an attachment.
Footnote
I am aware that you can add such headers to your files ahead of time, but this removes the ability for me to choose "download" or "view online" after the fact.
You can dynamically add headers to response based on the URL, by passing extra parameters response-content-disposition=attachment; filename='mycustomFileName' as described in the s3 Get Obejct docs.
That, however, only works for the authenticated (time limited) URLS, otherwise, user will receive InvalidRequest error similar to the following:
<Error>
<Code>InvalidRequest</Code>
<Message>
Request specific response headers cannot be used for anonymous GET requests.
</Message>
<RequestId>C5066C8E8F647EA2</RequestId>
<HostId>
ik5oj4QfcJX+5+F/PdootFuq47bh6hLpDqhbeyWlw+AADvMPpOPio6eYwXW7Fnx+H/zpVBM7DbA=
</HostId>
</Error>
If you want this to work with a non-authenticated users, download tag might be an option. As it described in this example, you can specify user-friendly filename instead of hash:
<a href="/images/490/736d910771bc3ee2.jpeg" download="some_nice_image_name.jpg">
although that clearly helps scrapers to automatically annotate your content.
I have a mysterious problem. I made an Angularjs app on localhost and it works fine so far. I transferred it to a server and not all images get loaded. Some do. There is no difference at all , they are the same type of .jpg images and sit in the same folder. I am reading pro angular from A. Freeman and that's why I use Deployd for the database work. I am not sure if I may give the website address but that's the best way to show you.
http://h2384839.stratoserver.net:5000/test.html
If you click on "Winkelen" (that's Dutch for shopping) you will see the problem. I tried to debug in Chrome's devtools but it really should work. I can't find the reason why it does not work with the images.
I watched in fiddler.
your image url responce using Content-Type text/html; charset=utf-8
change it to Content-Type image/jpeg.
And check images in server
I have found your problem. Your problem is the extension. Try JPG instead of jpg and you will see the images will load. Extensions are case sensitive so make sure they are set correctly :)
You could rename all the files to have small ".jpg" extension. You could use the Command prompt directly to rename the files for example :
rename shandy.JPG shandy.jpg
I want people to be able to click my link and download my file. But when I link to the file download on my site, it just brings them to the code for the file. I am trying to upload a .cpp file (c plus plus). It's in my downloads folder but when I link to there it displays the .cpp file rather than download it.
Any help is appreciated.
You can set the Content-Disposition header to "attachment" in your HTTP response. If you let me know what server platform, I'll try to give more detail.
You will have to write some code to set the HTTP response header ContentType to "application/x-force-download". This tells the browser what you really want is a file download, instead of the default action (file open). You will also need to set the ContentLength header. This allows the browser to display a progress bar.
If you use ASP.NET, there are some commercial product for this purpose:
http://www.essentialobjects.com/Products/EOWeb/Downloader.aspx
It basically does what stated above with a few extra features.
That's because the browser knows how to read the file - you could ask users on the page to right click on the link and click "Save Target As" rather than just having a link.
Here I have a little intranet page which has some "file://" links on it. These links point to some Windows batch files. However, if I click on these links, I see only the content of this batch file. I would rather get the Firefox dialog where I can choose between open, save and cancel.
Is there a way to do that?
try with:
Content-type: application/octet-stream
Content-Disposition: attachment; filename="myfile.txt"
http://www.w3.org/TR/html4/struct/links.html
it should ask you if you want to run the bat.
If the page page is only for internal usage it will be better to try with HTA application - it will have no restricitions of the browser and you will be able to call the bat with a vbscript.
I have .url files on a server and when I click on them, I see the content of the file instead of having the browser going to the url. As an example, try clicking on this:
http://69.160.61.109/document/116_1.url
The code in the url:
[DEFAULT]
BASEURL=http://www.agriculturemorethanever.ca/
[DOC_gform_ajax_frame_3]
BASEURL=about:blank
ORIGURL=about:blank
[InternetShortcut]
URL=http://www.agriculturemorethanever.ca/
IDList=
IconFile=http://www.agriculturemorethanever.ca/wp-content/uploads/2012/02/favicon1.ico
IconIndex=1
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,2
I tried with IE9 and FF 15. If I download the file on my desktop, it opens properly.
Thanks for your help.
Luc
".url" files are a Windows specific file format and have no meaning when served from the Internet.
If you want to send a visitor to another website you have several options.
URL Rewrite
If you are running apache with mod_rewrite you can add this to your .htaccess file:
RewriteRule path-to-file http://example.com/ [R=301,L]
Other web servers have similar options.
HTTP Header
You can send an HTTP Location header and 301 response code. The example below uses PHP, but any server programming language has similar functionality.
<?php
header("Location: http://example.com/", true, 301);
exit;
?>
Meta Refresh (not recommended for usability reasons)
This will break the back button on some browsers, so use carefully.
<html>
<head>
<meta http-equiv="refresh" content="0;URL='http://example.com/'">
</head>
</html>
Most of the servers these days are hosted in linux. And servers do not fetch the request and they do not direct/redirect unless webbrowsers are told to do so. In your case the .url file is merely nothing than a file containing few texts. This same file works in windows after downloading because .url file are the shortcuts or hyperlink file which is recognized by windows. Thus windows automatically takes you to the website. Please read more about .url file in the link http://www.fmtz.com/formats/url-file-format/article
If you are trying to have similar kind of behaviour such that clicking on .url file on server takes your to the corresponding web-url then you'll have to implement somekind of javascript tricks or use php server side scripts such that clicking on url file trigger request the browsesr to redirect browser to the link contained in the .url file.
Hope this answer your question.