I'm working on hybrid mobile app using html5/js. It has a function download zip file then unzip them. The download function is not problem but I don't know how to unzip file (using javascript).
Many people refer to zip.js but it seems only reading zip file (not unzip/extract to new folder)
Very appreciate if someone could help me !!!
Have a look at zip.js documentation and demo page. Also notice the use of JavaScript filesystem API to read/write files and create temporary files.
If the zip file contains multiple entries, you could read the zip file entries and display a table of links to download each individual file as in the demo above.
If you look the source of the demo page, you see the following code (code pasted from Github demo page for zip.js) (I've added comments to explain):
function(obj) {
//Request fileSystemObject from JavaScript library for native support
var requestFileSystem = obj.webkitRequestFileSystem || obj.mozRequestFileSystem || obj.requestFileSystem;
function onerror(message) {
alert(message);
}
//Create a data model to handle unzipping and downloading
var model = (function() {
var URL = obj.webkitURL || obj.mozURL || obj.URL;
return {
getEntries : function(file, onend) {
zip.createReader(new zip.BlobReader(file), function(zipReader) {
zipReader.getEntries(onend);
}, onerror);
},
getEntryFile : function(entry, creationMethod, onend, onprogress) {
var writer, zipFileEntry;
function getData() {
entry.getData(writer, function(blob) {
var blobURL = creationMethod == "Blob" ? URL.createObjectURL(blob) : zipFileEntry.toURL();
onend(blobURL);
}, onprogress);
}
//Write the entire file as a blob
if (creationMethod == "Blob") {
writer = new zip.BlobWriter();
getData();
} else {
//Use the file writer to write the file clicked by user.
createTempFile(function(fileEntry) {
zipFileEntry = fileEntry;
writer = new zip.FileWriter(zipFileEntry);
getData();
});
}
}
};
})();
(function() {
var fileInput = document.getElementById("file-input");
var unzipProgress = document.createElement("progress");
var fileList = document.getElementById("file-list");
var creationMethodInput = document.getElementById("creation-method-input");
//The download function here gets called when the user clicks on the download link for each file.
function download(entry, li, a) {
model.getEntryFile(entry, creationMethodInput.value, function(blobURL) {
var clickEvent = document.createEvent("MouseEvent");
if (unzipProgress.parentNode)
unzipProgress.parentNode.removeChild(unzipProgress);
unzipProgress.value = 0;
unzipProgress.max = 0;
clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.href = blobURL;
a.download = entry.filename;
a.dispatchEvent(clickEvent);
}, function(current, total) {
unzipProgress.value = current;
unzipProgress.max = total;
li.appendChild(unzipProgress);
});
}
if (typeof requestFileSystem == "undefined")
creationMethodInput.options.length = 1;
fileInput.addEventListener('change', function() {
fileInput.disabled = true;
//Create a list of anchor links to display to download files on the web page
model.getEntries(fileInput.files[0], function(entries) {
fileList.innerHTML = "";
entries.forEach(function(entry) {
var li = document.createElement("li");
var a = document.createElement("a");
a.textContent = entry.filename;
a.href = "#";
//Click event handler
a.addEventListener("click", function(event) {
if (!a.download) {
download(entry, li, a);
event.preventDefault();
return false;
}
}, false);
li.appendChild(a);
fileList.appendChild(li);
});
});
}, false);
})();
})(this);
Related
Good day all,
Please I need help in resolving a situation where I want to call a function after an epub has fully loaded.
The code below loads the epub successfully, but I would like to display the table of contents (toc), which actually shows in developer console after the epub file has loaded.
I've not been able to make the toc to display, the LoadToc is never called, and when I change where it is being called, it is called immediately, without waiting for the epub to fully load.
book = null;
document.getElementById('bookChooser').addEventListener('change', function(e) {
var firstFile = e.target.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function(e) {
book = ePub({
bookPath: e.target.result
});
book.renderTo("area");
/* Replace area with the id for your div to put the book in */
}.bind(this).bind(this.LoadToc);
reader.readAsArrayBuffer(firstFile);
} else {
alert("Your browser does not support the required features. Please use a modern browser such as Google Chrome, or Mozilla Firefox ");
}
});
function LoadToc() {
if (book !== null) {
var results = book.toc;
var $select = document.getElementById("toc"),
docfrag = document.createDocumentFragment();
var $select = document.getElementById("toc"),
docfrag = document.createDocumentFragment();
results.forEach(function(chapter) {
var option = document.createElement("option");
option.textContent = chapter.label;
option.ref = chapter.href;
docfrag.appendChild(option);
});
$select.appendChild(docfrag);
$select.onchange = function() {
var index = $select.selectedIndex,
url = $select.options[index].ref;
display(url);
return false;
};
}
}
document.getElementById("prev").onclick = function() {
book.prevPage();
}
document.getElementById("next").onclick = function() {
book.nextPage();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/epub.js/0.2.13/epub.min.js"></script>
<input type="file" id="bookChooser">
<select id="toc"></select>
<div id="area"></div>
<button id="prev" type="button"><</button>
<button id="next" type="button">></button>
Ok finally I was able to resolve the issue.
The file reader needed to end before calling the function. So using the code below solved the problem.
...
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function(e) {
book = ePub({
bookPath: e.target.result
});
book.renderTo("area");
/* Replace area with the id for your div to put the book in */
}.bind(this).bind(this.LoadToc);
reader.readAsArrayBuffer(firstFile);
reader.onloadend = () => {
LoadToc();
}
} else {
alert("Your browser does not support the required features. Please use a modern
browser such as Google Chrome, or Mozilla Firefox ");
}
...
For anyone that could be facing issues like this
Thanks to everyone that commented
I'm developing an Ionic App using Cordova File Transfer Plugging to download set of images into the device. Currently it downloads images successfully and I need to restrict 1 download job at a time. Following is the code :
$scope.activeDownload = false;
// Download the current magazine
$scope.downloadMagazine = function() {
if($rootScope.user.user_id == undefined) {
$scope.showLoginAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Oops!',
template: "Your must login to download magazines"
});
};
$scope.showLoginAlert();
return;
}
document.addEventListener('deviceready', function () {
var dirName = $rootScope.currentIssue.slug+'_VOL_'+$rootScope.currentIssue.vol+'_ISU_'+$rootScope.currentIssue.issue;
// First create the directory
$cordovaFile.createDir(cordova.file.dataDirectory, dirName, false)
.then(function (success) {
var count = 1;
$scope.loadedCount = 0;
$ionicLoading.show({template : "<progress max=\"100\" value=\"0\" id=\"dw-prog\"></progress><p> Downloading pages...</p><p>Please wait...</p> <button ng-controller=\"magazineIssueCtrl\" ng-click=\"downloadBackground()\" class=\"button button-full button-positive\">Continue in Background</button>"});
angular.forEach($scope.pages, function(value, key) {
function wait() {
if($scope.proceed == false) {
window.setTimeout(wait,50);
}
else {
var imgName = count+".png";
$scope.saveImage(dirName,value.link,imgName); // Then save images one by one to the created directory.
count++;
}
};
wait();
});
}, function (error) {
// Directory already exists means that the magazine is already downloaded.
$scope.showDownloadedAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Why worry!',
template: "Your have already downloaded this magazine. You can view it on downloads"
});
};
$scope.showDownloadedAlert();
});
}, false);
};
// Save a image file in a given directory
$scope.saveImage = function(dir,imgUrl,imageName) {
$scope.proceed = false;
var url = imgUrl;
var targetPath = cordova.file.dataDirectory+ dir+"/" + imageName;
var trustHosts = true;
var options = {};
// Download the image using cordovafiletransfer plugin
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
$scope.proceed = true;
$scope.loadedCount ++;
document.getElementById("dw-prog").value = ($scope.loadedCount / $scope.pages.length )*100;
if($scope.loadedCount == $scope.pages.length) {
$scope.activeDownload = false;
$ionicLoading.hide();
$scope.showDownloadSuccessAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Success!',
template: "Your magazine successfully downloaded. You can view it on Downloads!"
});
};
$scope.showDownloadSuccessAlert();
}
}, function(err) {
//alert(JSON.stringify(err));
}, function (progress) {
});
};
// Continue download in background
$scope.downloadBackground = function () {
$scope.activeDownload = true;
$ionicLoading.hide();
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Sent to Background!',
template: "You can view it on downloads tab"
});
};
$scope.showAlert();
$rootScope.downloadInBackground.dirName = $rootScope.currentIssue.slug+'_VOL_'+$rootScope.currentIssue.vol+'_ISU_'+$rootScope.currentIssue.issue;
};
Here everything happens as expected but I need the $scope.activeDownload variable to be true when a download is sent to background so that I can refer to that variable before starting another download job. But the problem here is that variable seems to be set to false always. Could you please help me to identify the problem here?
Is it possible to simulate/fake the drop event using javascript only? How to test this type of event?
Take for example this dnd upload sample page , is it possible to trigger the "drop" event with a file without actually dropping a file there? Let's say clicking on a button?
I have started writing a Sukuli script that can control the mouse and do the trick but I was looking for a better solution.
EDIT
#kol answer is a good way to get rid of the drag and drop event but I still have to manually select a file from my computer. This is the bit I am interested in simulating. Is there a way to create a file variable programatically?
var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];
1. Dropping image selected by the user
I've made a jsfiddle. It's a stripped-down version of the html5demos.com page you've referred to, but:
I added an <input type="file"> tag which can be used to select an image file from the local computer, and
I also added an <input type="button"> tag with an onclick handler, which simulates the "drop file" event by directly calling the ondrop event handler of the DND-target div tag.
The ondrop handler looks like this:
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
}
That is, we have to pass an argument to ondrop, which
has a dataTransfer field with a files array subfield, which contains the selected File, and
has a preventDefault method (a function with no body will do).
So the onclick handler of the "Simulate drop" button is the following:
function simulateDrop() {
var fileInput = document.getElementById('fileInput'),
file = fileInput.files[0];
holder.ondrop({
dataTransfer: { files: [ file ] },
preventDefault: function () {}
});
}
Test
Select an image file (png, jpeg, or gif)
Click on the "Simulate drop" button
Result
2. Dropping autogenerated test files without user interaction (GOOGLE CHROME ONLY!!!)
I've made another jsfiddle. When the page is loaded, a function gets called, which:
creates a text file into the temporary file system, and
loads and drops this text file into the target <div>; then
creates an image file into the temporary file system, and
loads and drops this image file into the target <div>.
The code of this drop-simulator function call is the following:
(function () {
var fileErrorHandler = function (e) {
var msg = "";
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = "QUOTA_EXCEEDED_ERR";
break;
case FileError.NOT_FOUND_ERR:
msg = "NOT_FOUND_ERR";
break;
case FileError.SECURITY_ERR:
msg = "SECURITY_ERR";
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = "INVALID_MODIFICATION_ERR";
break;
case FileError.INVALID_STATE_ERR:
msg = "INVALID_STATE_ERR";
break;
default:
msg = "Unknown Error";
break;
};
console.log("Error: " + msg);
},
requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem,
dropFile = function (file) {
holder.ondrop({
dataTransfer: { files: [ file ] },
preventDefault: function () {}
});
};
if (!requestFileSystem) {
console.log("FileSystem API is not supported");
return;
}
requestFileSystem(
window.TEMPORARY,
1024 * 1024,
function (fileSystem) {
var textFile = {
name: "test.txt",
content: "hello, world",
contentType: "text/plain"
},
imageFile = {
name: "test.png",
content: "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
contentType: "image/png",
contentBytes: function () {
var byteCharacters = atob(this.content),
byteArrays = [], offset, sliceSize = 512, slice, byteNumbers, i, byteArray;
for (offset = 0; offset < byteCharacters.length; offset += sliceSize) {
slice = byteCharacters.slice(offset, offset + sliceSize);
byteNumbers = new Array(slice.length);
for (i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return byteArrays;
}
};
// Create and drop text file
fileSystem.root.getFile(
textFile.name,
{ create: true },
function (fileEntry) {
fileEntry.createWriter(
function (fileWriter) {
fileWriter.onwriteend = function(e) {
console.log("Write completed (" + textFile.name + ")");
fileSystem.root.getFile(
textFile.name,
{},
function (fileEntry) {
fileEntry.file(
function (file) {
dropFile(file);
},
fileErrorHandler
);
},
fileErrorHandler
);
};
fileWriter.onerror = function(e) {
console.log("Write failed (" + textFile.name + "): " + e.toString());
};
fileWriter.write(new Blob([ textFile.content ], { type: textFile.contentType }));
},
fileErrorHandler
);
},
fileErrorHandler
);
// Create and drop image file
fileSystem.root.getFile(
imageFile.name,
{ create: true },
function (fileEntry) {
fileEntry.createWriter(
function (fileWriter) {
fileWriter.onwriteend = function(e) {
console.log("Write completed (" + imageFile.name + ")");
fileSystem.root.getFile(
imageFile.name,
{},
function (fileEntry) {
fileEntry.file(
function (file) {
dropFile(file);
},
fileErrorHandler
);
},
fileErrorHandler
);
};
fileWriter.onerror = function(e) {
console.log("Write failed (" + imageFile.name + "): " + e.toString());
};
fileWriter.write(new Blob(imageFile.contentBytes(), { type: imageFile.contentType }));
},
fileErrorHandler
);
},
fileErrorHandler
);
},
fileErrorHandler
);
})();
The content of the auto-generated text file is given as a string, and the content of the image file is given as a base64-encoded string. These are easy to change. For example, the test text file can contain not just plain text, but HTML too. In this case, don't forget to change the textFile.contentType field from text/plain to text/html, and to add this content type to the acceptedTypes array and to the previewfile function. The test image can also be changed easily, you just need an image-to-base64 converter.
I had to extend the drop handler code to handle text files in addition to images:
acceptedTypes = {
'text/plain': true, // <-- I added this
'image/png': true,
'image/jpeg': true,
'image/gif': true
},
...
function previewfile(file) {
if (tests.filereader === true && acceptedTypes[file.type] === true) {
var reader = new FileReader();
if (file.type === 'text/plain') { // <-- I added this branch
reader.onload = function (event) {
var p = document.createElement("p");
p.innerText = event.target.result;
holder.appendChild(p);
}
reader.readAsText(file);
} else {
reader.onload = function (event) {
var image = new Image();
image.src = event.target.result;
image.width = 250; // a fake resize
holder.appendChild(image);
};
reader.readAsDataURL(file);
}
} else {
holder.innerHTML += '<p>Uploaded ' + file.name + ', ' + file.size + ' B, ' + file.type;
console.log(file);
}
}
Note that after loading the jsfiddle, the autogenerated files can be listed for debugging purposes:
Result
The screenshot shows that the simulated drop inserted the content of the autogenerated text file before the autogenerated image. The HTML code of the DND-target <div> looks like this:
<div id="holder" class="">
<p>hello, world</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggkFBTzlUWEwwWTRPSHdBQUFBQkpSVTVFcmtKZ2dnPT0=" width="250">
</div>
#kol answer is a good way to get rid of the drag and drop event but I
still have to manually select a file from my computer. This is the bit
I am interested in simulating. Is there a way to create a file
variable programatically? -caiocpricci2
Try this
function createFile() {
var create = ["<!doctype html><div>file</div>"];
var blob = new Blob([create], {"type" : "text/html"});
return ( blob.size > 0 ? blob : "file creation error" )
};
createFile()
I'm maintaining an existing app (cannot change server-side code, only client-side js) and was asked to add the capability to upload files from clipboard.
At present moment there is a standard file-selection form
<form id="file_form" name="file_form" enctype="multipart/form-data" method="post" action="/upload">
<label for="selector">
File Location
</label>
<input type="file" id="selector" name="selector" title="Choose file">
<input type="submit" id="submit" value="ОК">
<input type="button" id="cancel" onclick="cancel()" value="Cancel">
</form>
So what I need is a way to fill input#selector with the file from clipboard. I don't need progress bars, preview, image crop, etc... as simple as possible, but remember that I cannot change anything on the server.
Is there solution that would work in Chrome, FF and IE?
Most things I googled were either full of excessive functionality and required a lot of external js or server-side code changes or didn't work in anything other than Chrome...
Your can refere to this site: https://www.pastefile.com
the core code paste.js such as
(function ($) {
'use strict';
var readImagesFromEditable = function (element, callback) {
setTimeout(function () {
$(element).find('img').each(function (i, img) {
getImageData(img.src, callback);
});
}, 1);
};
var getImageData = function (src, callback) {
var loader = new Image();
loader.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = loader.width;
canvas.height = loader.height;
var context = canvas.getContext('2d');
context.drawImage(loader, 0, 0, canvas.width, canvas.height);
try {
var dataURL = canvas.toDataURL('image/png');
if (dataURL) {
callback({
dataURL: dataURL
});
}
} catch (err) {}
};
loader.src = src;
};
$.paste = function () {
var handler = function (e) {
var pasteBoard = $(this);
var trigger = function (event, data) {
if (arguments.length > 1)
return pasteBoard.trigger(event, data);
return function (data) {
return pasteBoard.trigger(event, data);
};
};
var clipboardData, text;
if (e.originalEvent) {
clipboardData = e.originalEvent.clipboardData;
if (clipboardData.items) {
var items = clipboardData.items;
// Copy-paste on OSX
if (items.length === 2) {
// If a user pastes image data, there are 2 items: the file name (at index 0) and the file (at index 1)
// but if the user pastes plain text or HTML, /index 0/ is the data with markup and /index 1/ is the plain, unadorned text.
if (items[0].kind === 'string' && items[1].kind === 'file' && items[1].type.match(/^image/)) {
// If the user copied a file from Finder (OS X) and pasted it in the window, this is the result. This is also the result if a user takes a screenshot and pastes it.
// Unfortunately, you can't copy & paste a file from the desktop. It just returns the file's icon image data & filename (on OS X).
} else if (items[0].kind === 'string' && items[1].kind === 'string') {
// Get the plain text
items[0].getAsString(trigger('pasteText'));
}
} else {
var item = items[0];
if (!item) return;
if (item.type.match(/^image\//)) {
trigger('pasteImage', item.getAsFile());
} else if (item.type === 'text/plain') {
item.getAsString(trigger('pasteText'));
}
}
} else {
if (clipboardData.types.length) {
text = clipboardData.getData('Text');
trigger('pasteText', text);
} else {
readImagesFromEditable(pasteBoard, trigger('pasteImage'));
}
}
} else if ((clipboardData = window.clipboardData)) {
text = clipboardData.getData('Text');
if (text) {
trigger('pasteText', text);
} else {
readImagesFromEditable(pasteBoard, trigger('pasteImage'));
}
}
setTimeout(function() {
pasteBoard.empty();
}, 1);
};
return $('<div/>')
.prop('contentEditable', true)
.css({
width: 1,
height: 1,
position: 'fixed',
left: -10000,
overflow: 'hidden'
})
.on('paste', handler);
};
})(jQuery);
it is not so hard to understand.
I'm trying to make a file uploader for my blog system which would just let users drop files in it and it would automatically upload them to server. Strangely (for me), console.log outputs dataArray before it gets filled, while calling it after a timeout outputs it correctly.
For example, if I drop 4 files on my drop area, I would get this:
[]
[file1, file2, file3, file4]
Then I drop 4 more files without uploading/refreshing and I get:
[file1, file2, file3, file4]
[file1, file2, file3, file4, file5, file6, file7, file8]
So my script is working asynchronously for some reason? Can somebody tell me what I'm doing wrong here?
var dataArray = [];
$('.dropArea').bind(
{
drop: function(e)
{
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
$.each(files, function(index, file)
{
var fileReader = new FileReader();
fileReader.onload = (function(file)
{
return function(e)
{
var image = this.result;
dataArray.push({
name : file.name,
value: image
});
}
})(files[index]);
fileReader.readAsDataURL(file);
});
console.log(dataArray);
setTimeout(function() { console.log(dataArray) }, 1000);
},
});
you should console.log() in the callback.
fileReader.onload = (function(file)
{
return function(e)
{
var image = this.result;
dataArray.push({
name : file.name,
value: image
});
console.log(dataArray);
}
})(files[index]);
if you call it outside of the callback, it will run immediately after the image is starting to load instead of when the images are finished loading.
I've quickly drawn an image for clarification:
You can solve this by comparing the amount of images that is dropped and the amount of images that finished loading, like so:
var dataArray = [];
var count = 0; // amount of files dropped
var ready = 0; // amount of files finished loading
$('.dropArea').bind(
{
drop: function(e)
{
...
$.each(files, function(index, file)
{
count++; // we start handling a file here so we increment
...
fileReader.onload = (function(file)
{
return function(e)
{
...
ready++; // this image has finished loading so we increment
}
})(files[index]);
});
setTimeout(function() {
if(ready === count) {
// all images have been loaded
console.log(dataArray);
}
}, 1000);
},
});
Just as #Tim S. answered, onload event is fired when file starts loading, and it can take some time depending on file size. Here is how I solved discovering if all files are loaded.
drop: function(e)
{
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
console.log(files.length + " queued for upload");
var counter = 0;
var loaded = 0;
$.each(files, function(index, file)
{
counter++;
console.log("File #"+counter+" loading started.")
if (!files[index].type.match('image.*'))
{
$('.dropArea').html(message.error.onlyImage);
errorMessage++;
}
var fileReader = new FileReader();
fileReader.onload = (function(file, count)
{
return function(e)
{
var image = this.result;
dataArray.push({
name : file.name,
value: image
});
loaded++;
console.log("File #"+count+" loaded.");
if (loaded == files.length) {
console.log("Loading finished!");
}
}
})(files[index], counter);
fileReader.readAsDataURL(file);
});
}
And really, console log output looks like this:
4 queued for upload 9a840a0_part_2_dragndrop_2.js:25
File #1 loading started. 9a840a0_part_2_dragndrop_2.js:32
File #2 loading started. 9a840a0_part_2_dragndrop_2.js:32
File #3 loading started. 9a840a0_part_2_dragndrop_2.js:32
File #4 loading started. 9a840a0_part_2_dragndrop_2.js:32
File #2 loaded. 9a840a0_part_2_dragndrop_2.js:52
File #4 loaded. 9a840a0_part_2_dragndrop_2.js:52
File #3 loaded. 9a840a0_part_2_dragndrop_2.js:52
File #1 loaded. 9a840a0_part_2_dragndrop_2.js:52
Loading finished!
As can be seen, file #2 was loaded first because it is the smallest one, while #1 loaded last while it is the largest.