I'm developing a database in Postgresql, accessed via browser (php/javascript) in Firefox/Ubuntu. It runs locally in the client machine, with database also local. Some tables have a "link" column, where the user stores the path to the file for that record (a report, a photo, a map, or even a whole folder). Right now I'm asking the client to copy the resource in Nautilus and paste it in the field of choice. This pastes the full path of the file, which is then stored in the database. So far, so good.
What I want now is to show a thumbnail of the files when the user asks to see what is on that table. I know javascript can't have access to the user disk's contents for security reasons. This site shows how to do something similar in HTML5, but it doesn't seem to have the full path for the file. Somewhere else I've read Flash could do it (somewhere else I read it couldn't), but Flash is not free. Any free technology to make this work? Thanks in advance.
There are several ways of going about this. One option would be for the server to stream the images from the path in the database to the browser, for example if using PHP this would look like:
$size = getimagesize($fname);
// Now that you know the mime type, include it in the header.
header('Content-type: '.$size['mime']);
// Read the image and send it directly to the output.
readfile($fname);
There are equivalent methods in any other server side scripting language.
Specifically, here's a tested sample code that does this. On the server side:
<?php
$param = $_GET["image"];
$fname = "/Users/myuser/images/$param"; // replace with your path
$size = getimagesize($fname);
header('Content-type: '.$size['mime']);
readfile($fname);
?>
On the client side
<html>
<head></head>
<body>
<img src="http://127.0.0.1/img.php?image=test1.png" />
<img src="http://127.0.0.1/img.php?image=test2.png" />
</body>
</html>
Related
I'm currently creating an extension for google chrome which can save all images or links to images on the harddrive.
The problem is I don't know how to save file on disk with JS or with Google Chrome Extension API.
Have you got an idea ?
You can use HTML5 FileSystem features to write to disk using the Download API. That is the only way to download files to disk and it is limited.
You could take a look at NPAPI plugin. Another way to do what you need is simply send a request to an external website via XHR POST and then another GET request to retrieve the file back which will appear as a save file dialog.
For example, for my browser extension My Hangouts I created a utility to download a photo from HTML5 Canvas directly to disk. You can take a look at the code here capture_gallery_downloader.js the code that does that is:
var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');
If you would like the implementation of converting a URI to a Blob in HTML5 here is how I did it:
/**
* Converts the Data Image URI to a Blob.
*
* #param {string} dataURI base64 data image URI.
* #param {string} mimetype the image mimetype.
*/
var dataURIToBlob = function(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var bb = new this.BlobBuilder();
bb.append(uInt8Array.buffer);
return bb.getBlob(mimetype);
};
Then after the user clicks on the download button, it will use the "download" HTML5 File API to download the blob URI into a file.
I had long been wishing to make a chrome extension for myself to batch download images. Yet every time I got frustrated because the only seemingly applicable option is NPAPI, which both chrome and firefox seem to have not desire in supporting any longer.
I suggest those who still wanted to implement 'save-file-on-disk' functionality to have a look at this Stackoverflow post, the comment below this post help me a lot.
Now since chrome 31+, the chrome.downloads API became stable. We can use it to programmatically download file. If the user didn't set the ask me before every download advance option in chrome setting, we can save file without prompting user to confirm!
Here is what I use (at extension's background page):
// remember to add "permissions": ["downloads"] to manifest.json
// this snippet is inside a onMessage() listener function
var imgurl = "https://www.google.com.hk/images/srpr/logo11w.png";
chrome.downloads.download({url:imgurl},function(downloadId){
console.log("download begin, the downId is:" + downloadId);
});
Though it's a pity that chrome still doesn't provide an Event when the download completes.chrome.downloads.download's callback function is called when the download begin successfully (not on completed)
The Official documentation about chrome.downloadsis here.
It's not my original idea about the solution, but I posted here hoping that it may be of some use to someone.
There's no way that I know of to silently save files to the user's drive, which is what it seems like you're hoping to do. I think you can ASK for files to be saved one at a time (prompting the user each time) using something like:
function saveAsMe (filename)
{
document.execCommand('SaveAs',null,filename)
}
If you wanted to only prompt the user once, you could grab all the images silently, zip them up in a bundle, then have the user download that. This might mean doing XmlHttpRequest on all the files, zipping them in Javascript, UPLOADING them to a staging area, and then asking the user if they would like to download the zip file. Sounds absurd, I know.
There are local storage options in the browser, but they are only for the developer's use, within the sandbox, as far as I know. (e.g. Gmail offline caching.) See recent announcements from Google like this one.
Google Webstore
Github
I made an extension that does something like this, if anyone here is still interested.
It uses an XMLHTTPRequest to grab the object, which in this case is presumed to be an image, then makes an ObjectURL to it, a link to that ObjectUrl, and clicks on the imaginary link.
Consider using the HTML5 FileSystem features that make writing to files possible using Javascript.
Looks like reading and writing files from browsers has become possible. Some newer Chromium based browsers can use the "Native File System API". This 2020 blog post shows code examples of reading from and writing to the local file system with JavaScript.
https://blog.merzlabs.com/posts/native-file-system/
This link shows which browsers support the Native File System API.
https://caniuse.com/native-filesystem-api
Since Javascript hitch-hikes to your computer with webpages from just about anywhere, it would be dangerous to give it the ability to write to your disk.
It's not allowed. Are you thinking that the Chrome extension will require user interaction? Otherwise it might fall into the same category.
I want to set up a direct download link using Microsoft IIS. We already have a web page using the IP address that points to a /web folder on our server, but I want to create a separate location on my server where I can put downloadable files such that the client can just type the link and get the download: http://IPADDR/download/filename.zip. Are there any resources on how to do this?
Right now, typing http://IPADDR brings up our simple web page which contains a link that launches an application, again this is bound to the /web folder on our server via IIS.
The FTP port is typically blocked on our client's networks so we have to stick with HTTP. This will be completely programmatic, so no need to have a button or link on a page. I will be using java with a GET command to pull files from the link. I just want to be able to have the web server make these files available to download.
FYI I'm newer to this server stuff so simpler is better! Thank you.
As far as I know, there are two ways to achieve your needs.
The first is using Asp.net application. You need to write code for the downloaded file. For example, when the user clicks a button, the logic method corresponding to the button is triggered, and the response to the client is the file specified in the code.
var fileNameToShow = "xxx.zip";
var fileNameAndPath = "The physical path of the file on the server"
FileInfo file = new FileInfo(fileNameAndPath);
file.Refresh();
if (file.Exists)
{
// Send the file to the browser
Response.Clear();
Response.AddHeader("Content-Disposition",
"attachment; filename= " + fileNameToShow + "; size=" + file.Length.ToString());
Response.TransmitFile(fileNameAndPath);
Response.Flush();
Response.End();
}
else
{
throw new Exception("File does not exist!");
}
The second is to use the FTP function of IIS. You need to create a site and add FTP publishing to the site. When you visit the site through ftp://domian, you can see all the files in the physical directory of the site on the server, and you can download any file by clicking on it.(It also can download through link,such as ftp://domain/filename.zip)
I have an Express/NodeJS app running on Google App Engine, for which I have the URL in the format of:
project-name.appspot.com, where project-name: My google project name
Now, for site verification, I am using HTML File Upload method.
I am serving the html verification file provided by google as follows:
res.sendFile(path.join(__dirname, path_to_html_file))
Now, when I enter the url: https://project-name.appspot.com/, I can view the file.
Also, the file has the same name as provided by Google.
However, when I click Verify in Webmaster, it still fails with error message "File not Found"
Can anyone point what I might be doing incorrectly ?
You need to serve this file from the /xxxxx.html url, not the root url.
In other words, it needs to be accessed from https://project-name.appspot.com/xxxxxxxx.html
Think about it... This file must stay up for as long as you want to be verified, so it doesn't make sense to be shown at the root url.
Also, make sure there are no redirects in serving this file.
I am developing a Web Application using node.js, express and jade. I have the following jade template which I am seeing using a WebView in a Phonegap application:
doctype mobile
html
head
script(src="cordova-2.1.0.js")
script
var ready = function() {
alert(\'Ready\');
}
document.addEventListener("deviceready", ready);
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
h1= title
button(id='vibrateButton', onclick='navigator.notification.vibrate(2000);')Confirm
#services
- each service in services
div.service
a(href=service.link)!= service.name
div.desc= service.description
What this template will produce is a webpage with a list of items (a description and a link) which will be fetched from a mongo database. The page is served using node.js
Now, the cordova script is not loading because the alert ("Ready") is not being displayed. Also, if I hit the button the device won't vibrate and the console will display the following message:
Uncaught TypeError: Cannot call method 'vibrate' of undefined at http://xx.xxx.xx.x:3000/:5
How can I include the Phonegap script using jade? I have tried to load simple scripts with just an alert and it works, but in this case I don't know why it is not working.
Could anyone provide advise please? Thanks.
With recent changes to cordova, you should take a look into InAppBrowser api. That's the recommended way to deal with remote pages embedded in your application.
In the end, you'll probably have a single index.html on the application to make sure the cordova js api is loaded and everything is ok. Then you'll open an InAppBrowser targeting your remote page (remember to whitelist it on config.xml for a better experience!).
The dot after the script is missing. Read this:
"Often you might want large blocks of text within a tag. A good
example is with inline scripts or styles. To do this, just add a .
after the tag (with no preceding space)"
It's taken from the jade-lang reference.
Example:
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
Will render:
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>
these will never work.
the html pages needs to be on the client side( app side ) not in the server side(node).
Example. In a android phonegap proyect on the assets\www folder.
i dont know for wat SO is your app, but
App client side: views, phonegap, jquery .... and all the stuff to request the data to the node server.
Server side: dbStuff, and all the stuff to retrieve the data to the app requests.
hope it helps.
How can I produce a URL which somebody could open and that would immediately download a file e.g. pdf?
I have been using ice:outputResource but that requires the user clicks on a link. Is it possible to do this in JSF?
Thanks,
Dwayne
You want to download a PDF file immediately when one opens a page? Use Javascript to fire the request on the PDF file during page load.
<script>
window.onload = function() {
window.location = 'http://example.com/context/path/to/file.pdf';
}
</script>
Update: your question is actually ambiguous. From other point of view, are you asking how to return a PDF file on a GET request? If so: if it's a static PDF file, then just put the PDF somewhere in the webcontent and link to it. Or if it's to be dynamically generated or served from a database or local disk file system outside the webapp, then create a servlet which does the job. Example here.