I currently submit a form on to an invisible iframe. The action file creates a CSV which is automatically downloaded. Is it possible to have multiple files downloaded when the form is submitted?
I don't think that it is possible to do without having a custom download manager on the client side. You could technically insert them into the response stream to the client, but they wouldn't understand how to handle it.
I have always just created a zip file with all the files in it and sent that to the client. Wouldn't work if you are trying to display them in the browser or something like that, but I don't know what your goal is on the client so I thought that it might work for you.
Yes, the following code does what you want, with some modification. Note, very much not my code and it requires javascript be enabled.
function makeFrame( url )
{
ifrm = document.createElement( "IFRAME" );
ifrm.setAttribute( "style", "display:none;" ) ;
ifrm.setAttribute( "src", url ) ;
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
document.body.appendChild( ifrm ) ;
}
function downloadFiles( )
{
makeFrame('urlof/file1.csv');
makeFrame('urlof/file2.csv);
}
No, that is not possible. Each response can only contain one file. You need one request for each file that you want to download.
Related
My page generates a URL like this: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f" How can I convert it to a normal address?
I'm using it as an <img>'s src attribute.
A URL that was created from a JavaScript Blob can not be converted to a "normal" URL.
A blob: URL does not refer to data the exists on the server, it refers to data that your browser currently has in memory, for the current page. It will not be available on other pages, it will not be available in other browsers, and it will not be available from other computers.
Therefore it does not make sense, in general, to convert a Blob URL to a "normal" URL. If you wanted an ordinary URL, you would have to send the data from the browser to a server and have the server make it available like an ordinary file.
It is possible convert a blob: URL into a data: URL, at least in Chrome. You can use an AJAX request to "fetch" the data from the blob: URL (even though it's really just pulling it out of your browser's memory, not making an HTTP request).
Here's an example:
var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);
var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';
xhr.onload = function() {
var recoveredBlob = xhr.response;
var reader = new FileReader;
reader.onload = function() {
var blobAsDataUrl = reader.result;
window.location = blobAsDataUrl;
};
reader.readAsDataURL(recoveredBlob);
};
xhr.open('GET', blobUrl);
xhr.send();
data: URLs are probably not what you mean by "normal" and can be problematically large. However they do work like normal URLs in that they can be shared; they're not specific to the current browser or session.
another way to create a data url from blob url may be using canvas.
var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
context.drawImage(img, 0, 0) // i assume that img.src is your blob url
var dataurl = canvas.toDataURL("your prefer type", your prefer quality)
as what i saw in mdn, canvas.toDataURL is supported well by browsers. (except ie<9, always ie<9)
For those who came here looking for a way to download a blob url video / audio, this answer worked for me. In short, you would need to find an *.m3u8 file on the desired web page through Chrome -> Network tab and paste it into a VLC player.
Another guide shows you how to save a stream with the VLC Player.
UPDATE:
An alternative way of downloading the videos from a blob url is by using the mass downloader and joining the files together.
Download Videos Part
Open network tab in chrome dev tools
Reload the webpage
Filter .m3u8 files
Look through all filtered files and find the playlist of the '.ts' files. It should look something like this:
You need to extract those links somehow. Either download and edit the file manually OR use any other method you like. As you can see, those links are very similar, the only thing that differs is the serial number of the video: 's-0-v1-a1.ts', 's-1-v1-a1.ts' etc.
https://some-website.net/del/8cf.m3u8/s-0-v1-a1.ts
https://some-website.net/del/8cf.m3u8/s-1-v1-a1.ts
https://some-website.net/del/8cf.m3u8/s-2-v1-a1.ts
and so on up to the last link in the .m3u8 playlist file. These .ts files are actually your video. You need to download all of them.
For bulk downloading I prefer using the Simple Mass Downloader extension for Chrome (https://chrome.google.com/webstore/detail/simple-mass-downloader/abdkkegmcbiomijcbdaodaflgehfffed)
If you opt in for the Simple Mass Downloader, you need to:
a. Select a Pattern URL
b. Enter your link in the address field with only one modification: that part of the link that is changing for each next video needs to be replaced with the pattern in square brackets [0:400] where 0 is the first file name and 400 is the last one. So your link should look something like this https://some-website.net/del/8cf.m3u8/s-[0:400]-v1-a1.ts.
Afterwards hit the Import button to add these links into the Download List of Mass Downloader.
c. The next action may ask you for the destination folder for EACH video you download. So it is highly recommended to specify the default download folder in Chrome Settings and disable the Select Destination option in Chrome Settings as well. This will save you a lot of time! Additionally you may want you specify the folder where these files will go to:
c1. Click on Select All checkbox to select all files from the Download List.
c2. Click on the Download button in the bottom right corner of the SMD extension window. It will take you to next tab to start downloading
c3. Hit Start selected. This will download all vids automatically into the download folder.
That is it! Simply wait till all files are downloaded and you can watch them via the VLC Player or any other player that supports the .ts format. However, if you want to have one video instead of those you have downloaded, you need to join all these mini-videos together
Joining Videos Part
Since I am working on Mac, I am not aware of how you would do this on Windows. If you are the Windows user and you want to merge the videos, feel free to google for the windows solution. The next steps are applicable for Mac only.
Open Terminal in the folder you want the new video to be saved in
Type: cat and hit space
Open the folder where you downloaded your .ts video. Select all .ts videos that you want to join (use your mouse or cmd+A)
Drag and drop them into the terminal
Hit space
Hit >
Hit Space
Type the name of the new video, e.g. my_new_video.ts. Please note that the format has to be the same as in the original videos, otherwise it will take long time to convert and even may fail!
Hit Enter. Wait for the terminal to finish the joining process and enjoy watching your video!
Found this answer here and wanted to reference it as it appear much cleaner than the accepted answer:
function blobToDataURL(blob, callback) {
var fileReader = new FileReader();
fileReader.onload = function(e) {callback(e.target.result);}
fileReader.readAsDataURL(blob);
}
I'm very late to the party.
If you want to download the content you can simply use fetch now
fetch(blobURL)
.then(res => res.blob())
.then(blob => /*do what you want with the blob here*/)
Here the solution:
let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
let videoURL = window.URL.createObjectURL(blob);
const blobF = await fetch(videoURL).then(res => res.blob())
As the previous answer have said, there is no way to decode it back to url, even when you try to see it from the chrome devtools panel, the url may be still encoded as blob.
However, it's possible to get the data, another way to obtain the data is to put it into an anchor and directly download it.
<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>
Insert this to the page containing blob url and click the button, you get the content.
Another way is to intercept the ajax call via a proxy server, then you could view the true image url.
Is there any way to load the values of .txt file or .doc file and insert them at an html form as possible values? For example i have rooms 1-10 written at a txt file, and a form that i will need to scroll and check anyone of that rooms. Thanks
In the past I did the following: one iFrame loads the txt file, with the visibility: hidden;position: absolute style. Its onLoad event triggers a Javascript function which can parse it. I usually use this reading function:
iframeObj = document.getElementById('put here the iFrame ID')
if (iframeObj != null)
{
if (iframeObj.contentDocument)
{
txtfilecontent=iframeObj.contentDocument.getElementsByTagName("BODY")[0].innerHTML;
}
else if (iframeObj.contentWindow)
{
txtfilecontent=iframeObj.contentWindow.document.body.innerHTML;
}
// Here you can use the txtfilecontent, which is a string
}
Usually I trigger a reload of the txt file in the end, but if you have to fill a form it is not recommended.
If you want to do that before loading the page, however, you should use a server side code, such as PHP and its file_get_contents function. The advantage of this approach is that you won't need to expose the txt file to the user, but it can stay hidden on the server.
I know how to setup a href and a download attribute on an anchor to allow a user to download data as a file.
However, a client has requested that one link download two files together AND not be zipped! Don't ask me why!
Looking online I found the following solutions:
1) create 2 iframes on the fly and in each's form set its GET to the location of one of the files on the server, then run a form submit...here
2) A variation of (1) using a JQuery plugin..here
3) Opening popup windows. (not worth the link)
I'm wondering if I can handle this on the JS side? In the same App, I'm exporting data to CSV with the following code:
$elm.attr('href', 'data:text/csv;charset=utf8,' + encodeURIComponent(_str)).attr('download', fileName);
Where _str is a flattened two dimensional array.
Can I somehow trail or attach a second file to that?
You can create links on the fly and fire navite click event.
function downloadAll(files){
if(files.length == 0) return;
file = files.pop();
var theAnchor = $('<a />')
.attr('href', file[1])
.attr('download',file[0]);
theAnchor[0].click();
theAnchor.remove();
downloadAll(files);
}
$('a.download-csv').on('click', function(){
downloadAll([
['file1.csv', 'data:text/csv;charset=utf8,'+
encodeURIComponent('my,csv,file\and,so,on')],
['file2.csv', 'data:text/csv;charset=utf8,'+
encodeURIComponent('my,csv,file\and,so,on')],
['file3.csv', 'data:text/csv;charset=utf8,'+
encodeURIComponent('my,csv,file\and,so,on')]
]);
});
Here you can find the fiddle with a working demo.
Here is the article on my web site with all the details
The frameworks i'm using are AngularJS(client-side) and Sitebricks(server-side).
I want to return a list of objects into json and make the client download that json by prompting the user where he wants to save the file.
I accept all kind of propositions.
Cheers in advance.
It sounds like you want to create the file in the browser, and save it to the user's local machine. One method is presented here, but it doesn't work in IE Javascript: Create and save file
Here's a fiddle: http://jsfiddle.net/vUdyD/
$(function() {
function exportToCsv() {
var myCsv = "Col1,Col2,Col3\nval1,val2,val3";
window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
}
var button = document.getElementById('b');
button.addEventListener('click', exportToCsv);
});
You could use the HTML5 download attribute. It is not perfect and browser support
<!-- will download as "expenses.pdf" -->
Download Your Expense Report
Demo: http://davidwalsh.name/download-attribute
Support: http://caniuse.com/#feat=download
Is there a way to have a button/link and when you click on it, it will take the current page location and download an HTML version of it? It will be an iframe too, and the link should just download the iframe's content. Thanks!
The following JavaScript will take the current document and provide it as a download link. Tested in Chrome, not sure about others. Keep in mind that IE has limits for DataURI size. Furthermore, you'll lose your external images/CSS/etc, unless you inject the base tag into the top of the head tag (or find some other way to roll in resources):
// create the link to trigger download
// you could alternatively fetch an existing tag and update it
var a = document.createElement('a');
// send as type application/octet-stream to force download, not in browser
a.href =
"data:application/octet-stream;base64," +
btoa("<html>"+ document.getElementsByTagName('html')[0].outerHTML +
"</html>");
a.innerText = "Download this page";
// put the link wherever you want
document.body.appendChild(a);
EDIT: also doesn't provide a filename, or a .htm at the end of the download link... hmph. Those things can only really be provided by the Content-Disposition header, and that requires sending a request off to the server, so... not a fantastic user experience, but the easiest way to get the exact page state as the user sees it.
All you need is a simple script that takes the file name as a param and generates a zip. Here is an example in PHP.