JavaScript; Getting the content of the file into array chunks - javascript

I am working on the Google Drive API to get a document from the google drive, and then I’m trying to get the document’s contents into chunks of blocks so I can encrypt block-by-block. Can you help me figure out a way of achieving that? This is what I have tried.
function getDocumentContents() {
var accessToken = user.getAuthResponse().access_token;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/drive/v3/files/' + fileId
+ '?alt=media');
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.onload = function() {
modelContent = xhr.responseText;
extractKey(xhr.responseText);
};
xhr.onerror = function() {
alert('error');
};
xhr.send();
var chunkSize=512*512;
var fileSize=file.size;
var chunks=Math.ceil(xhr.size/chunkSize,chunkSize);
var chunk=0;
console.log('chunks...',chunks);
while( chunk <= chunks)
var offset=chunk*chunkSize;
console.log('current chunk..', chunk);
chunk.send();
console.log('offset',offset);
console.log(xhr.slice(offset,offset+chunkSize));
}
Thanks

Related

Firebase Storage files not downloading. What am I doing wrong?

I need to download a file that has been uploaded to Firebase Storage. I used to get the CORS error but I used gsutil as per the docs and now nothing really happens. The download doesn't start. What am I doing wrong?
//Create reference of Storage
let storage = firebase.storage();
//Create reference to file in Storage
let pathSubmission = 'Uploads/' + this.place1+ '/' + this.place2+ '/' + this.place3+ '/' + this.downloadSubmissionUID;
let storageRef = storage.ref(pathSubmission);
storageRef.getDownloadURL().then((url) => {
console.log('downloadURL arg: ' + url);
//Download file (no idea how this works)
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
})
Figured it out using Kai's blog, here's my solution:
//Create reference of Storage
let storage = firebase.storage();
//Create reference to file in Storage
let pathSubmission = 'Uploads/' + this.place1 + '/' + this.place2+ '/' + this.place3 + '/' + this.downloadSubmissionUID;
//Assign Storage reference the path reference
let storageRef = storage.ref(pathSubmission);
//Download file by creating XMLHttpRequest
storageRef.getDownloadURL().then((url) => {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
//Create an `a` tag (since it has an `href` and a `download` attribute)
var a = document.createElement('a');
a.href = window.URL.createObjectURL(xhr.response);
a.download = 'someFileName';
a.style.display = 'none';
document.body.appendChild(a);
a.click(); //Simulates a click event
var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
})
Actually, the file is probably getting downloaded. The problem is in this code here:
//Download file (no idea how this works)
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function(event) {
var blob = xhr.response;
};
xhr.open('GET', url);
xhr.send();
The browser is doing exactly what it's told. It downloads the file as a blob. Then discards the result, because you aren't doing anything with the data in the onload handler!
First, I'd recommend using fetch, which provides a much more intuitive API than the XMLHttpRequest (in my opinion).
Here's how you might do that:
// Create reference of Storage
let storage = firebase.storage();
// Create reference to file in Storage
let pathSubmission = 'Uploads/' + this.place1+ '/' + this.place2+ '/' + this.place3+ '/' + this.downloadSubmissionUID;
let storageRef = storage.ref(pathSubmission);
storageRef.getDownloadURL()
.then(url => {
console.log('Download URL: ' + url)
return fetch(url)
})
.then(response => response.blob())
.then(blob => {
console.log('File downloaded as blob')
// Do something with the blob...
})
.catch(error => {
console.error('Something went wrong while downloading the file:', error)
})

JS FileSaver non interactive

I have an array of file to save by using a loop and i generate the name of each file. I want to save file directly (in non interactive way) without asking me to confirm. How can i do ?
Here is my code for saving file
var url = img.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; //Set the response type to blob so xhr.response returns a blob
xhr.open('GET', url , true);
xhr.onreadystatechange = function () {
if (xhr.readyState == xhr.DONE) {
var filesaver = require('file-saver');
filesaver.saveAs(xhr.response, nameFile); // nameFile the name of file to be saved
}
};
xhr.send(); //Request is sent
Finally, i find a solution, instead of saving file, i write it by creating a new one.
for (var i = 0; i < tabForm.length; i++) {
var imgData = $('#affichageqr')[0].childNodes[1].childNodes[0].src;
var data = imgData.replace(/^data:image\/\w+;base64,/, '');
fs.writeFile(qrcode.getNomQRCode()+'.jpeg', data, {encoding: 'base64'}, function(err){
if (err) {
console.log('err', err);
}
console.log('success');
});
}

Can I create a growing file source URL which is not a video/audio Type?

I have read this article, but this is a video's solution.
Now, I want create a non vidoe/audio sourceBuffer url. I don't know how to implement it. I think that maybe mediasource is not support.
<script>
var ms = new MediaSource();
var src = window.URL.createObjectURL(ms);
console.log(src);
// sourceopen is not work.
// I don't know if i can create a non audio/video type growing file url?
ms.addEventListener('sourceopen', function(e) {
var sourceBuffer = ms.addSourceBuffer('application/octet-stream');
var xhr = new XMLHttpRequest();
xhr.open('GET', '/test.bin', true); // just a binary content
xhr.responseType = 'arraybuffer';
xhr.send();
xhr.onload = function() {
if (xhr.status >= 400) {
alert('Unexpected status code ' + xhr.status);
return false;
}
sourceBuffer.appendBuffer(xhr.response);
};
}, false);
</script>

How to use download files from google drive in javascript?

Where should i paste this function. I have tried millions of times but failed. Can anyone give me the full html page with this function. I have replaced with insert() on quickstart but failed. Please help me.Give me full html page.
function downloadFile(file, callback) {
if (file.downloadUrl) {
var accessToken = gapi.auth.getToken().access_token;
var xhr = new XMLHttpRequest();
xhr.open('GET', file.downloadUrl);
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.onload = function() {
callback(xhr.responseText);
};
xhr.onerror = function() {
callback(null);
};
xhr.send();
} else {
callback(null);
}
}

Fetching a file from google drive and parsing it

I am able to fetch the contents of a zip file from google drive using javascript api. But i am not able to unzip the file. I am using JSZip (http://stuartk.com/jszip) to unzip. How do i achive this. Please help i am stuck on this from last 3 days.
gapi.client.load('drive', 'v2', function(){
var config = {
'client_id': '{!gApp.clientid__c}',
'scope': 'https://www.googleapis.com/auth/drive',
'immediate':true
};
gapi.auth.authorize(config, function() {
var accessToken = gapi.auth.getToken().access_token;
var xhr = new XMLHttpRequest();
xhr.open('GET', fileURL);
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
xhr.onload = function() {
//reponse :unzip the file here
var zipData = xhr.responseText;
var zip = new JSZip(zipData, {base64:false});
console.log(zip.files) //get an error undefined
};
xhr.onerror = function() {
alert('error');
};
xhr.send();
});
});

Categories