I have an object containing an array of slides. Every slide can have a media parameter containing the url to an image or video file or the link to a youtube or vimeo video.
My goal is to have the slides viewer zipped and inside the zip I also must have the image or video files taken from the urls.
To create the zip I'm currently using Archiver and it works fine, but I don't know how to put the media files inside the zip (possibly) without writing them on the filesystem first. I think I have to use streams, since archiver.append() can take a stream as first parameter, but I don't know how to do that.
I have implemented some code to understand if the url points to a file or not, writing the files' url inside an array (avoiding youtube or viemo urls).
This is how the zip is created:
...
var urls_array = ["http://url1/file1.jpg", "http://url2/file2.png"]; //the array of urls I take the media files from
var zip = archiver('zip');
zip.pipe(res);
zip.directory(__dirname + '/../../zip/', 'slideshow');
zip.append( new Buffer( file ), { name: 'slideshow/assets/slides.json' });
zip.finalize();
I suppose I have to cycle the url_array and for each url perform a http.get() call, but I can't understand how to .pipe() the response inside the zip.
Is there anyone who can help me?
Don't hesitate to ask me more information :)
Thank you in advance.
You should use the request method to create a stream from a remote URL to be passed to the append function of archiver, as a first argument, like this:
for ( var slide in slides ) {
archive.append( request( slide.url ), { name: slide.name } );
}
see archiver.append documentation ( https://archiverjs.com/docs/module-plugins_zip-Zip.html#append )
Hope it helps.
Related
Let me explain my use case:
I have a page, where I fetch the image by the url (from remote host) and display it. Also, I have a button on the page. When clicked, the image should be downloaded. I want to download the image without making any other remote calls.
So overall I want to support two things with a single fetch of the image:
Customer should be able to see the rendered image on the page.
Customer should be able to download the image by clicking the button.
Can you help me with how can I do that?
Actually, there is an answer to this:
You said that you would fetch the image:
Code should look something like this, so it is easy to extend.
let imageData
fetch('http://example.com/picture.png')
.then(response => response.blob())
.then(data => {
const urlCreator = window.URL || window.webkitURL;
imageData = urlCreator.createObjectURL(this.data);
document.querySelector("#your-image").src = imageData ;
//add this
document.querySelector("#your-link").href = imageData
//here, make sure your link has a download tag in the HTML or in the javascript
//
});
Demo: https://streamable.com/ize3yh
Did you see window.location.href ? https://www.w3schools.com/js/js_window_location.asp
in my reference project I was taking an image from the back end, making a URL.createObjectURL (img) and assigning a function to a button that simply does window.href.location = Processedimage on on: click. This way you can open the original image in another browser window, but again, I don't know how useful it will be. it is however a possible solution
I'm making a website, in which I want to offer the user to download the whole website (CSS and images included) for them to modify. I know I can download individual resources with
Click Me
but like I said, this only downloads one file, whereas I would like to download the entire website.
If it helps you visualise what I mean: in chrome, IE and Firefox you can press ctrl+s to download the entire website (make sure you save it as Web page, Complete.
Edit: I know I can create a .zip file that it will download, however doing so requires me to update it every time I make a change, which is something I'd rather not do, as I could potentially be making a lot of changes.
As I mention, it is better that you will have a cron job or something like this that once in a while will create you a zip file of all the desired static content.
If you insist doing it in javascript at the client side have a look at JSZip .
You still have to find a way to get the list of static files of the server to save.
For instance, you can create a txt file with each line is a link to a webpage static file.
you will have to iterate over this file and use $.get to get it's content.
something like this:
// Get list of files to save (either by GET request or hardcoded)
filesList = ["f1.json /echo/jsonp?name=1", "inner/f2.json /echo/jsonp?name=2"];
function createZip() {
zip = new JSZip();
// make bunch of requests to get files content
var requests = [];
// for scoping the fileName
_then = (fname) => data => ({ fileName: fname, data });
for (var file of filesList) {
[fileName, fileUrl] = file.split(" ");
requests.push($.get(fileUrl).then(_then(fileName)));
}
// When all finished
$.when(...requests).then(function () {
// Add each result to the zip
for (var arg of arguments) {
zip.file(arg.fileName, JSON.stringify(arg.data));
}
// Save
zip.generateAsync({ type: "blob" })
.then(function (blob) {
saveAs(blob, "site.zip");
});
});
}
$("#saver").click(() => {
createZip();
});
JSFiddle
Personally, I don't like this approach. But do as you prefer.
Here's the thing, I generate a PNG image in the application and I get an Image object with JavaScript, something like this...
var img = new Image();
img.src = 'data:image/png;base64,' + base64Img;
I want to save that image to the internal storage. Is there a plugin or a way I can do this?
According THIS QUESTION:
This is file download code which can be used by anyone. You just have three parameters to use this like-
1) URL
2) Folder name which you want to create in your Sdcard
3) File name (You can give any name to file)
All types of file can download by using this code. you can use this as .js
And this works on IOS also.
First step check parameters mismatch and checking network connection if available call download function
Second step to get Write permission and Folder Creation
Third step for download a file into created folder
Also check this link
function onPhotoDataSuccess1(imageData) {
alert(imageData);
sessionStorage.setItem("img_api",imageData);
$('#largeImage').attr('src','data:image/jpeg;base64,' + imageData);
}
Hope, it will helps you!
I'm trying to get a full URL using getData() after a drop event of an image:
function drop(e) {
e.stopPropagation();
e.preventDefault();
var url = e.dataTransfer.getData("url") || e.dataTransfer.getData("text/uri-list");
alert(url);
...
}
When I drop my image and capture the event my url = "http://localhost" and does not include the full url to the image. What is the correct way to capture the full url from a dropped image?
Thanks for your time.
As of this writing there is no way to get the full path of an uploaded file. The File API does not provide the full path name. This is what the specification says
The name of the file; on getting, this must return the name of the file as a string. There are numerous file name variations on different systems; this is merely the name of the file, without path information.
So there is no way you can get it as of now. This is done for security concerns.
Hope that helps :)
I have some text data (say var a = 'Hello World From Javascript';)in javascript variable in current window. I want to do the following
through javascript-
1. open a new window and write the text data to the window.
2. set the content type to text/plain.
3. set the content-disposition to attachment, so that download prompt comes.
4. user downloads the text data as a text file and saves it to his local disk.
is this all possible through javascript?
I know we can make ajax calls to server or redirect but in this case instead of following above steps. But in this case, these workarounds are not adaptable.
you can do that using JS & HTML5 features. Please find below a sample code.
var fileParts = ['Hello World From Javascript'];
// Create a blob object.
var bb = new Blob(fileParts,{type : 'text/plain'});
// Create a blob url for this.
var dnlnk = window.URL.createObjectURL(bb);
var currentLnk = $('#blobFl').attr('href');
// blobFl is the id of the anchor tag through which the download will be triggered.
$('#blobFl').attr('href',dnlnk);
$('#blobFl').attr('download','helloworld.txt');
// For some reason trigger from jquery dint work for me.
document.getElementById('blobFl').click();
Triggering a file download without any server request
Unfortunately this is not something you can do with normal browser capabilities. Something like flash or a browser-specific plugin will get you what you need, but security limitations within javascript will not let you download arbitrary data created within the browser.
Also the 'data' url is not supported across all browser/version combinations. I am not sure if your users are constrained on what browser they are using or not but that may limit what you can do with that solution.
Source: Triggering a file download without any server request
If you already have the file on the server (I make an ajax call to generate and save a PDF on the server) - you can do this
window.location.replace(fileUrl);
No, Content-Disposition is a response header, it has to come from the server. I think you could do it with Flash but I wouldn't recommend it.
Here's a clean, pure js version of #Rajagopalan Srinivasan's answer:
var fileParts = ["Hello World From Javascript"];
// The anchor tag to use.
const blobLink = document.getElementById("blobLink");
// Create a blob object.
var blob = new Blob(fileParts, { type: "text/plain" });
// Create a blob url for this.
var blobUrl = window.URL.createObjectURL(blob);
blobLink.setAttribute("href", blobUrl);
blobLink.setAttribute("download", "helloworld.txt");
blobLink.click();
<a id="blobLink">Download</a>