Keeping original format on file rename using AngularJS and ng File Upload

Question

I'm using the ng-file-upload to upload images in a web app.

Upload process works good, but when I try to give each file a unique name using momentJS, it won't automatically keep the format and save it without file extension.

For example, image.jpg will become 12-07-2016-23-36-44.

I managed to fix this using the following code, but then it will save all images to JPG even if they are not (PNG, GIF...)

$scope.uniquelogo = moment().format('DD-MM-YYYY-HH-mm-ss') + '.jpg';

Upload.upload({
   url: 'upload.php',
   data: {
    file: file,
    name: Upload.rename(file, $scope.uniquelogo)
   }

How could I use Upload.rename() and still keep the original file format?

Can you get the extension from the original filename and use that instead of .jpg? — Mike Cluck
– Mike Cluck, Commented Jul 12, 2016 at 22:00

Mike Cluck · Accepted Answer · 2016-07-12 22:04:45Z

2

You can retrieve the extension from the original file name and use that instead of .jpg.

function getFileExtension(filename) {
  return filename
    .split('.')    // Split the string on every period
    .slice(-1)[0]; // Get the last item from the split
}

$scope.uniquelogo = moment().format('DD-MM-YYYY-HH-mm-ss');

Upload.upload({
   url: 'upload.php',
   data: {
    file: file,
    name: Upload.rename(file, $scope.uniquelogo + getFileExtension(file.name))
   }
   ...

answered Jul 12, 2016 at 22:04

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

developer033 · Accepted Answer · 2016-07-12 22:29:25Z

1

You can access the property type to get the extension, but it comes for example:

image/(jpeg|png)
video/mp4

So you can use the string methods String.prototype.substring() + String.prototype.lastIndexOf() to get only the part that you want:

name: Upload.rename(file, $scope.uniquelogo + file.name.substring(file.type.lastIndexOf('/'), file.name.length).replace('/', '.'));

Note: I used the replace method to replace the "/" for ".", but you can also do it by hand (just putting $scope.uniquelogo + '.' + file.name.substring(file.type.lastIndexOf('/') + 1, file.name.length)

I hope it helps!

edited Jul 12, 2016 at 22:29

answered Jul 12, 2016 at 22:06

developer033

25k8 gold badges85 silver badges113 bronze badges

Collectives™ on Stack Overflow

Keeping original format on file rename using AngularJS and ng File Upload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related