Upload file to firebase with angular / angularjs

Question

I'm using the following to upload images on my firebase storage via angular / angularfire:

<form ng-submit="uploadFile(file)">
  <input type="file" accept="txt" file-model="file" class="form-control">
  <button type="submit" class="btn btn-primary">Upload File</button>
</form>

and js:

app.directive('fileModel',['$parse', function ($parse){
 return {
restrict: 'A',
link: function (scope, element, attrs) {
  element.bind('change', function () {
    $parse(attrs.fileModel)
    .assign(scope, element[0].files[0])
    scope.$apply();
  })
}
}
}]);

app.controller('myController', ['$scope', '$firebaseStorage', function($scope,     $firebaseStorage) {

 // Create a Firebase Storage reference
 var storage = firebase.storage();
 var storageRef = storage.ref();
 var filesRef = storageRef.child('files');

 $scope.uploadFile = function(file) {
console.log("Let's upload a file!");
console.log($scope.file);
var storageRef = firebase.storage().ref("files");
// var storageRef = firebase.storage().ref("files");
$firebaseStorage(filesRef).$put($scope.file);
};

 }]);

The problem is if I upload another image after, it will replace the previous one uploaded ( I suppose it's due to the fact the file name is being taken as 'files', and so replace it automatically)

Is there a way to avoid this? For example, to upload the image with the name of the file instead?

How the path should be?

Thanks a lot for your help

This code is a javascript hell. Stackoverflow 'indian hell' vault is here — parmigiana
– parmigiana, Commented Oct 26, 2018 at 23:15

Ankit Kumar Gupta · Accepted Answer · 2017-03-23 11:16:26Z

2

   app.controller('myController', ['$scope','$firebaseStorage',function($scope,     $firebaseStorage) {

 // Create a Firebase Storage reference
 var storage = firebase.storage();
 var storageRef = storage.ref();
 var filesRef = storageRef.child('files');

 $scope.uploadFile = function(file) {
console.log("Let's upload a file!");
console.log($scope.file);
storageRef.child(file.name).put(file);
    storageRef.on('state_changed', function(snapshot) {
                var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;

            }, function() {
                //handle error
            }, function() {
           //url of storage file 
                var downloadURL = storageRef.snapshot.downloadURL;
                console.log(downloadURL)
                //you will get url of snapshot
            });
     };

 }]);

you can use filename or timestamp .so everytime it will be unique.

<form ng-submit="uploadFile(file)">
  <input type="file" accept="txt" file-model="file" class="form-control">
  <button type="submit" class="btn btn-primary">Upload File</button>
</form>

let me know if you have any problem facing

edited Mar 23, 2017 at 11:16

answered Mar 23, 2017 at 10:22

Ankit Kumar Gupta

1,3223 gold badges10 silver badges24 bronze badges

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

10 Comments

tibewww Over a year ago

Hi Ankit, Thanks for your help, Unfortunatly it didn't change anything :( Do you have any other recommendation ? Thanks !

tibewww Over a year ago

I had forgot to add the app.directive which is part of it, not sur if it affects anything ?

Ankit Kumar Gupta Over a year ago

u are getting file object or not?? if yes then it will work. you need to add directive file-model.can you share your code in jsfiddle

tibewww Over a year ago

the file is being uploaded as an image in the storage correctly yes, but liek before if then i uplaod a new image, it will replace the previous one instead of creating a new one. ill post shortly a fiddle

tibewww Over a year ago

do you have a skype or chat possibiilty by any chance ?

|

Collectives™ on Stack Overflow

Upload file to firebase with angular / angularjs

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related