Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Update ng-file-upload to 9.0.8 and add possibility to use upload file field in demo #741

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[WIP] Update ng-file-upload to 9.0.8 and add possibility to use upload file field in demo #741

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
2c15ad7
Exclude angular from ng-admin-only packages + introduce ng-admin-vend…
jeromemacias Oct 19, 2015
4c1cb4d
Use ng-admin-only and ng-admin-vendors-* packages in blog demo
jeromemacias Oct 19, 2015
5fd8baf
Update ng-file-upload to 9.0.8 and add possibility to use upload file…
jeromemacias Oct 18, 2015
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
2 changes: 1 addition & 1 deletion .jshintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"regexp": true,
"undef": true,
"unused": true,
"strict": true,
"strict": false,
"trailing": true,
"smarttabs": true,
"globals": {
Expand Down
2 changes: 2 additions & 0 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ install:
./node_modules/protractor/bin/webdriver-manager update

run:
@cp node_modules/angular/angular.min.js examples/blog/build/angular.min.js
@cp node_modules/sinon/pkg/sinon-server-1.14.1.js examples/blog/build/sinon-server.js
@cp node_modules/angular/angular.js examples/blog/build/angular.js
@./node_modules/webpack-dev-server/bin/webpack-dev-server.js --colors --devtool cheap-module-inline-source-map --content-base examples/blog --port 8000

build:
Expand Down
6 changes: 4 additions & 2 deletions examples/blog/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,8 +281,10 @@
nga.field('name'),
nga.field('published', 'boolean').validation({
required: true // as this boolean is required, ng-admin will use a checkbox instead of a dropdown
})
]);
}),
nga.field('image', 'file')
.uploadInformation({ url: 'http://localhost:3333/upload' })
])

tag.showView()
.fields([
Expand Down
15 changes: 7 additions & 8 deletions examples/blog/fakerest-init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,6 @@
restServer.init(apiData);
restServer.toggleLogging(); // logging is off by default, enable it

// use sinon.js to monkey-patch XmlHttpRequest
sinon.FakeXMLHttpRequest.useFilters = true;
sinon.FakeXMLHttpRequest.addFilter(function (method, url) {
// Do not catch webpack sync, config.js transformation but catch /upload in test env
return url.indexOf('/socket.io/') !== -1 || url.indexOf('config.js') !== -1
|| (!testEnv && url.indexOf('/upload') !== -1);
});

var server = sinon.fakeServer.create();
server.autoRespond = true;
server.autoRespondAfter = 0; // answer immediately
Expand All @@ -28,4 +20,11 @@
}
});
}

// use sinon.js to monkey-patch XmlHttpRequest
sinon.FakeXMLHttpRequest.useFilters = true;
sinon.FakeXMLHttpRequest.addFilter(function (method, url) {
// do not fake other urls than http://localhost:3000/*
return url.indexOf(restServer.baseUrl) === -1;
});
}());
5 changes: 4 additions & 1 deletion examples/blog/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@
</head>
<body ng-app="myApp" ng-strict-di>
<div ui-view></div>
<script src="http://localhost:8000/build/angular.min.js" type="text/javascript"></script>
<script src="http://localhost:8000/build/ng-admin-vendors-js.min.js" type="text/javascript"></script>
<script src="build/fakerest.js" type="text/javascript"></script>
<script src="build/sinon-server.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="fakerest-init.js" type="text/javascript"></script>
<script src="http://localhost:8000/build/ng-admin.min.js" type="text/javascript"></script>
<script src="http://localhost:8000/build/ng-admin-only.min.js" type="text/javascript"></script>
<script src="http://localhost:8000/build/ng-admin-vendors-css.min.js" type="text/javascript"></script>
<script src="config.js" type="text/javascript"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"mocha": "^2.1.0",
"ng-annotate-loader": "0.0.2",
"ng-annotate-webpack-plugin": "^0.1.2",
"ng-file-upload": "^7.0.12",
"ng-file-upload": "^9.0.8",
"nginflection": "^1.1.10",
"ngtemplate-loader": "^1.3.0",
"node-libs-browser": "^0.5.0",
Expand Down
84 changes: 57 additions & 27 deletions src/javascripts/ng-admin/Crud/field/maFileField.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ define(function (require) {
return {
scope: {
'field': '&',
'value': '='
'value': '=',
'files': '=',
},
restrict: 'E',
link: {
Expand All @@ -34,7 +35,10 @@ define(function (require) {
for (var file in files) {
scope.files[files[file]] = {
"name": files[file],
"progress": 0
"progress": 0,
"success": null,
"error": null,
"new": false,
};
}
},
Expand All @@ -45,49 +49,70 @@ define(function (require) {
if (scope.value) {
scope.v.required = false;
}
scope.buttonLabel = field.buttonLabel();
var input = element.find('input')[0];
var attributes = field.attributes();
for (var name in attributes) {
input.setAttribute(name, attributes[name]);
}

scope.uploadInProgress = false;

scope.fileSelected = function(selectedFiles) {
if (!selectedFiles || !selectedFiles.length) {
return;
}

var uploadParams;

scope.uploadInProgress = true;
var fileUploaded = 0;

scope.files = {};
for (var file in selectedFiles) {
uploadParams = angular.copy(scope.field().uploadInformation());
uploadParams.file = selectedFiles[file];
uploadParams.data = { file: selectedFiles[file] };
Upload
.upload(uploadParams)
.progress(function(evt) {
scope.files[evt.config.file.name] = {
"name": evt.config.file.name,
"progress": Math.min(100, parseInt(100.0 * evt.loaded / evt.total))
.then((response) => {
const fileName = response.config.data.file.name;
scope.files[fileName] = {
"name": scope.apifilename && response.data[scope.apifilename] ? response.data[scope.apifilename] : fileName,
"progress": 0,
"success": response.data,
"new": true,
};
})
.success(function(data, status, headers, config) {
scope.files[config.file.name] = {
"name": scope.apifilename ? data[scope.apifilename] : config.file.name,
"progress": 0
var names = Object.keys(scope.files).map(function(fileindex) {
return scope.files[fileindex].name;
});
console.log(scope.files);
scope.value = names.join(',');
++fileUploaded;
if (fileUploaded === selectedFiles.length) {
scope.uploadInProgress = false;
}
}, (response) => {
const fileName = response.config.data.file.name;
scope.files[fileName] = {
"name": fileName,
"progress": 0,
"error": response.data,
"new": true,
};
if (scope.apifilename) {
var apiNames = Object.keys(scope.files).map(function(fileindex) {
return scope.files[fileindex].name;
});
scope.value = apiNames.join(',');
} else {
scope.value = Object.keys(scope.files).join(',');
console.log(scope.files);
++fileUploaded;
if (fileUploaded === selectedFiles.length) {
scope.uploadInProgress = false;
}
})
.error(function(data, status, headers, config) {
delete scope.files[config.file.name];

scope.value = Object.keys(scope.files).join(',');
}, (evt) => {
const name = evt.config.data.file.name;
const progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
scope.files[name] = {
name,
progress,
"new": true,
};
console.log(scope.files);
});
}
};
Expand All @@ -100,8 +125,8 @@ define(function (require) {
template:
'<div class="row">' +
'<div class="col-md-2">' +
'<a class="btn btn-default" ng-click="selectFile()">' +
'<span>Browse</span>' +
'<a class="btn btn-default" ng-click="selectFile()" ng-disabled="uploadInProgress">' +
'<span>{{ buttonLabel }}</span>' +
'</a>' +
'</div>' +
'<div class="col-md-10">' +
Expand All @@ -113,7 +138,12 @@ define(function (require) {
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-9" style="padding-top: 6px;"><small><em>{{ file.name }}<em><small></div>' +
'<div class="col-md-9" style="padding-top: 6px;"><small><em>' +
'<span class="text-success" ng-show="file.success">{{ file.name }} successfully uploaded</span>' +
'<span class="text-danger" ng-show="file.error">{{ file.name }} upload error: "{{ file.error }}"</span>' +
'<span class="text-muted" ng-show="!file.success && !file.error && file.new">{{ file.name }}</span>' +
'<span class="text-muted" ng-show="!file.success && !file.error">{{ file.name }}</span>' +
'<em><small></div>' +
'</div>' +
'</div>' +
'</div>' +
Expand Down
2 changes: 1 addition & 1 deletion src/javascripts/ng-admin/Crud/fieldView/FileFieldView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ module.exports = {
getReadWidget: () => 'error: cannot display file field as readable',
getLinkWidget: () => 'error: cannot display file field as linkable',
getFilterWidget: () => 'error: cannot display file field as filter',
getWriteWidget: () => '<ma-file-field field="::field" value="value"></ma-file-field>'
getWriteWidget: () => '<ma-file-field field="::field" value="value" files="{}"></ma-file-field>'
};
44 changes: 41 additions & 3 deletions webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ function getEntrySources(sources) {

var ngAdminSources = [
'./src/javascripts/ng-admin.js',
'./src/sass/ng-admin.scss'
'./src/sass/ng-admin.scss',
];

var ngAdminAndVendorSources = [
'angular/angular.js',
'./src/javascripts/ng-admin.js',
'./src/javascripts/vendors.js',
'font-awesome/scss/font-awesome.scss',
Expand All @@ -24,18 +25,55 @@ var ngAdminAndVendorSources = [
'codemirror/lib/codemirror.css',
'codemirror/addon/lint/lint.css',
'ui-select/dist/select.css',
'./src/sass/ng-admin.scss'
'./src/sass/ng-admin.scss',
];

var vendorsJsSources = [
'./src/javascripts/vendors.js',
];

var vendorsCssSources = [
'font-awesome/scss/font-awesome.scss',
'bootstrap-sass/assets/stylesheets/_bootstrap.scss',
'nprogress/nprogress.css',
'humane-js/themes/flatty.css',
'textangular/src/textAngular.css',
'codemirror/lib/codemirror.css',
'codemirror/addon/lint/lint.css',
'ui-select/dist/select.css',
'./src/sass/ng-admin.scss',
];

var vendorsJsSources = [
'./src/javascripts/vendors.js'
];

var vendorsCssSources = [
'font-awesome/scss/font-awesome.scss',
'bootstrap-sass/assets/stylesheets/_bootstrap.scss',
'nprogress/nprogress.css',
'humane-js/themes/flatty.css',
'textangular/src/textAngular.css',
'codemirror/lib/codemirror.css',
'codemirror/addon/lint/lint.css',
'ui-select/dist/select.css',
'./src/sass/ng-admin.scss'
];

module.exports = {
entry: {
'ng-admin': getEntrySources(ngAdminAndVendorSources),
'ng-admin-only': getEntrySources(ngAdminSources)
'ng-admin-only': getEntrySources(ngAdminSources),
'ng-admin-vendors-js': getEntrySources(vendorsJsSources),
'ng-admin-vendors-css': getEntrySources(vendorsCssSources)
},
output: {
publicPath: "http://localhost:8000/",
filename: "build/[name].min.js"
},
externals: {
'angular': 'angular'
},
module: {
loaders: [
{ test: /\.js/, loaders: ['babel'], exclude: /node_modules\/(?!admin-config)/ },
Expand Down