Upload csv file with ionic 2 angular 2


#1

I just want to upload csv file but I am not getting by examples ,many of the examples using cordova.fil…
this cordova I am not getting why its not coming in my code
I just need an excample please upload if some have done in ionic 2 and angular 2


#2

Where do you have the .csv file?

Uploading files is most easily done with File Transfer: https://ionicframework.com/docs/native/transfer/


#3

if I select file from html input then how do I get that file contents or that file in ts so I can transfer


#4

Is there a specific reason you want to use CSV instead of JSON? JSON is much easier and safer to deal with. CSV is a nasty tricky format.


#5

Yep have to upload only CSV file or xls


#6

Do you need to send it as an actual file?

You could on selecting the file have the contents read into a base64 string and post that to the server.

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


#7

in this code

 if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);
    }

value is getting stored in variable binaryString and then u mean to say this variable I should send directly to server like below I am using in body area…

let body: string = JSON.stringify({ 'file': binarystring });
    // type: 'application/json',        
    let headers: any = new Headers({ 'Content-Type': 'application/json' }),
      options: any = new RequestOptions({ headers: headers }),
      url: any = this.otpUrl;

    this.http.post(url, body, options)
      .subscribe((data) => {
})


#8

I have always found it easier to post back file data in JSON objects serialized as base64 strings as opposed to files.

If you have control of the server you could send the plain base64 text and convert it back into a string.

In a C# world it would be something like:
byte[] data = Convert.FromBase64String(encodedString);
string decodedString = Encoding.UTF8.GetString(data);

This only lets you down when you try to post LARGE amounts of data as you don’t get to use streams - but for anything up to several megabytes this method should be really simple to implement.


#9

I don’t think it makes much sense to read the file as binary and then encode it in JSON, because you’ll be basically doing in two steps what readAsDataURL() would have done for you in the first place, and without the content type information.


#10

You’re absolutely right. That link was just the first example I came across.


#11

+1 to @rapropos, as you have much more control over json files inside Ionic/Angular, why not using json from the start? it’s basically the same kind of file type (flat text data).


#12

We don’t really know the use case.
Tbf every time I had some kind of batch process involving csv I did map it to json objects.


#13

What I find weird about this thread is that the CSV file is somehow on the device to start with, and presumably didn’t come from a server, else there would be no need to upload it.

What I’m concerned about is that the app is creating the CSV from scratch, because creating well-formed CSV robust in the face of weird edge cases is a lot harder than people who haven’t shot themselves repeatedly in the foot trying to do it would think.


#14

@codiqa100031834 anyways your issue is for sure about the file plugin/code, but I’d tend to say you can convert files to CSV after it goes through ionic on your backend.
Because having it “here” in json, a native format for Ionic/Angular (in ionic/angular) will simplify a lot your code i think (hence less risk of errors with native file plugin too).


#15

Agreed. Easier for testing with just a browser as well.


#16

Yes and when you manage the file transfer in Ionic/angular, reconvert it in csv on your own backend servers. Any language can do that.