I am trying to upload a zip file that contains an HTML file inside to firebase storage. I am using JSzip to zip the file. Here is how my code looks right now:
DownloadHandler = () => {
var zip = new JSZip();
zip.file("story.html", `<body>${this.state.html}</body>`);
zip.generateAsync({ type: "blob" }).then(function (blob) {
storage.ref("story").put(blob);
});
};
When I run the current code it uploads the zip but inside the zip, I am getting a document file and not an HTML file. Also, when I click this document file it says it is encoded. How can I modify my code so that when the file zips it zips an HTML file inside?
Figured it out. In my storage.ref("story").put(blob); I just need to specify the extension of the file so it needed to be storage.ref("story.zip").put(blob);
Related
I would like some help to make a File object from a pdf stored in MongoDB.
I am not using GridFS, the file is stored as such:
File structure in MongoDB
I am using this function to make the File:
const handlegetfile = () => {
API.getFile(2).then((result) => {
console.log(result.data);
const file = new File(Uint8Array.from(result.data.File.data), result.data.File.name);
console.log(file);
API.writeFile({
CodeTiers: "2525",
Type: { value: "non", label: "testfile" },
Format: "pdf",
File: file,
});
});
};
The .pdf file created by the writeFile() function can't be opened, and when opened with an editor, it looks like this:
pdf data after retrieved
Important: I do not want to write the file to the disk, writeFile() is just here to be sure that the pdf can be opened.
The thing is: the data goes from this in the original file:
original pdf data
To this in MongoDB:
data in MongoDB
To what is in the second screenshot. I am pretty sure the problem comes from the cast to a Uint8array but I can't find what else to use there for it to work. I tried exploding the response with {...result.data.File} and using an ArrayBuffer, also by simply casting to an array new File([result.data.File.data], result.data.File.name) but I couldn't get it to work either way.
Could you help me please ?
Is it possible to view the index.html file from a .zip archive using an iframe in HTML? Or does it exist some JS library that can do this?
Thanks in advance.
I just wanted to elaborate further the #Vohuman's comment because I think it's important.
From what I understand by the documentation of jszip library it can be done.
Read the zip file (by using JSZipUtils)
JSZipUtils.getBinaryContent('path/to/content.zip', function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
});
Source: https://stuk.github.io/jszip/documentation/howto/read_zip.html
Read it using:
var new_zip = new JSZip();
// more files !
new_zip.load(content);
// you now have every files contained in the loaded zip
new_zip.file("hello.txt").asText(); // "Hello World\n"
Source: https://stuk.github.io/jszip/documentation/examples.html (Scroll the bottom of the page (Read a zip file section))
Finally, create an iframe and put the html content into it.
$('#your_iframe').contents().find('html').html(htmlZipContent);
Is possible to load data from local xml file?
Here is my code:
var file;
jwplayer().onError(function() {
jwplayer().load({
file: file
});
jwplayer().play();
jwplayer().onComplete(function() {
if (doesConnectionExist()) {
location.reload();
}
});
});
The var file must be load from a xml file that contains http://localhost/error.mp4.
What should I use to do that?
Because each client may have a different location error file.
everyone. Trying to unsuccesfully add mp3s into my zip file using the wonderful JSZIP lib. Right now, it only created the zip file with the correct file name, but the mp3 is always blank.
This is the code I have so far:
//init
var zip = new JSZip();
//add an mp3 titled "any other way" and decode binary to base64
zip.file("any other way.mp3", btoa("absolutepath/to/my/file/any_other_way.mp3"), {base64: true});
//generate zip
var content = zip.generate();
//download zip
location.href="data:application/zip;base64,"+content;
So, I ended up including another js file with the JSZIP utils in my project and called the following method and it downloaded fine on Chrome. However, if you want to make it work on IE and safari you will have to implement Downloadify (http://stuk.github.io/jszip/documentation/howto/write_zip.html#toc_3):
// loading a file and add it in a zip file
JSZipUtils.getBinaryContent("path/to/audio.mp3", function (err, data) {
if(err) {
throw err; // or handle the error
}
var zip = new JSZip();
zip.file("audio.mp3", data, {binary:true});
});
http://stuk.github.io/jszip-utils/documentation/api/getbinarycontent.html
Also, here is a link to the issue: https://github.com/Stuk/jszip/issues/176#issuecomment-57266207
My main program prompts the user to browse for a file in order to convert it using ffmpeg. This is the format of the file browsing:
<div>
<p class="lead">1. Select audio file for conversion ( mp3, wma):</p>
<div class="quick-center">
<div class="quick-drop-outer quick-left"><input id="inFile" type="file" id="inputFile"/></div>
</div>
</div>
and this is the code where to launch the file and convert it according to selection: not whole code supported because no need of file conversion:
document.getElementById('inFile').addEventListener('change', handleFileSelect, false);
function readInputFile(file) {
// disable conversion for the time of file loading
$('#convert').attr('disabled', 'true');
// load file content
var reader = new FileReader();
reader.onload = function(e) {
$('#convert').removeAttr('disabled');
fileName = file.name;
fileBuffer = e.target.result;
}
reader.readAsArrayBuffer(file);
}
function handleFileSelect(event) {
var files = event.target.files; // FileList object
// files is a FileList of File objects. display first file name
file = files[0];
console.log(file);
if (file) {
$("#drop").text("Drop file here");
readInputFile(file);
}
}
now, here is my problem, what I want to do is to upload the file directly from a selected folder (upload) where the audio files are already there. I want instead of browsing for the file, I want the last file in the upload folder to be uploaded instead of "inFile" so that conversion can happen.
how could that happen.
edit: A small brief about my project. the user records his voice using HTML5 and the link of that audio is uploaded using ajax and php into a folder named upload.what I simply want is instead of browsing that file, I want to write down the path of the file in the selected folder automatically once recording is done for conversion.so, instead of dropping the file by user, the file would be dropped and conversion starts from there.
help please.Thank you in advance
From JavaScript You dont have access to files and directories on host system.
Why?
Because is VERY IMPORTANT SECURITY feature to block reading Your disc for files from scripts.