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 18, 2015
1 parent eb7614e commit a01eac5
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 44 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 @@ -6,6 +6,7 @@ install:

run:
@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 @@ -280,8 +280,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;
});
}());
5 changes: 4 additions & 1 deletion examples/blog/index.html
View file
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.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
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>'
};
28 changes: 25 additions & 3 deletions webpack.config.js
View file
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,39 @@ 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',
];

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

0 comments on commit a01eac5

Please sign in to comment.