I am looking to retrieve key/value pairs from Amazon S3 and then store some of the obtained information in Firebase to build a file system in AngularJS.
This question focuses only on storing in Firebase.
It is essential to be able to create an unlimited number of folders and files within those folders. However, my current code structure requires adding IF/ELSE statements every time I want to add a subfolder. I need a more dynamic solution.
In AngularJS, I have developed a script that fetches Key/Value pairs from Amazon S3 and stores them in Firebase based on the returned Key.
To explain the process, I have divided the code into sections but you can view the entire block on this jsFiddle link: https://jsfiddle.net/Lcr5p6qm/2/
Firstly, I extract the key/value pairs from Amazon using a service.
storageService.getBucketDirectory({
'bucket' : bucket,
'directory' : 'code/'
}).then(function(code){
Secondly, I remove the existing tree from Firebase and loop through each key/value pair from S3.
projectRef.child('code').remove();
angular.forEach(code, function(value, key){
var item = value.Key.replace('code/', '');
Thirdly, if the pair represents the base level, we handle it accordingly by altering the key to define a type and name for the file.
if(!item.includes('/'))
{
var name = value.Key.replace('code/', '').replace('/', '').replace('+', ' ');
if(name.indexOf('.') == 0)
{
var type = null;
}
else
{
var type = value.Key.substr(value.Key.indexOf('.') + 1)
}
projectRef.child('code').child('/').push({
'Name' : name,
'Type' : type,
'Key' : value.Key,
'LastModified' : value.LastModified,
'Size' : value.Size
})
}
Next, we handle pairs that are not at the base level and may contain subfolders in the key structure. We modify the key and store it accordingly with or without subfolders.
else {
var folder = item.substr(0, item.indexOf('/'));
if ((item.replace(folder + '/', '')).includes('/')) {
var subfolder = item.replace(folder + '/',');
subfolder = subfolder.substr(0, subfolder.indexOf('/'));
var name = value.Key.replace('code/','').replace(folder+'/','').replace(subfolder+'/','').replace('+','');
if (name.indexOf('.') === 0) {
var type = null;
} else {
var type = value.Key.substr(value.Key.lastIndexOf('.') + 1);
}
projectRef.child('code').child(folder).child(subfolder).push({
'Name': name,
'Type': type,
'Key': value.Key,
'LastModified': value.LastModified,
'Size': value.Size
})
}
else {
//store in folder directly
var name = value.Key.replace('code/','').replace(folder+'/','').replace('+','');
if (name.indexOf('.') === 0) {
var type = null;
} else {
var type = value.Key.substr(value.Key.indexOf('.')+1);
}
projectRef.child('code').child(folder).push({
'Name': name,
'Type': type,
'Key': value.Key,
'LastModified': value.LastModified,
'Size': value.Size
})
}
}
Ultimately, this results in something like the following folder structure.
- css
- main.css
- normalize.css
- doc
- TOC.md
- css.md
- extend.md
- faq.md
- html.md
- js.md
- misc.md
- usage.md
- img
- .gitignore
- js
- main.js
- plugins.js
- vendor
- jquery-1.12.0.min.js
- modernizr-2.8.3.min.js
While this structure works, it has limitations when more than second-level directories are required. The issue arises when there is another folder within the /js/vendor/ folder as it breaks the system by incorporating the subfolder name into the file properties. I need a way to support an infinite number of sub-folders.
UPDATE
I have refined the code in my JSFiddle under "Second Attempt". Although it gets closer to the desired functionality, it still does not fully accommodate additional subfolders.
Bonus: What about empty folders?