Meteor-files: How to upload data URI or base64 data type file?

[radiegtya]

How to upload data URI or base64 data type file.
This is useful when taking a file from mobile apps (for ex: react-native, android, n iOS)

is it just like this?

var base64Data = 'blah56789';
var upload = Images.insert({
        file: base64Data,
        streams: 'dynamic',
        chunkSize: 'dynamic'
      }, false);

Thanks

[dr-dimitru]

Currently, there is no way to upload right in base64 (URIEncoded) strings. Currently only File is supported. On the server it has .write() method

Could you explain why you want to upload as base64?

[radiegtya]

So in server I can do something like this?

var base64Data = 'blah56789';
Images.write(base64Data, {
      fileName: 'sample.png',
      type: 'image/png'
    }, function (error, fileRef) {
      if (error) {
        throw error;
      } else {
        console.log(fileRef.name + ' is successfully saved to FS. _id: ' + fileRef._id);
      }
    });

because I am using react-native with meteor, and react native use ImagePicker plugin which is returning base64Data or data URI after picking a file from mobile.

[dr-dimitru]

Yes, but only with Buffer:

var base64Data = 'blah56789';
Images.write(new Buffer(base64Data, 'base64'), {
      fileName: 'sample.png',
      type: 'image/png'
    }, function (error, fileRef) {
      if (error) {
        throw error;
      } else {
        console.log(fileRef.name + ' is successfully saved to FS. _id: ' + fileRef._id);
      }
    });

[radiegtya]

still unsuccessfull, the message is "successfully saved to FS", but the image result only like this:

[dr-dimitru]

• Is file written?
• Could find file on FS manually ?

[radiegtya]

how to check that??

[dr-dimitru]

@radiegtya just check folder (_directory_) where you've uploaded the files, via Finder, Explored or Console (_Depends from what you're system on_)

[dr-dimitru]

@radiegtya Any news on your end?

[dr-dimitru]

@radiegtya ?

[radiegtya]

still not fixed yet, sorry for the late response.
And I am consider using my own python storage API or s3.

[dr-dimitru]

Hi @radiegtya ,
Have you seen this thread?

I fixed i pass video and audio using DATA URI and BLOB.. thanks

[dr-dimitru]

@radiegtya
I guess we can close it?

[renatomattos2912]

Hi, i'm having this same problem, so i use the .write() method like you said @dr-dimitru, and the file is saved correctly on folder, but it is not an image file, i can't open the file with an image viewer app. Can you reopen this issue and help me with this? I want to do this work cause i'm using this plugin on front to crop my image (https://foliotek.github.io/Croppie/) and this return an base64 image encoded, but Meteor-Files only accepts File object, so there is something that i can do to use this both plugins together?

[dr-dimitru]

I guess you're looking for: https://github.com/VeliovGroup/Meteor-Files/issues/192
This will be implemented soon. Stay tuned.

Meanwhile, have you tried this function?:

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

[renatomattos2912]

@dr-dimitru how can i use this function? i found some functions similar to this, but not works. I just found another function that transforms my base64 to a File object and with this i can send normally to Collection and apparently it is working, i'm making more tests but until now, it is ok. The functions is:

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}

[dr-dimitru]

Great, I'll update this thread once new release will be published

[badis]

@radiegtya @dr-dimitru this thread is exactly what I need.
Everything looks good except that I am facing this issue: https://github.com/VeliovGroup/Meteor-Files/issues/95

[dr-dimitru]

@badis please explain in a new issue