CODEWITHSUNDEEP
javascriptangularjsarrays
aye26
aye26

Reputation: 179

Is there a way to convert a file to byte in angular js?

I am trying to upload a file (bytes) to server. is there a way to convert this from ui side, i am using angular js? Api i am using is done with ASP.new and the my sql table has fields: FileName (string) and File (Collection of Byte). Here is what i have tried so far

 $scope.upload = function(){
        var file = $scope.myFile;
        var fileName=file.name;

         Upload.uploadFile((file), uploadUrl,fileName);
    };


App.service('fileUpload', ['$http', function ($http) {
    this.uploadFile = function(File, uploadUrl,fileName){
        var fd = new FormData();
        console.log(File); //returns {}
        fd.append('File', new Uint8Array(File));
        var data ={
  FileName : fileName,

 };
          fd.append("FileName", JSON.stringify(data.FileName));


        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': 'application/json'}
        })
    }
}]);

Upvotes: 2

Views: 11060

Answers (2)

thewire
thewire

Reputation: 41

I agree, ng-file-upload is great. I'm also similarly posting my file to a database with base64 string as my "file_content" of my json object. With the resulting FileList* object from ng-file-upload (or a normal <input type="file"/>), I use the FileReader* object to read the file as a DataUrl (FileReader has a few other readAs methods too).

Note: I also use LoDash* (_.last and _.split).

uploadFile() {    
    var reader = new FileReader();
    reader.onload = (event) => {
        var data = {
            file_id: 1,
            //strip off the first part ("data:[mime/type];base64,") and just save base64 string 
            file_content: _.last(_.split(event.target.result, ','));,
            file_name: this.file.name,
            mime_type: this.file.type
        }
        /*... POST ...*/
    };
    //this.file is my model for ng-file-upload
    reader.readAsDataURL(this.file);
}

http://jsfiddle.net/eliseosoto/JHQnk/

Then to download the file later, I use FileSaver.js* saveAs: 

downloadFile(fileFromDB) {
    var convertDataURIToBinary = () => {
        var raw = window.atob(fileFromDB.file_content);
        var rawLength = raw.length;
        var array = new Uint8Array(new ArrayBuffer(rawLength));

        for (var i = 0; i < rawLength; i++) {
            array[i] = raw.charCodeAt(i);
        }
        return array;
    }
    var bin_array = convertDataURIToBinary();
    saveAs(new Blob([bin_array], { type: fileFromDB.mime_type }), fileFromDB.file_name);
}

*sorry, my reputation isn't high enough to post links to all these, but you could google them and it should be the first result

Upvotes: 2

TheAssailant
TheAssailant

Reputation: 108

Not sure if this will suit your needs, but I'm assuming you just need a file uploaded using Angular. I ran into problems doing this myself until I found a little directive called ng-file-upload. Pretty simple to use and include and even provides fallbacks for older browsers.

Hope that helps :)

Upvotes: 2

Related Questions