Skip to content
This repository has been archived by the owner on Jun 27, 2019. It is now read-only.

V1 - Import files to Dev-App #116

Closed
wants to merge 3 commits into from
Closed

V1 - Import files to Dev-App #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a0aafe
Added 'multer': middleware to handle form-data
Jun 1, 2016
56cd1ee
Added editor side support for Importing Files
Jun 1, 2016
f451949
Added server side support for Importing Files
Jun 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions client/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,43 @@ font-family: clearsans-light;
padding-left: 10px;
border-radius: 20px;
}
.inputFileControls {
background-color: #262a2e;
border: 0;
color: #8c8c8c;
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputFileControls + label {
font-size: 14px !important;
font-weight: normal;
font-family: clearsans !important;
color: #8c8c8c;
background-color: white;
display: inline-block;
margin-right: 10px;
padding: .4em 1em;
border-radius: 20px;
cursor: pointer;
text-align: center;
}
.list-item {
font-size: 14px !important;
width: auto;
font-weight: normal;
font-family: clearsans !important;
background-color: #262a2e;
margin-right: 10px;
padding: .3em 0.5em;
list-style-type: none;
border-radius: 13px;
color: #8c8c8c;
text-align: center;
}
/* Overwrite jquery ui class*/
.ui-autocomplete-input, .ui-corner-right {
background: none !important;
Expand Down
71 changes: 71 additions & 0 deletions client/js/controllers/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -831,6 +831,74 @@
}
};

$scope.filesChanged = function(elm) {
$scope.files = elm.files;
$scope.$apply();
}

$scope.importFile = function () {
var file = filePath;
if (file) {
if (isLeaf) {
var cached = file.split("/");
cached.pop();
file = cached.join("/");
}
if($scope.folder !== 'demo') {
var dialog = $('<div></div>').
html($compile('<form ng-submit="Upload()"><input' +
' type="file" id="inputFile" class="inputFileControls"' +
' onChange="angular.element(this).scope().filesChanged(this)"/>'+
' <label for="inputFile">Select Files</label>'+
' <li class="list-item" ng-repeat="file in files">{{file.name}}</li>'+
' </form>')($scope)).
dialog({
title: "Choose file to import",
autoOpen: false,
modal: true,
position: { at: "center top"},
height: 225,
width: 300,
show: { effect: "fade", duration: 300 },
hide: { effect: "fade", duration: 300 },
resizable: 'disable',
buttons: {
"Upload": function() {
var formdata = new FormData();
var data=String(file);
formdata.append("upload_path", data);
angular.forEach($scope.files,function(file) {
formdata.append('file', file)
});
$http.post('/api/file/upload',formdata, {
transformRequest: angular.identity,
headers:{'Content-Type':undefined}
})
.success(function(d) {
console.log(d)
$scope.refreshTree();
});
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function(ev, ui) {
$(this).dialog("close");
}
});
dialog.dialog("open");
}else{
console.log("Error: Upload to demo folder not allowed");
alert("Error: Upload to demo folder Forbidden!")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To me the best message here would be:
"Error: Upload to demo folder is not allowed"

Also, you can remove the console.log here since we already have the alert

}
} else {
console.log("Error: repository not selected");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can remove this console.log

alert("Folder destination must be selected!");
}
};

$scope.remove = function () {
if (filePath) {
var file_name = filePath.split("/").pop();
Expand Down Expand Up @@ -940,6 +1008,9 @@
case "file.save":
$scope.saveFileManually();
break;
case "file.importfile":
$scope.importFile();
break;
case "file.remove":
$scope.remove();
break;
Expand Down
12 changes: 12 additions & 0 deletions server/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,18 @@
}
});

router.post('/api/file/upload', function(req, res) {
upload(req,res,function(err) {
if(err) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything "all-together-here"

Try spliting things here:

upload(req, res, function(err) {
            if (err) {

res.status(400).send("File Upload Failed!");
return;
}
else {
res.send("File Uploaded Successfully!");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put like the rest of the code was done by putting the } together with the else.

} else {

}
})
});

router.post('/api/git/repo/delete/file', function (req, res) {
var file_path = req.body.params.file_path;
if (!file_path) {
Expand Down
12 changes: 12 additions & 0 deletions server/tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
module.exports = function () {
var fs = require('fs');
var path = require('path');
var multer = require('multer');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The lib multer has to be added in package.json, to do it run the command

npm install multer --save where --save means to add automatically multer into package.json file.

require('./configuration.js')();

this.home_dir = function(user) {
Expand Down Expand Up @@ -247,6 +248,17 @@ module.exports = function () {
}
};

this.storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, String(req.body.upload_path))
},
filename: function(req, file, callback) {
callback(null, file.originalname)
}
});

this.upload = multer({storage: storage }).single('file');

this.getServerName = function(repo_url) {
var url_array = repo_url.split("/");
var name = url_array.pop();
Expand Down
5 changes: 5 additions & 0 deletions server/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,11 @@
New File
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="ctrl.menuAction('file.importfile', $event)">
Import File
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button ng-disabled="!shouldSave" ng-click="ctrl.menuAction('file.save', $event)">
Expand Down