Skip to content

Commit

Permalink
Update ng-file-upload to 9.0.8 and add possibility to use upload file…
Browse files Browse the repository at this point in the history 
… field in demo
  • Loading branch information
@jeromemacias
jeromemacias committed Oct 19, 2015
1 parent 4c1cb4d commit 5fd8baf
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 42 deletions.
2 changes: 1 addition & 1 deletion .jshintrc
View file
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
1 change: 1 addition & 0 deletions Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ install:
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
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
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;
});
}());
2 changes: 1 addition & 1 deletion package.json
View file
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
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
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>'
};
20 changes: 18 additions & 2 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function getEntrySources(sources) {

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

var ngAdminAndVendorSources = [
Expand All @@ -25,7 +25,23 @@ 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 = [
Expand Down

1 comment on commit 5fd8baf

@thachp
Copy link

@thachp thachp commented on 5fd8baf Nov 15, 2015

Choose a reason for hiding this comment

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

How can we fix this failed build and allow the pull to go through?

Please sign in to comment.