Results 1 to 7 of 7

Thread: Fileupload via Json

  1. #1

    Default Fileupload via Json

    Hi guys,

    I need to upload a file to a REST service that accepts a object this format:
    {
    "name":"file1",
    "resourceId":"resource1",
    "resourceType":"TEMPLATE",
    "data":"<File Data>" //here goes the file
    }
    I have tried to get the file using File API(Html 5) but when I call extractFileInput() it erases the file field(but it gets the file)
    xtype: 'filefield',
    name: 'data',
    fieldLabel: 'Imagem',
    allowBlank: false,
    minLength: 3,
    maxLength: 45,
    listeners: {
    'change': function(a, b, c){
    var reader = new FileReader();
    var el = a.extractFileInput();

    for (var i = 0, file; file = el.files[i]; i++) {
    reader.readAsDataURL(file);
    }


    }
    }


    Any ideas how to do this using Extjs?

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    Ext JS isn't going to handle this, this is just JavaScript. If you get the file data as a string (base64) then you will be able to send it in a request with no problems.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3

    Default

    tks dude, I did it..
    working pretty well

    cheers

  4. #4

    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    359
    Answers
    2

    Default

    Can you share how you got this working?

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,451
    Answers
    3997

    Default

    Quote Originally Posted by mjhaston View Post
    Can you share how you got this working?
    base64 encoded but these days javascript can support binary uploads now: https://developer.mozilla.org/en-US/...ng_Binary_Data
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  6. #6

    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    359
    Answers
    2

    Default

    I was able to use some code I found on a further search and slam it into my code:

    Code:
    	onAttachFileClick: function(btn) {
    		var me = this,
    			vm = me.getViewModel(),
    			valueElement = me.lookupReference('attachment').getEl().down('input[type=file]').dom.files[0],
    			reader = new FileReader();
    
    		reader.onload = function() {
    			Ext.Ajax.request({
    				url: '/attach.php',
    				jsonData: {
    					mode: 'SAVE',
    					quoteNumber: vm.get('quoteNumberValue'),
    					fileType: vm.get('fileTypeValue'),
    					attachment: vm.get('serverfile'),
    					fileAsBlob: reader.result
    				},
    				success: function() {
    					btn.up('window').close();
    					me.getView().fireEvent('aftersave', ' ');
    					me.showToast('Attachment has been added.');
    				},
    				failure: function() {
    					me.showToast('<b>BOOM!</b><br /><br />Something went horribly wrong');
    				}
    			});
    		};
    		reader.onerror = function(e) {
    			console.log('The File APIs are not fully supported in this browser.');
    		};
    
    		reader.readAsDataURL(valueElement);
    	},

  7. #7

    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    359
    Answers
    2

    Default

    I have an issue, I'm not sure if I'm doing something wrong. If you use this fiddle to select an image file 200k or larger, I find I get a difference between what is in the reader.result value and what is actually POSTed in the fileAsBlob value.


    https://fiddle.sencha.com/#view/editor&fiddle/2gkg

    To test I would set a break at the Ext.Ajax.request and inspect the value of reader.result. This value seems correct and matches two other conversion utilities I've tried.

    Let the script run and do the request. If you look at the request payload fileAsBlob, that value does not match reader.result.


    Thanks.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •