Skip to content

Commit

Permalink
Fix errors enumerating ZIM archives in directory #1220 (#1219)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jaifroid
Jaifroid authored Mar 2, 2024
1 parent 41a448f commit 7c65c58
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 50 deletions.
31 changes: 13 additions & 18 deletions www/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1528,24 +1528,19 @@ function displayFileSelect () {
}
if (params.isWebkitDirApiSupported) {
// Handles Folder selection when webkitdirectory is supported but showDirectoryPicker is not
folderSelect.addEventListener('change', async function (e) {
folderSelect.addEventListener('change', function (e) {
e.preventDefault();
const filenames = [];

const previousZimFile = []
const lastFilename = settingsStore.getItem('previousZimFileName') ?? '';
const filenameWithoutExtension = lastFilename.replace(/\.zim\w\w$/i, '');
const regex = new RegExp(`\\${filenameWithoutExtension}.zim\\w\\w$`, 'i');

for (const file of e.target.files) {
filenames.push(file.name);
if (regex.test(file.name) || file.name === lastFilename) previousZimFile.push(file);
var fileList = e.target.files;
if (fileList) {
var foundFiles = abstractFilesystemAccess.selectDirectoryFromPickerViaWebkit(fileList);
var selectedZimfile = foundFiles.selectedFile;
// This ensures the selected files are stored for use during this session (webKitFileList is a global object)
webKitFileList = foundFiles.files;
// This will load the old file if the selected folder contains the same file
if (selectedZimfile.length !== 0) {
setLocalArchiveFromFileList(selectedZimfile);
}
}
webKitFileList = e.target.files;
settingsStore.setItem('zimFilenames', filenames.join('|'), Infinity);
// will load the old file if the selected folder contains the same file
if (previousZimFile.length !== 0) setLocalArchiveFromFileList(previousZimFile);
await abstractFilesystemAccess.updateZimDropdownOptions(filenames, previousZimFile.length !== 0 ? lastFilename : '');
})
}

Expand Down Expand Up @@ -1575,11 +1570,11 @@ function displayFileSelect () {
*/
function useLegacyFilePicker () {
// Fallbacks to simple file input with multi file selection
archiveFiles.addEventListener('change', async function (e) {
archiveFiles.addEventListener('change', function (e) {
if (params.isWebkitDirApiSupported || params.isFileSystemApiSupported) {
const activeFilename = e.target.files[0].name;
settingsStore.setItem('zimFilenames', [activeFilename].join('|'), Infinity);
await abstractFilesystemAccess.updateZimDropdownOptions([activeFilename], activeFilename);
abstractFilesystemAccess.updateZimDropdownOptions([activeFilename], activeFilename);
}
setLocalArchiveFromFileSelect();
});
Expand Down
97 changes: 65 additions & 32 deletions www/js/lib/abstractFilesystemAccess.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/**
/**
* abstractFilesystemAccess.js: Abstraction layer for file access.
* This is currently only implemented for FirefoxOS and Standard browser (using File System Access API), but could be extended to
* Cordova, Electron or other ways to directly browse and read files from the
Expand Down Expand Up @@ -96,9 +96,9 @@ StorageFirefoxOS.prototype.enumerate = function (path) {
/**
* @param {Array<string>} files All the File names to be shown in the dropdown
* @param {string} selectedFile The name of the file to be selected in the dropdown
* @returns {Promise<Array<string>>} Array of unique filenames (if a split zim is considered a single file)
* @returns {Array<string>} Array of unique filenames (if a split zim is considered a single file)
*/
async function updateZimDropdownOptions (files, selectedFile) {
function updateZimDropdownOptions (files, selectedFile) {
const isFireFoxOsNativeFileApiAvailable = typeof navigator.getDeviceStorages === 'function';
// This will make sure that there is no race around condition when platform is firefox os
// as other function will handle the dropdown UI updates
Expand All @@ -113,18 +113,17 @@ async function updateZimDropdownOptions (files, selectedFile) {
placeholderOption.disabled = true;
select.appendChild(placeholderOption);
};

// Create a new option for each fileName or for the zimaa part of a split archive
files.forEach((fileName) => {
if (fileName.endsWith('.zim') || fileName.endsWith('.zimaa')) {
if (/\.zim(aa)?$/i.test(fileName)) {
options.push(new Option(fileName, fileName));
select.appendChild(new Option(fileName, fileName));
count++;
}
});
document.getElementById('archiveList').value = selectedFile;
select.value = selectedFile;
document.getElementById('numberOfFilesCount').style.display = '';
document.getElementById('fileCountDisplay').style.display = '';

document.getElementById('numberOfFilesCount').innerText = count.toString();
document.getElementById('fileCountDisplay').innerText = translateUI.t('configure-select-file-numbers');
}
Expand All @@ -137,21 +136,23 @@ async function selectDirectoryFromPickerViaFileSystemApi () {
const handle = await window.showDirectoryPicker();
const fileNames = [];
const previousZimFile = []

const lastZimNameWithoutExtension = (settingsStore.getItem('previousZimFileName') ?? '').replace(/\.zim\w\w$/i, '');
const regex = new RegExp(`\\${lastZimNameWithoutExtension}.zim\\w\\w$`, 'i');

const lastZimName = settingsStore.getItem('previousZimFileName') || '';
const lastZimNameWithoutExtension = lastZimName.replace(/\.zim\w?\w?$/i, '');
// Iterate over all files in directory, store an array of ZIM files, and get the previously selectee ZIM file if it exists
for await (const entry of handle.values()) {
fileNames.push(entry.name);
if (regex.test(entry.name) || entry.name === (settingsStore.getItem('previousZimFileName') ?? '')) previousZimFile.push(await entry.getFile());
if (entry.kind === 'file' && /\.zim\w?\w?$/i.test(entry.name)) {
fileNames.push(entry.name);
if (!entry.name.indexOf(lastZimNameWithoutExtension)) {
previousZimFile.push(await entry.getFile());
}
}
}

settingsStore.setItem('zimFilenames', fileNames.join('|'), Infinity);
updateZimDropdownOptions(fileNames, previousZimFile.length !== 0 ? settingsStore.getItem('previousZimFileName') : '');
updateZimDropdownOptions(fileNames, previousZimFile.length !== 0 ? lastZimName : '');
cache.idxDB('zimFiles', handle, function () {
// save file in DB
});
return previousZimFile;
return previousZimFile;
}

/**
Expand Down Expand Up @@ -183,15 +184,15 @@ function getSelectedZimFromCache (selectedFilename) {
reject(new Error('No file or directory selected'));
}
// Left it here for debugging purposes as its sometimes asking for permission even when its granted
console.debug('FileHandle and Permission', fileOrDirHandle, await fileOrDirHandle.queryPermission())
// console.debug('FileHandle and Permission', fileOrDirHandle, await fileOrDirHandle.queryPermission())
if ((await fileOrDirHandle.queryPermission()) !== 'granted') await fileOrDirHandle.requestPermission();

if (fileOrDirHandle.kind === 'directory') {
const files = [];
for await (const entry of fileOrDirHandle.values()) {
const filenameWithoutExtension = selectedFilename.replace(/\.zim\w\w$/i, '');
const regex = new RegExp(`\\${filenameWithoutExtension}.zim\\w\\w$`, 'i');
if (regex.test(entry.name) || entry.name === selectedFilename) {
const filenameWithoutExtension = selectedFilename.replace(/\.zim\w?\w?$/i, '');
// const regex = new RegExp(`\\${filenameWithoutExtension}.zim\\w\\w$`, 'i');
if (!entry.name.indexOf(filenameWithoutExtension)) {
files.push(await entry.getFile());
}
}
Expand All @@ -210,17 +211,17 @@ function getSelectedZimFromCache (selectedFilename) {

/**
* Gets the selected zim file from the WebkitFileList
* @param {WebkitFileList} webKitFileList The WebkitFileList to get the selected file from
*
* @param {WebkitFileList} fileList The WebkitFileList to get the selected file from
* @param {string} filename The name of the file to get back from webkitFileList
* @returns {Array<File>} The selected Files Object from webkitFileList
*/
function getSelectedZimFromWebkitList (webKitFileList, filename) {
const filenameWithoutExtension = filename.replace(/\.zim\w\w$/i, '');

const regex = new RegExp(`\\${filenameWithoutExtension}.zim\\w\\w$`, 'i');
function getSelectedZimFromWebkitList (fileList, filename) {
const filenameWithoutExtension = filename.replace(/\.zim\w?\w?$/i, '');
const files = [];
for (const file of webKitFileList) {
if (regex.test(file.name) || file.name === filename) {
for (const file of fileList) {
// If the file.name begins with the filenameWithoutExtension, then it matches (may match mutliple split ZIM files)
if (!file.name.indexOf(filenameWithoutExtension)) {
files.push(file);
}
}
Expand All @@ -241,6 +242,36 @@ function loadPreviousZimFile () {
}, 200);
}

/**
* Handles selecting a directory from the webkitdirectory picker, setting the UI and storing the selected files
*
* @param {WebkitFileList} fileList The list returned from the webkitdirectory picker
* @returns An object containing all the ZIM files in the directory and the previously selected ZIM fileset if available
*/
function selectDirectoryFromPickerViaWebkit (fileList) {
const zimFiles = [];
const filenames = [];
const previousZimFile = []
const lastFilename = settingsStore.getItem('previousZimFileName') || '';
const filenameWithoutExtension = lastFilename.replace(/\.zim\w?\w?$/i, '');
for (const file of fileList) {
// Only add ZIM files in top directory to the filenames array. To do this, we must exclude ZIM files that contain more than one '/' in their path.
// This is because most browsers using this API will return the full path of the file including the directory it is in (but Chromium < 72 will not return the full path, so
// in that browser, we will get some files that are in subdirectories). See MDN webkitdirectory documentation for more information.
if (/^[^/]+\/[^/]+\.zim\w?\w?$/i.test(file.webkitRelativePath)) {
zimFiles.push(file);
filenames.push(file.name);
// If the file.name begins with the filenameWithoutExtension...
if (filenameWithoutExtension && !file.name.indexOf(filenameWithoutExtension)) {
previousZimFile.push(file);
}
}
}
settingsStore.setItem('zimFilenames', filenames.join('|'), Infinity);
updateZimDropdownOptions(filenames, previousZimFile.length ? lastFilename : '');
return { files: zimFiles, selectedFile: previousZimFile };
}

/**
* Handles the folder drop event via File System API
* @param {DragEvent} packet The DragEvent packet
Expand Down Expand Up @@ -282,19 +313,20 @@ async function handleFolderOrFileDropViaFileSystemAPI (packet) {
*/
async function handleFolderOrFileDropViaWebkit (event) {
var dt = event.dataTransfer;

var entry = dt.items[0].webkitGetAsEntry();
if (entry.isFile) {
settingsStore.setItem('zimFilenames', [entry.name].join('|'), Infinity);
await updateZimDropdownOptions([entry.name], entry.name);
updateZimDropdownOptions([entry.name], entry.name);
return { loadZim: true, files: [entry.file] };
} else if (entry.isDirectory) {
var reader = entry.createReader();
const files = await getFilesFromReader(reader);
const fileNames = [];
files.forEach((file) => fileNames.push(file.name));
files.forEach(function (file) {
fileNames.push(file.name)
});
settingsStore.setItem('zimFilenames', fileNames.join('|'), Infinity);
await updateZimDropdownOptions(fileNames, '');
updateZimDropdownOptions(fileNames, '');
return { loadZim: false, files: files };
}
}
Expand Down Expand Up @@ -336,5 +368,6 @@ export default {
loadPreviousZimFile: loadPreviousZimFile,
handleFolderOrFileDropViaWebkit: handleFolderOrFileDropViaWebkit,
handleFolderOrFileDropViaFileSystemAPI: handleFolderOrFileDropViaFileSystemAPI,
getSelectedZimFromWebkitList: getSelectedZimFromWebkitList
getSelectedZimFromWebkitList: getSelectedZimFromWebkitList,
selectDirectoryFromPickerViaWebkit: selectDirectoryFromPickerViaWebkit
};

0 comments on commit 7c65c58

Please sign in to comment.