Question about file upload

Hi guys,

I managed to upload a file in the folder I wanted, but is it possible to change the filename before the file is uploaded? I’d like the file associated to a post gets the name POSTID.jpg when uploaded (where POSTID is the post id…).

Here’s my code atm:

        post.creationView()
            .fields([
                nga.field('created_at', 'date')
                    .defaultValue(new Date()) 
                    .validation({ required: true }), 
                nga.field('content', 'text'),
                nga.field('image', 'file').uploadInformation({ 'url': 'MYBASEAPIURL/api/containerPosts/posts/upload/'}), //i'd like to have an image named: nga.field('id') + '.jpg' - Is this possible?
                nga.field('userId', 'reference')
                    .targetEntity(user)
                    .targetField(nga.field('email')
                    .validation({ required: true })
            ]);

Best regards.

[gonzamace]

@FelixMalfait did you find any solution to get entity ID?? What I need is to pass the entity ID in the url to save the image en DB.

[brickpop]

Got it working by writing a directive like this:

app.directive('uploader', ['$http', '$q', 'notification', '$state', function ($http, $q, notification, $state) {
	return {
		restrict: 'E',
		scope: {
			prefix: '&',
			suffix: '&'
		},
		link: function ($scope) {
			$scope.uploaded = false;

			$scope.onFileSelect = function ($files) {
				if (!$files || !$files.length) return;
				$scope.file = $files[0];
			};
			$scope.upload = function () {
				if (!$scope.file) return;

				var pattern = /^#\/[a-zA-Z0-9\-_]+\/(edit|show)\/([0-9a-fA-F]+)$/;
				var data = location.hash.match(pattern);
				if (!data) return alert("Unable to detect the entry ID");

				var id = data[2];
				var URL = $scope.prefix() + id + $scope.suffix();

				var fd = new FormData();
				fd.append('file', $scope.file);
				return $http.post(URL, fd, {
					transformRequest: angular.identity,
					headers: { 'Content-Type': undefined }
				})
				.then(function (res) {
					$scope.file = null;
					$state.reload();
					notification.log(res.data.error || "Image uploaded", { addnCls: 'humane-flatty-success' });
				})
				.catch(function (res) {
					notification.log(res.data.error || "Could not upload", { addnCls: 'humane-flatty-error' });
				});
			};
		},
		template: `<div class="row">
				<style>
					.uploader {
						color: #333;
						background-color: #f7f7f7;
						display: inline-block;
						margin-bottom: 0;
						font-weight: 400;
						text-align: center;
						vertical-align: middle;
						touch-action: manipulation;
						background-image: none;
						cursor: pointer;
						border: 1px dashed #ccc;
						white-space: nowrap;
						padding: 24px 48px;
						font-size: 14px;
						line-height: 1.42857;
						border-radius: 4px;
						-webkit-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
					}
					.uploader.bg-success {
						background-color: #dff0d8;
					}
					.uploader.bg-danger {
						background-color: #f2dede;
					}
				</style>
				<div class="col-md-4" ng-hide="file">
					<div class="uploader"
						ngf-drop
						ngf-select
						ngf-drag-over-class="{pattern: 'image/*', accept:'bg-success', reject:'bg-danger', delay:50}"
						ngf-pattern="image/*"
						ngf-max-total-size="'1MB'"
						ngf-change="onFileSelect($files)"
						ngf-multiple="false">Select an image or drop it here</div>
				</div>
				<div class="col-md-4" ng-show="file">
					<button type="button" class="btn btn-success btn-lg" ng-click="upload()">
						<span class="glyphicon glyphicon-upload"></span> Upload the image
					</button>
				</div>
		</div>`
	};
}]);

And using it like this:

	nga.field('upload', 'template')
		.label('Upload image')
		.template(`<uploader prefix="'/api/images/'" suffix="'/file'"/>`),