document.click in for-loop only work once? - javascript

I'm trying to download some object in the page from console. But it only save when I=3(last iteration), I think the problem may be the need to wait for downloads, but idk how to solve it.
First, the elements are render by canvas, so I turn them to image format.
Then, turn them into element, and click it to download.
I use the way in How to save a base64 image to user's disk using JavaScript?
But it only work in last iteration... any help? much thanks.
for(let i=1;i<=3;i++){
// load image
item_id = 'page'+i;
document.getElementById(item_id)
let image = document.getElementById(item_id).toDataURL("image/png").replace("image/png", "image/octet-stream");
// download image
var link = document.createElement("a");
document.body.appendChild(link);
link.setAttribute("href", image);
link.setAttribute("download", item_id+'.png');
link.click();
}

Related

DataTransfer an image from same page gives URL but image from different page gives file

EDIT
The source of this problem is the behavior of the Edge browser, as identified by Sami. Firefox does the same thing, but Chrome works fine.
Original Question
I have a drop container for users to drag and drop an image to set an <input type="file"> with the image.
If the image is being dragged and dropped from a different page, the image is recognized as a file. However, if the image is dragged and dropped from the same page with the drop container, it is recognized as a URL.
Why isn't the image being recognized as a file when it is dragged and dropped from the same page as the drop container?
Here is the fiddle with the drop container and image file. When you drag the image file on this page into the drop container, it is recognized as a URL although I want it to be recognized as a file.
https://jsfiddle.net/nadf9c82/1/
Next, try dragging the image on this fiddle https://jsfiddle.net/7sqb5r0f/1/ into the drop container on the other fiddle and you will see it is recognized as a file, which is what I want.
Why do images on the same page as the drop container evaluate as URLs and not files? Is there a fix to make them recognized as files and not URLs?
Here is the code for reference
<div class="dropContainer" id="dropContainer">Drop Here</div>
<div id="imagetwo">
<img src="http://a.mktgcdn.com/p/khxNbcdQcr1HQKNgk9cPNUyWUprmZ5Dryx9P5MAV0SE/2669x3840.jpg" />
</div>
<script>
dropContainer.ondrop = function(evt) {
//evt.preventDefault();
if(evt.dataTransfer.files[0]){
console.log("is a file");
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
fileInput.files = dT.files;
}else{
// Try dataTransfer url second
var dataTransferUrl = evt.dataTransfer.getData('url');
if(dataTransferUrl){
console.log('is a url, not a file');
console.log(dataTransferUrl);
}
}
};
</script>
I think you can do it, but it won't work in Fiddle due to The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource ... the content must be served over HTTPS due to your HTTP request
Here's what I think, whenever you drop the image, it'll receive an URL instead of the file like you want. Then just make it into a file.
It's called convert your URL image to File object, if my way is not working, it's the keyword for you to have a look more, I hope it'll give you some ways to work around since I'm not good at this, too.
Replace this code of mine into your Try dataTransfer URL second part, but be warned that it'll fire an error on Fiddle due to HTTP request. So I've to replace the HTTP with HTTPS, but it'll get you the CORS Block, so if you have the extension to unblock CORS, it'll work, for development or testing purposes, of course.
let url = evt.dataTransfer.getData('url');
const urlArray = Array.from(url)
urlArray.splice(4, 0, 's')
const urlFinal = urlArray.join('')
fetch(urlFinal)
.then(async (res) => {
const contentType = await res.headers.get('Content-Type')
const blob = await response.blob()
const file = new File([blob], "image.jpeg", { contentType })
})
}
When I drop an image to Drop Here box, it'll create an Object File, so it'll count as a file instead of an URL, I think that's what you want, hope I can help you somehow.
Take an URL as an Object File after Dragging Image and Drop it into Drop Here Box

Download Image with URL or Private (ASW S3) URL in Javascript

Normally, Downloading an image with its URL in HTML itself we can do like this
<a href="path-to-image.jpg" download>
<img src="path-to-image.jpg" />
</a>
for the same thing to achieve via javascript we can use like
const a = document.createElement('a')
a.href = 'image-url'
a.download = 'image-name.jpg'
document.body.appendChild(a);
a.click();
document.body.removeChild(a)
Both are working fine for data:image format.
If I click/run, Image will be download in my system for me
But If I use an image URL like 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcThv9yU8CfslQC7f7B5UkZyK-ZNMjdgXsgOxYgh8tdgsqwMBppx&usqp=CAU' or 'https://via.placeholder.com/300/09f/fff.png' are redirect to image page and displaying the image.
It should be download directly instead of displaying as a new tab.
DEMO: https://jsfiddle.net/Danielprabhakaran_N/54v7hfe1/25/
Help me with this guys.
Thanks.
a [download] can no longer download resources from a different origin.
it will work with same origin
Please find this link usefull to download othersite images

Force MP3 file to act as "Save as..." instead of playing in the browser

For a page which contains a list of mp3 files, I need to build a module for each listelement which has two button: a play and a download button. Clicking the play button, an mp3 player appears which plays audio in the browser as a fixed footer. I also need to provide a simple way for the user to download the file. The problem is that even if the audio tag contains a way to download (really download) the file, it does after clicking the more (3 dots) button. This is not what I want. I need to provide a direct download functionality for the download button. I started with the simplest approach:
//jsx
<a
target="_blank"
href={file.source}
download={file.name}
className="download-button"
type="application/octet-stream"
/>
(the last attribute: type is just from an answer I found for the problem, but doesn't make any change)
I've tried everything suggested, but the file still opens a new window and start to play the audio. The download attribute seems no longer working.
The second approach I was thinking of to define an audio tag istead of the a, define it without controls, and with JS, get the download attribute of it (as I saw a way how to split the features and build a custom player). But I haven't found a way to do it as .play() or .pause().
Are there any up-to-date way to force download on an audio file?
Here is a simple snippet to demonstrate using a blob to alter another blob's type.
For this is example I've use some HTML, and then make the blob into a html / text and then binary octect-stream for downloading.
const encoder = new TextEncoder();
const data = encoder.encode('This is <b>bold</b>');
function createLink(name, type) {
const a = document.createElement("a");
a.innerText = name;
document.body.appendChild(a);
document.body.appendChild(document.createElement('br'));
const blob = new Blob([data], {type})
const url = URL.createObjectURL(blob);
a.setAttribute('href', url);
}
createLink('HTML download', 'text/html');
createLink('TEXT download', 'text/plain');
createLink('Binary download', 'application/octet-stream');

Saving and automatically Download Canvas drawing using Javascript or ajax

I have a canvas drawing that I want to save and download automatically when a button is clicked. I will like to implement it in javascript or ajax as long as the saved data will be downloaded automatically. I do not need to save it to the server...
var canvas = document.getElementsByClassName('whiteboard')[0];
<canvas id='canvas' ></canvas>
<button id="scan" />Save</button>
Thanks
I am guessing that you don't need to save at all, just to download your drawing on canvas as image when button is clicked?
There are some good articles on that subject, but here is practical example of what you are trying to do (if my guess is true): Save canvas as image
So basically you add click event listener on your anchor tag with canvas image data uri as href attribute
link.addEventListener('click', function(ev) {
link.href = canvas.toDataURL();
link.download = "mypainting.png";
}, false);

Downloading file instead of opening in javascript

I use a function http://js.cytoscape.org/#cy.jpg to get the graph in jpg format.
I use it with window.location.assign(cy.jpg());, but it opens the image opens in the same tab.
I want it to download instead of opening in the tab. I guess I have to set content-disposition = attachment or something like that.
Edit
I solved it with
const link = document.createElement('a');
link.download = 'filename.png';
link.href = cy.png();
link.click();
however, it is not compatible in all browsers.
You can set <a> element href attribute to result of cy.png(), set download attribute at <a> element, call click() on <a> element.
Alternatively, you can replace MIME type "image/png" portion of data URI returned by cy.png() with "application/octet-stream", then set location.href to replacement data URI
var url = cy.png();
url = url.replace("image/png", "application/octet-stream");
window.location.href = url;
See also How to download a file without using <a> element with download attribute or a server?

Categories