I'm creating a webapp on which I load and display images.
I want to have a feature on which the user can save the images they loaded so they can reload them on future sessions without having to manually set up everything again.
For doing this I have thought of storing the url from the files, but it looks like I can't access the url of files because of security on most browsers. Is there anything I can do to save the url of the files, or something similar so I can reload the files on future sessions?
It will ideally allow to store many files, so saving the local paths to the images is best so it doesn't consume much space.
For the app I'm using angular and tauri.
Anyone can help? Thanks a lot in advance!
EDIT: I found out there is a way to do this on tauri with the dialog module you can find here: https://tauri.studio/api/js/modules/dialog more info here:https://github.com/tauri-apps/wry/issues/87
If anyone reads this and is using electron instead of tauri I've read that the File Object gets added a path property, so you can get it from there.
Thanks everyone for the help!
For storing user-downloaded images, you need a backend. If you don't want to run one, you can try to store images as data: urls in cookies or local storage, but it won't work well.
I recently did one functionality for download file and sharing the code here
downloadFile(data, fileName) {
const urlBlob = window.URL.createObjectURL(data);
const link = document.createElement('a');
link.href = urlBlob;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Data stands for your file path or file URL and
fileName stands for File save with name as
you want
Found the answer!
I found out there is a way to do this on tauri with the dialog module you can find here: https://tauri.studio/api/js/modules/dialog more info here:https://github.com/tauri-apps/wry/issues/87
If anyone reads this and is using electron instead of tauri I've read that the File Object gets added a path property, so you can get it from there.
You can use cookies to store data. Users can block or remove cookies, but most users (as most users use Chrome) have cookies enabled by default.
You can store a cookie by doing
document.imageurl = "http://example.com";
and access it using
console.log(document.imageurl);
or something similar (variable is stored at document.imageurl)
The variable will stay there when the page is reloaded.
Related
To summarize the problem, users are uploading lots of PDF files to a storage bucket. After upload, the users have a button they can press that gets the download URL of the file they have selected and opens it in a new window.
const storageRef = Storage.ref(`Inbound_Forms/${selectedInbound.id}/${row.FileName}`);
storageRef.getDownloadURL().then(url => {
window.open(url, '__blank');
});
The opening of the URL works about 95% of the time, but every once in a while when the user clicks the button to open the URL, this error gets thrown:
This would lead me to believe that the file does not exist, but when I open up the bucket in the Firebase console, the file exists, and I can get download it via it's link in the console:
The path included: /Inbound_Forms/5eE2Oytwrpc7FTkmH4gy
The solution for the time being is to have the users send me an email with a link to the page where the file is. I then track the original down in the bucket, download the file, and upload the exact same file with suffixed with 'copy', as seen in the image above. The new file works without issue, where the original continues throwing the same error. I just inform the user a copy has been uploaded, and they access it and continue on with their work.
There have been a few solutions I have looked into, but those worth mentioning are:
1) The file names have spaces. This does not seem to cause an issue, as even the copy I upload works without problems. And as stated before, this process works 95% of the time, many cases with spaces in the file name.
2) Storage rules. The same user has been able to open many other files with the same rules, including the newly uploaded copy.
Currently, I am unable to recreate this bug, as it happens so rarely. I thank anyone in advanced for and leads on what is going on here.
I am building an HTML5 phonegap application. This app exports data so that the user can backup and restore any time. I'm doing this exporting with the following javascript code:
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.data, null, "\t"));
var dlAnchorElem = document.createElement('a');
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "data.json");
document.body.appendChild(dlAnchorElem);
dlAnchorElem.click();
This generates an anchor tag with an encoded file and clicks so it downloads. Works great on browser, but does nothing in a compiled Cordova application.
After doing some research, I found that the default solution would be to use a download plugin for Cordova, specifically this one: https://github.com/apache/cordova-plugin-file-transfer
I read the documentation, but it does not seem to take an encoded file as parameter, but an encoded URL for download. Also, it takes the save path on the phone, which I prefer would just default to the download folder.
My question is: What is the best way to achieve this, considering I'm dynamically generating the JSON backup file. Is there perhaps an AndroidManifest directive that allows for file downloads?
After some research and trying many different hacks, I came to the conclusion that it's currently not allowed natively with cordova or with the available plugins. My solution was to, instead of writing to the filesystem, use the web share api to let the user export the way he finds best (including file, if he chooses dropbox, onedrive or google drive).
This question already has answers here:
Can I set the filename of a PDF object displayed in Chrome?
(4 answers)
Closed 1 year ago.
I am generating a PDF in the browser using PDFKit (without node) and displaying it an iframe or an embed tag via the src attribute. The generated blob URL is some kind of UUID. So the overall page looks like:
<embed src="blob:http://localhost/eeaabb..."/>
The PDF appears fine, but when I click the Download link in Chrome, the default file name is the UUID. In FireFox, it is just "document.pdf".
If this were a server-generated PDF I would use Content-Disposition and/or manipulate the URL so the last part of it is the name I want, but that doesn't seem possible with a client-generated object.
Things I have tried:
Setting the PDF title via the metadata. This works but doesn't affect the filename.
Manipulating the embed tag title attribute. Doesn't seem to do anything.
Change the page title. Doesn't affect the file.
Try to append something to the data url. Just prevents the PDF from displaying.
Upload the PDF via POST, then download it via a page where I can control the URL. Could work, but seems crazy to generate a client-side PDF only to have to upload it to the server.
Is there any way around this so that I can control the default/suggested file name?
Note:
This answer is outdated.
The behavior described below did change since it was posted, and it may still change in the future.
Since this question has been asked elsewhere, with better responses, I invite you to read these instead: Can I set the filename of a PDF object displayed in Chrome?
I didn't find, yet, for chrome's default plugin.
I've got something that works for Firefox though, and which will default to download.pdf in chrome, for some odd reason...
By passing a dataURI in the form of
'data:application/pdf;headers=filename%3D' + FILE_NAME + ';base64,...'
Firefox accepts FILE_NAME as the name of your file, but chrome doesn't...
A plnkr to show a better download.pdf in chrome, which doesn't like nested iframes...
And an snippet which will only work in FF :
const FILE_NAME = 'myCoolFileName.pdf';
const file_header = ';headers=filename%3D';
fetch('https://dl.dropboxusercontent.com/s/rtktu1zwurgd43q/simplePDF.pdf?dl=0').then(r => r.blob())
.then(blob=>{
const f = new FileReader();
f.onload = () => myPdfViewer.src = f.result.replace(';', file_header + encodeURIComponent(FILE_NAME) + ';');
f.readAsDataURL(blob);
});
<iframe id="myPdfViewer" width="500" height="500"></iframe>
But note that if it is really important to you, you could of course not rely on browser's own plugins, and use e.g Mozilla's PDF.js over which you'll get an extended control.
Is there any way around this so that I can control the name?
No. You cannot control the name of a file stored at user local filesystem.
You can use <a> element with download attribute set to suggested file name. If user selects to download offered file user can change the file name at any time before or after downloading file.
window.onload = () => {
let blob = new Blob(["file"], {
type: "text/plain"
});
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
a.href = url;
a.download = "file.txt";
document.body.appendChild(a);
console.log(url);
a.click();
}
At chrome, chromium browsers you can use requestFileSystem to store Blob, File or Directory at LocalFileSystem, which writes file to browser configuration directory, or other directories within user operating system. See
How to Write in file (user directory) using JavaScript?
jQuery File Upload Plugin: Is possible to preserve the structure of uploaded folders?
Where is Blob binary data stored?
I'm relatively new to Google App Engine and JavaScript, so I'm really not sure if I'm following good practice for this or anything, but here goes.
I have a game running on one page of my web application where I am collecting data on the user's movement and putting it in a csv file (i.e. I am creating a csv file in my JavaScript code). I have created a link that will automatically download the file on that specific page, but what I really want to do is add a link to download the file to a different page of my site. Is there any easy way to do this in JavaScript?
This is my current download code (where csvContent is a global variable with all the info I need in my csv)
//download csv file
function downloadData() {
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "game1_data.csv");
document.body.appendChild(link); // Required for FF
link.click();
}
Ideally there would be a way to output the file to somewhere besides my current doc (like a different path on the website). For example, if I were on a page '/game', I'd want to create an element on '/files'.
If you just want to store file for user locally and give option to download within your domain pages, you can use fileSystem API (supported by chrome and opera) or Indexed db (supported by most browsers) to store locally in browser.
Refer here - How to store file in a browser using JavaScript
If you intend to save the file on server use google cloud storage1. You get 5 gb storage and 1 bucket free with google cloud. This way user can view/download it anywhere.
I'm developing a web app that works with video files -- specifically, I have the user 'select' their video file through a form input, I then construct a URL reference to that file, and set the <video> source to that URL. This allows me to work with user supplied content, without having to upload the video -- something that seems unnecessary, and will lead to decreased performance.
Here's my very simple code for now:
// within a change event for a file input
var videoFile = e.currentTarget.files[0];
var fileURL = URL.createObjectURL(videoFile);
var videoNode.src = fileURL;
This works great. The problem: It doesn't allow me to store a reference to this video in between user sessions. I've tried to save the fileURL into a Mongo document, and then later reload that video file... and while this works sometimes, it often breaks... with no clear consistency.
Does anyone have a good solution to storing reference to local files in between user sessions? Do I have to use something like the HTML5 Filesystem API? Localstorage?
I may have missed what you are getting at, but it sounds like you just need a cookie. http://www.w3schools.com/js/js_cookies.asp
You can save whatever file name you want in a simple cookie and then the next time they visit the page you recall the video name they want.