Я пытаюсь реализовать эту функцию на моем ионном
Создать браузер файлов с помощью Ionic Framework
У меня есть файл Factory:
.factory("fileFactory", ['$q', function($q) {
var File = function() { };
File.prototype = {
getParentDirectory: function(path) {
var deferred = $q.defer();
window.resolveLocalFileSystemURI(path, function(fileSystem) {
fileSystem.getParent(function(result) {
deferred.resolve(result);
}, function(error) {
deferred.reject(error);
});
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
},
getEntriesAtRoot: function() {
var deferred = $q.defer();
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
var directoryReader = fileSystem.root.createReader();
directoryReader.readEntries(function(entries) {
deferred.resolve(entries);
}, function(error) {
deferred.reject(error);
});
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
},
getEntries: function(path) {
var deferred = $q.defer();
window.resolveLocalFileSystemURI(path, function(fileSystem) {
var directoryReader = fileSystem.createReader();
directoryReader.readEntries(function(entries) {
deferred.resolve(entries);
}, function(error) {
deferred.reject(error);
});
}, function(error) {
deferred.reject(error);
});
return deferred.promise;
}
};
return File;
}]);
И в моем .run я получаю каталог:
invoicehub.run(['$ionicPlatform', 'fileFactory', '$rootScope', function($ionicPlatform, fileFactory, $rootScope) {
$ionicPlatform.ready(function() {
//===============================//
// Check if on a device/emulator //
//===============================//
if(window.cordova) {
var fs = new fileFactory();
//===========================//
// Retrieve the system files //
//===========================//
fs.getEntriesAtRoot().then(function(result) {
$rootScope.files = result;
}, function(error) {
console.error(error);
});
}
});
}]);
Я запускаю файловый браузер через модальный режим:
<ion-modal-view cache-view="false">
<ion-header>
<ion-nav-bar align-title="center">
<ion-nav-buttons side="left"><button class="button button-icon ion-close-round" ng-click="closeModal();"></button></ion-nav-buttons>
<ion-nav-title>File Browser</ion-nav-title>
</ion-nav-bar>
</ion-header>
<ion-content class="has-header">
<div class="list">
<div ng-repeat="file in files | orderBy:'isFile'">
<a class="item" ng-class="(!file.isImage) ? 'item-icon-left' : ''" ng-click="getContents(file)">
<i class="icon ion-folder ng-hide" ng-show="file.isDirectory"></i>
<i class="icon ion-document ng-hide" ng-show="file.isFile && !file.isImage"></i>
<div class="file-row">
<img class="ng-hide" ng-show="file.isImage" width="75px" height="75px" src="{{file.nativeURL}}">
<p ng-bind="file.name"></p>
</div>
</a>
</div>
</div>
</ion-content>
</ion-modal-view>
Вот getContents:
//============================================//
// Retrieve the contents of the selected path //
//============================================//
$scope.getContents = function(file)
{
var fs = new fileFactory();
//=============================================//
// Check if the selected item is a file or not //
//=============================================//
if(!file.isFile)
{
var path = file.nativeURL;
//========================================//
// Retrieve the contents from a directory //
//========================================//
fs.getEntries(path).then(function(result)
{
//===================================//
// Check each entry of the directory //
//===================================//
for(var i = 0; i < result.length; i++)
{
//=================================//
// Check if entry is a file or not //
//=================================//
if(result[i].isFile)
{
//===================================================//
// If it is a file then check if it is an image file //
//===================================================//
if((result[i].name.split(".").pop() == "png") || (result[i].name.split(".").pop() == "jpg")
|| (result[i].name.split(".").pop() == "jpeg") || (result[i].name.split(".").pop() == "bmp")
|| (result[i].name.split(".").pop() == "gif"))
{
//===================================================================================//
// This will be used to determine whether to show the <img> tag on file_browser.html //
//===================================================================================//
result[i].isImage = true;
}
}
}
//=======================================//
// Set the result to an accessible scope //
//=======================================//
$scope.files = result;
$scope.files.unshift({name: "..."});
fs.getParentDirectory(path).then(function(result) {
//===============================================//
// Set the default value of the parent directory //
//===============================================//
result.name = "...";
$scope.files[0] = result;
});
});
}
else
{
//upload file
}
}
Первоначально это не работало, когда я впервые работал над этим, но затем я добавил эти два в мой config.xml
<preference name="AndroidPersistentFileLocation" value="Internal" />
<preference name="AndroidPersistentFileLocation" value="Compatibility" />
, который затем позволил ему работать.Я работал над этим вчера, и файловый браузер просто перестал полностью работать.Не найдено ни одного файла или каталога.$rootScope.files
отображается как пустой массив.
Я также добавил это к своему config.xml
, но это не имело значения:
<config-file parent="/manifest" target="AndroidManifest.xml">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
</config-file>
Иногда это работает, но яне уверен почему.Я тестирую на своем устройстве Android, поэтому я бы выполнил ionic cordova run android
, чтобы запустить его на моем устройстве, если оно не работает, я удаляю приложение и пытаюсь снова.Я делаю комбинацию cordova clean
, ionic cordova build android
, и иногда она как-то работает, но я не знаю почему.