CODEWITHSUNDEEP
javascripthtmlextjsextjs4.2extjs5
Vikas Hire
Vikas Hire

Reputation: 628

How to maintain state of file field in ExtJs

I have file upload control using which i uploading image file on server. In this operation I am going submitting form two times. Issue is that after submitting form first time file upload filed giving value null at second submit. lets see my code as below.

this.userPhoto = new Ext.create('Ext.form.field.File', {
        xtype: 'filefield',
        padding: '5 5 5',
        cls: 'p-photo-upload',
        emptyText: 'Photo',
        buttonOnly: true,
        fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_PHOTO_'),
        name: 'photo',
        labelWidth: 200,
        width: '26%',
        msgTarget: 'under',
        listeners: {
            scope: this,
             change: function (t, value) {
                var data = {};
                data.userPhoto = t.value;
                data.imageType = 'userPhoto';
                var postdata = Ext.encode(data);
                postdata = Base64.encode(postdata);
                this.UserDetailform.getForm().submit({
                    scope: this,
                    url: FLEET_PROXY_URL + 'index.php?c=user&a=uploadphoto',
                    params: { postData: postdata },
                    success: function (form, action) {
                        this.setLoading(false);
                        var b = Ext.decode(action.response.responseText);
                        console.log(b);
                        if (b && b.data && b.success === "S") {
                            var img = '<img src="' + FLEET_SERVER_URL + 'images/temporary/' + b.data.photoname + '" />';
                            this.userimage.setValue(img);
                        } else {
                            this.UserDetailform.getForm().findField('photo').markInvalid(fleet.Language.get(b.errors[0].photo));
                        }
                    }
                });
            } 
        }
    });

this.userPhoto is the object of Ext.form.field.File, after the browse file I am uploading it by submitting form (you can see code in listeners change event of this.userPhoto) this form submit method I used for save temporary file at server side. Next I am going to save same file and other user details on second submit, but on second submit I got nothing from This.userPhoto. Please see below screen shot you can get better idea about this. enter image description here

in image you can see there is BROWSE and SAVE button first form submit method done on after select the file and second on SAVE button click.

Upvotes: 0

Views: 926

Answers (1)

Alexander
Alexander

Reputation: 20224

The sencha file upload field cannot retain its state because the underlying HTML field is a file upload field which is not intended to keep its state across form submission.

There are so many drawbacks when using file upload fields in your forms, that I have switched to a different approach for image upload.

In my app, where image uploads are required, the file upload field is not connected to the actual form, but submitted on its own, and the backend then returns a data URL of the image to the client. The client then usually puts this data URL into a hiddenfield in the form. An xtype:'image', bound to the hidden field, displays the content of the hidden field (= the image) in the frontend.

That way,

  • the data URL can be more easily handled in a database because it is a "readable" string, not a blob,
  • the data URL is loaded and saved together with all the other data in the form,
  • the data URL can be loaded and saved infinitely often,
  • I only need one backend endpoint that handles image uploads, and can work with data URLs (strings) from there on,
  • all forms can be submitted as JSON (a file upload field enforces standard submission, so when a file upload field is added to an existing form, I would have to throw away all backend code I already have for that endpoint).

The main drawback is that the image goes over the wire more often than with a simple file upload, but at least for me, this is a minor issue.

Upvotes: 1

Related Questions