2

I am using the file uploader in extjs 'fileuploadfield' (Ext.form.field.File), and in my button handler I would like to upload it as base64

    handler: function(){
        if(self.getForm().isValid()){
            self.getForm().submit({
                url: myURL,
                headers: {
                    'Accept': 'application/json; charset=utf-8'
                },

I would like something like this :

handler: function(){
    if(self.getForm().isValid()){

        var f = self.getForm().getFileStream();

        var base64 = convertToBase64(f);

        var params = {};
        params.base64 = base64;

        Ext.Ajax.request({
            params: params,
            scope: this,
            url: myURL,
            method: 'POST',
            callback: function (options, success, response) {

            }
        )
    }

Where would I get the file data from the form object? What can I used to convert to base64? Does my logic seem correct in how I am approaching this problem?

Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
  • Do you want your file to be converted to Base64 in javascript after uploading ? – Harshal Feb 28 '17 at 13:10
  • 1
    Check this fiddle http://jsfiddle.net/harshalnehete/t1p0416z/4/. I have converted file to Base64 . You can pass this to your api . You can decode this to byteArray and then to InputByteStream in Java. Let me know if this is what you want, I will post this as answer and other details on how to decode this in Java to byteArray and InputByteStream. – Harshal Feb 28 '17 at 13:50
  • thankyou this is perfect. please post as answer – Oliver Watkins Feb 28 '17 at 14:29
  • Done. Posted as answer. – Harshal Feb 28 '17 at 17:57
  • Please accept if its working for you. Thanks. – Harshal Mar 01 '17 at 05:21

1 Answers1

1

Please try this.

Ext.onReady(function() {
  Ext.create('Ext.form.field.File', {
    id: 'uploadFile',
    renderTo: 'example-form',
    emptyText: 'Select a file to upload...',
    fieldLabel: 'File upload',
    labelAlign: 'right',
    labelSeparator: ' ',
    buttonText: 'Select file...',
    labelWidth: 107,
    padding: '3 0 0 20',
    width: 400,
    listeners: {
      'change': function(fileUploadComponent, value, eOpts) {
        this.onFileChange(fileUploadComponent, value, eOpts);
      }
    },

    onFileChange: function(fileUploadComponent, value, eOpts) {
      var file = Ext.getCmp('uploadFile').getEl().down('input[type=file]').dom.files[0];
      if (file != null) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onloadend = function(oFREvent) {
          var byteArray= new Uint8Array(oFREvent.target.result);
          var len = byteArray.byteLength;
          var binary = '';
          for (var i = 0; i < len; i++) {
            binary += String.fromCharCode(byteArray[i]);
          }
          byteArray= window.btoa(binary);
          alert(byteArray);
        }
      }
    }
  });
});

Java code to convert this in InputStream :

public InputStream persistFile(String imageByteArray){
           byte[] byteArray =   com.sun.org.apache.xerces.internal.impl.dv.util.Base64.decode(imageByteArray);
           InputStream is = new ByteArrayInputStream(byteArray);
           return is;
}

Here is fiddle

Harshal
  • 961
  • 1
  • 11
  • 26
  • it can also easily be done using reader.readAsDataURL(), see https://stackoverflow.com/a/36281449/1018686 – fen1ksss May 23 '17 at 08:35