I'm using Meteor and CollectionFS with S3 to serve both thumbnails and full-size images from the same collection, using different stores. I want to download the full-size image upon a 'dblclick' event.
var src = fileRecord.url({
store: 'images',
download: true
});
var a = $('<a>');
a.attr('href', src); // canvas.toDataURL(viewerImageObject.original.type);
a.attr('download', fileName); // canvas.toDataURL(viewerImageObject.original.type);
a.appendTo(document.body);
a.trigger('click');
Unfortunately, when that event fires, all the items in the frontend collection are removed-- which is rendered with a simple {{#each}} block helper over a cursor returned by a collection.find(). This is not persistent on the backend, only the frontend.
I've filed a CollectionFS ticket for this a week ago, and I've been trying to pick this apart to no avail. I also realize I could use FileSaver.js and a Canvas, but that'd get very frontend heavy on mobile and on large images, especially on polyfilled browsers.
How do I prevent the items in my collection from being removed upon downloading an image?
Solution: add target="_blank" to your anchor tag, this will make your browser opens a new tab for download link and everything will be fine
TLDR
Although I am able to make this worked, I am not sure what is the problem. It looks like that Iron Router will navigate your current tab to the download link you click on(but the url on address bar remains unchanged this makes me wondered), so that all the collections will be gone and your site goes blank
Related
I am facing a big issue for my project where basically nobody coming from Instagram browser cannot register, because after they upload mandatory image IG browser will reload the page (in normal browsers it works fine).
I even tried to simplify it to native html input - still happening. Also tried to put different attributes according to this question: Mobile browser refreshes page after uploading a photo using Camera but without any success.
You can try it on public URL: https://meetymeety-af1lom2yv-smoothweb.vercel.app/Explore
(you need to send it in IG message and open via IG). As you can see the page will always refresh right after image upload.
Any solution for that?
Note: We are using Next.js + React.js, but since these are just simple html inputs not connected to any state or whatever it has no effect on it.
I have this slider, I created a panel so you can upload there the images and modify the order of display, but you can upload the image to the server and the changes do not appear unless you clear cache-
the problem is that the webpage requires live updates, for example if the user deletes an image from the gallery I'm making it refresh but the image is still there (but not in the server or database) so its kind of frustating having to delete the cache, I'm even by jquery making a location.refresh(true) but it doesnt work, I have to f5 two or 3 times to make it dissapear/appear (the image)
You can use AJAX for this.
Have a look at this thread, it might help you. Have a nice day :)
Using AJAX / jQuery to refresh an image
You can change the url to trick the browser.
For example instead of having a url like this :
https://mydomain/myimage.png
you can add a parameter so that the browser see a new url.
https://mydomain/myimage.png?v0.0.1
In this example i used a version tag, and you can change it manual on demand (so that you do keep using cache but in your way). When you change that parameter, the browser will see a new url, so it will load the image again.
You can also use a timestamp instead of a version tag.
Edit (some more info)
Adding the time on the url will "force" the browser to get the image every time.
Example
https://mydomain/myimage.png?date=2017-04-28_10-06-00
Also, in the developing state, you can use on your browser ctrl+F5 to clear the page's cache and reload the page.
Cache is something helpful and you should try to use it, so disabling it completely is not a good solution.
Some relative answers including php solutions can be found here :
PHP force refresh image
I am working on a project using Phonegap, i am creating profile page but the issue is that when user uploads new profile picture, picture successfully uploaded to the server, but it does not show updated picture in the profile, instead it shows the previous image, i know it is using the image from cache that was already there. So how can i avoid using the image from cache, i want new image from the server.
i used following code in ajax call but it is not working.
cache:false,
So I recently implemented a chrome extension to grab images in an active tab and extract them to a popup for downloading. I would like to give users the option to view the popup window (including the extracted images) in a new Chrome tab.
However, since the popup is created dynamically by appending children to the body of my popup.html, I'm not sure how to pass the HTML for my popup to the new chrome tab.
I tried using chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
as found at Open chrome extension in a new tab
but this doesn't seem to be working. Any suggestions?
I'm also developing a Chrome Extension that involves saving down a user's browser data.
Since each time an Extension opens a page (such as popup.html in your case) it opens a new instance of it, the pages and their relevant activity will be independent from each other.
In short you will have to implement some storage. The silver lining is it's pretty simple. Everything you need from manifest to example functions is here:
https://developer.chrome.com/extensions/storage
In your case what I'd imagine you'd want to do is this:
When you pass image urls to your popup page you also save them as items in an array in storage.
Then your pop up page can load in the array as the list to set downloading (or preview depending on use case).
Then either users can delete items from the array, or they are deleted programatically once downloaded.
I can't really be more specific without knowing exactly what your extension is trying to do or how it works, but hopefully that's enough to set you in the right direction.
I have a big problem. I've made a simple Google Chrome plugin (based on the old Youtube Video Downloader) but I have some problems with it. The first problem is that it won't pop up a new save window on click, but opens a new page with the video in the default Chrome player. The second is, that when the user clicks right click-save, they won't get the video name but a standardized name.
Is there any way to make a file save dialog with a specified file save name?
EDIT:
The link is automatically generated based on the Youtube video link, this way:
document.getElementById('watch-description-body').innerHTML+='<button id="download-youtube-video-button" data-button-listener="" data-tooltip-timer="300" class="yt-uix-button yt-uix-tooltip" data-tooltip="Right-click and click Save Link As... to download" type="button">'+'FLV</button>' ;
So basically it ads a button to the existing page, with a specified link:
http://www.youtube.com/get_video?video_id='+video_id+'&t='+t+'=
Where video_id is the Video ID number, and t is the time the player was stopped.
1) To 'force' a download, rather than a page load you will need to deliver a Content-Disposition: attachment HTTP header.
Or you could just use the new HTML5 property download in the anchor tag of your html.
The code will look something like
<a download href="path/to/the/download/file"> Clicking on this link will force download the file</a>
It works on firefox and chrome latest version. It also seems to work IE6+