We Keep Coding

How to save pdf file from Firebase in local folder from web

How do I download and save a pdf file from Firebase storage.
During upload I save upload infomation on real time firebase node like this:
while my storage is as follow:
My save btn is linked to this function:
function savepdfFile(){
let selectedGroup = document.getElementById("groupname");
let selectedDate = document.getElementById("dateId");
let selectedGroupValue = selectedGroup.value;
let selectedDateValue = selectedDate.value;
let mdate = "";
mdate = changeDateForamat(selectedDateValue);
downloadPDFDoc(selectedGroupValue,mdate);
}
I retrieve information of this pdf file from firebase real time node as follow when a save button is clicked;
function downloadPDFDoc(groupname,mdate){
let pdfName, pdfUrl;
firebase.database().ref('SessionPDFStorage').once('value',function(snapshot){
snapshot.forEach(
function(ChildSnapshot){
//let mLocation = ChildSnapshot.val().province;
let mGroup = ChildSnapshot.val().selectedGroup;
let mydate = ChildSnapshot.val().currentDate;
let ddate = changeDateForamat(mydate);
if(groupname == mGroup && mdate == ddate){
pdfName = ChildSnapshot.val().fileName;
pdfUrl = ChildSnapshot.val().fileImageUri;
}
}
);
loadScannedImage(pdfName,pdfUrl);
});
}
How do I develop the loadScannedImage(pdfName,pdfUrl) funtion below to using the above information to save the file on the local folder dynamically? example automatically save this pdf to a local c:\download directory.
function loadScannedImage(pdfName,pdfUrl){
}
I have seen some implementation of FileSaver.js and Blob.js but it is not quite clear how I would use them.
Any help will be appreciated.

I created an anchor element and pass both pdf name and its url link as as attributes follow inside loadscnnedImage:
function loadScannedImage(pdfName,ImgUrl){
var element = document.createElement('a');
element.setAttribute('href',`${ImgUrl}`);
element.setAttribute('download', pdfName);
document.body.appendChild(element);
element.click()
}
but I would have liked to dynamically safe the pdf file directly to browsers default downloaded folder on the machine. But this works too

Export to excel with images in JavaScript

I have the following code :
<button id="myButtonControlID" onclick="ExcelExport();">Export to Excel</button>
<script>
function ExcelExport(){
var imgurl = "https://image.flaticon.com/icons/svg/60/60752.svg"
var HTMLtext="<table><tr><td>Image export</td><td><img src='"+imgurl+"'style='width:500px;height:600px;'></img></td></tr></table>";
window.location.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(HTMLtext);
sa = window.location.href;
return (sa);
}
</script>
With this I am able to export an excel file as XLS but since the image is a link,it is only displayed when I am connected to the internet. Is there a way to embed the image to excel in such a way that the image is not a link and it is displayed even when you are offline?

Javascript export local storage

I have this piece of code on a site that exports the contents of local storage to a file in JSON format.
For some reason it stopped working. I tested it in multiple browsers but it's all the same...
No errors get displayed, yet it doesn't export either.
The different variables seem fine, yet it just isn't exporting.
To be honest I have no clue how to do this differently so any help would be appreciated.
Thx
function exportHistory() {
console.log("started");
var _myArray = JSON.stringify(localStorage , null, 4); //indentation in json format, human readable
var vLink = document.getElementById('exportHistory'),
var vBlob = new Blob([_myArray], {type: "octet/stream"}),
vName = 'working_history_' + todayDate() + '.json',
vUrl = window.URL.createObjectURL(vBlob);
console.log(vLink);
vLink.setAttribute('href', vUrl);
vLink.setAttribute('download', vName );
console.log("finished");
}
<button class="btn btn-outline-secondary btn-sm" id="exportHistory" onclick="exportHistory()">Export History</button >

Here you need to add the download attribute to an anchor tag <a> rather than the clicking button itself. You need to create an anchor tag with display:none and programmatically click it to download the file. Here is an example. Notice the button only used to execute the function and href and download attributes are added to the <a> tag.
function exportHistory() {
console.log("started");
var _myArray = JSON.stringify(localStorage , null, 4); //indentation in json format, human readable
//Note: We use the anchor tag here instead button.
var vLink = document.getElementById('exportHistoryLink');
var vBlob = new Blob([_myArray], {type: "octet/stream"});
vName = 'working_history_' + todayDate() + '.json';
vUrl = window.URL.createObjectURL(vBlob);
console.log(vLink);
vLink.setAttribute('href', vUrl);
vLink.setAttribute('download', vName );
//Note: Programmatically click the link to download the file
vLink.click();
console.log("finished");
}
Now add an empty anchor tag to the DOM.
<button class="btn btn-outline-secondary btn-sm" id="exportHistory" onclick="exportHistory()">Export History</button >
<a id="exportHistoryLink" style="display: none;">Export</a>

generate and make downloadable a doc file with some data in angularjs

I want to take input values from user like name, address, phone. After entering values I want to generate a doc (ms word doc file), make it available to be downloaded locally on click on button using angularjs. How can I achieve this?
Is it possible at client side or it should be from server side?
<input type='text' ng-model='user.username'/>
<input type='number' ng-model='user.phone'/>
<a href='someX.doc' download>download</a>
in my controller, I want to generate doc file, download it on click of link (download).

This will work
In your HTML add the following Line
<a download='someX.doc' ng-click="downloadMyDoc()" ng-href="{{ url }}" style="cursor: pointer">Download</a>
In your angular file add the following
var app=angular.module("myApp",[]);
app.config(['$compileProvider',
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);
app.controller("homeCtrl",function($scope){
$scope.user={};
$scope.downloadMyDoc=function(){
alert("a");
var user=$scope.user;
var content = 'Username: '+user.username+'phone: '+user.phone;
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );
}
});

Handling multiple files from an input element in an array with Google Apps Script

I have a form, which allows to select an item from a dropdown list and upload a file. The name and the ID of the item are saved in a Spreadsheet document. Works with one file...but I want to upload multiple files. Could you help me fixing the script?
The HTML part looks like this
<div class="col-md-4 col-sm-6 ">
<div class="caption">
<h3>Bildauswahl</h3>
<p align="center"><input type="file" name="myFiles[]" id="myFiles" multiple></p>
</div>
</div>
My script, which is not working, is the following:
var dropBoxId = "XYZ";
var logSheetId = "ABC";
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('InputForm.html');
}
function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var input = document.getElementById('myFiles');
for (i = 0; i<input.files.length; i++) {
var blob = input.files[i];
var file = folder.createFile(blob);
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName]);
}
// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}
Thanks.

As of right now you have to use a work around to work with multiple files. The multiple attribute only works in IFRAME mode, but file inputs are broken in IFRAME mode.
To see this workaround take a look at the bug submission for this issue:
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4610
Also in your code you have some mixing of server side and client side code that will not work:
var folder = DriveApp.getFolderById(dropBoxId); //server side
var input = document.getElementById('myFiles'); //client side
You will need to do your multiple file processing on the client side
I came up with a nice solution for multi-file uploading. Limitations are files must be under 10 MB.
CODE.GS
function doGet() {
return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function saveFile(data,name,folderId) {
var contentType = data.substring(5,data.indexOf(';'));
var file = Utilities.newBlob(Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), contentType, name);
DriveApp.getFolderById(folderId).createFile(file);
}
index.html
<div>
<input type="file" id="myFiles" name="myFiles" multiple/>
<input type="button" value="Submit" onclick="SaveFiles()" />
</div>
<script>
var reader = new FileReader();
var files;
var fileCounter = 0;
var folderId = "";
reader.onloadend = function () {
google.script.run
.withSuccessHandler(function(){
fileCounter++;
postNextFile();
}).saveFile(reader.result,files[fileCounter].name,folderId);
}
function SaveFiles(){
var folderSelect = document.getElementById("folderSelectId");
folderId = folderSelect.options[e.selectedIndex].value;
files = document.getElementById("myFiles").files;
postNextFile();
}
function postNextFile(){if(fileCounter < files.length){reader.readAsDataURL(files[fileCounter]);}else{fileCounter=0;alert("upload done")}}
</script>