Add downloadable file to another page with JavaScript in Google App Engine - javascript

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.

Related

Is it possible to store files in browser's temporary folder and retrieve them using JavaScript?

I'm using a PDF viewer on the frontend which can only read .pdf URLs (it's not able to read blob directly). So I'll need to download those files to the user's computer first. Hypothetically, this is what I want to do:
// download blob
let pdf = fetch(mysite.com);
// store in a temporary folder
// maybe "%AppData%\Local\Google\Chrome\User Data\Default\Cache"?
browser.storeFile(pdf);
// retrieve the file from temporary folder and pass to PDF viewer
myPDFViewer.load('%AppData%\Local\Google\Chrome\User Data\Default\Cache\my-file.pdf')
The PDF viewer I'm using can load offline files perfectly fine, as long as I have the absolute path to the file (ending with .pdf). I have tried all sorts of things but still not able to generate such .pdf URLs from the fetched blob.
So, is it possible to download files, store them in a temporary folder internal to the browser (which will get cleaned up automatically), and generate absolute local paths to those files?

How do I save file urls on javascript?

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.

Why local file is showing corrupted after downloading using javascript?

Good Afternoon,
Scenario: I am having pdf's file on local system and when user click the button, I want it to get downloaded. But after getting download the file on opening shows corrupted. While posting this query I notice the file which is getting download is of 1KB and original file size is 28KB. I didn't understand why ?
I am creating the excel file at backend and saving at user location as due to huge data it is taking a lot of time so once file is created, the user can download the file.
Below are the codes of JS .
function download() {
var filename="output.pdf";
var element = document.createElement('a');
var fileloc="C:\\ebooks\\PDF\\abc.pdf";
element.setAttribute('href','data:text/plain;charset=utf-8, ' +
encodeURIComponent(fileloc));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
}
Original file is good. Please correct me what I am doing it wrong .
The data: scheme URL you are creating resolves to a plain text document (not a PDF) containing the text C:\ebooks\PDF\abc.pdf.
You are saving this file with a .pdf extension so when you try to open it, your PDF reader tries to read it as a PDF (which it isn't).
If you want to save the contents of the file at the path you specified then you need to:
Have the user select the file using a <input type="file"> (because JS is not allowed access to files on the user's disk unless they select them explicitly and generating the URL using the FileReader.readAsDataURL() method.
If you are creating the file on the server, as you said, then there is no need to construct a data: scheme URL, you can just use the https: scheme URL that points to the file on the server.

Cordova - Saving/ Downloading a backup JSON file that is dynamically generated

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).

How to get a web browser to download a file that is stored in a JavaScript String?

I've been able to write JavaScript to cause the browser to download a file from a remote server using code like this:
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = "filename.zip"
document.body.appendChild(iframe);
Which works great. However, now I have a different situation where the contents of the file are stored in a string in my JavaScript on the browser side and I need to trigger a download of that file. I've tried replacing the third line above with this, where 'myFileContents' is the string containing the actual bytes of the file:
iframe.src = "data:application/octet-stream;base64," + Base64.encode(myFileContents);
This gets the file downloaded, but the file name is lost. In Chrome the file name is just 'download'. Also I've read that there are limitations to the file size allowed in some browser versions.
Is there a way to achieve this? Using JQuery would be OK. The solution needs to support any file type - zip, pdf, csv, png, jpg, xls, etc...
In some newer browsers you can use the new HTML5 download attribute on the a tag to achieve this:
var a = document.createElement('a');
a.download = "filename.txt";
a.href = "data:application/octet-stream;base64," + Base64.encode(myFileContents);
a.click();
For a future solution you could look into the HTML5 FileSystem API, but this API is not currently supported in most of the major browsers. It might not be of much use to you except for that it might provide you with another way to store the files locally if you would be OK with that. But it doesn't store the files on the users locally accessible file system, you would have to develop your own browser based interface for your users to interact with the files. Downloading the files from the HTML5 file system to the users local file system would in any case again be done using the new download attribute on an a tag, which would then refer to a location in the HTML5 file system instead of referring to an online location.
To do this with an iframe element you would have to somehow set the Content-Disposition request header on the iframe to inline; filename="filename.txt" using client side JavaScript, I don't think it is possible to do this, most likely because of security issues. If you really don't have any other option, you could kill the download speed performance by sending the string to the server using AJAX and then downloading it from there again with the right request headers set.

Categories

Resources