Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Using forms for file uploads

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    249

    Question Using forms for file uploads

    I test this example (from Ext JS 3.0 Cookbook):
    Code:
    Ext.BLANK_IMAGE_URL = "../images/s.gif";
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
    
        var
            picBox = {
                columnWidth: "100 px",
                bodyStyle: "padding: 10px",
                items: [{
                    xtype: "box",
                    autoEl:    {
                        tag: "div",
                        html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '" class="img-contact" />'
                    }
                }]
            },
            picFiles = {
                columnWidth: .65,
                layout: "form",
                labelAlign: "top",
                items: [{
                    xtype: "textfield",
                    fieldLabel: "Current",
                    labelSeparator: "",
                    name: "currPic",
                    id: "currPic",
                    readOnly: true,
                    disabled: true,
                    anchor: "100%"
                }, {
                    xtype: "textfield",
                    fieldLabel: "New (JPG or PNG only)",
                    labelSeparator: "",
                    name: "newPic",
                    id: "newPic",
                    style: "width: 300px",
                    inputType: "file",
                    allowBlank: false
                }]
            },
            pictUploadForm = new Ext.FormPanel({
                frame: true,
                title: "Change Picture",
                bodyStyle: "padding: 5px",
                width: 420,
                layout: "column",
                url: "contact-picture.aspx",
                method: "POST",
                fileUpload: true,
                items: [picBox, picFiles],
                buttons: [{
                    text: "Upload Picture",
                    handler: function() {
                        var
                            theForm = pictUploadForm.getForm();
                            
                        if (!theForm.isValid())
                        {
                            Ext.MessageBox.alert("Change Picture", "Please select a picture");
                            return;
                        }
                        
                        if (!validateFileExtension(Ext.getDom("newPic").value))
                        {
                            Ext.MessageBox.alert("Change Picture", "Only JPG or PNG, please.");
                            return;
                        }
                        
                        theForm.submit({
                            params: { act: "setPicture", id: "contact1" },
                            waitMsg: "Uploading picture"
                        })
                    }
                }, {
                    text: "Cancel"
                }]
            });
    
        pictUploadForm.on({
            actioncomplete: function(form, action) {
                if (action.type == "load")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
                }
                
                if (action.type == "submit")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
                    Ext.getDom("newPic").value = "";
                }
            }
        });
    
        pictUploadForm.render(document.body);
        pictUploadForm.getForm().load({ params: { act: "getPicture", id: "contact1" }, waitMsg: "Loading" });
    });
    
    function validateFileExtension(fileName)
    {
        var
            exp = /^.*\.(jpg|JPG|png|PNG)$/;
            
        return exp.test(fileName);
    }
    1. In IE7 error is occured "Invalid argument" at ext-all-debug.js
    Code:
            setWidth : function(width, animate){
                var me = this;
                width = me.adjustWidth(width);
    ==>            !animate || !me.anim ?
    ==>                me.dom.style.width = me.addUnits(width) :
    ==>                me.anim({width : {to : width}}, me.preanim(arguments, 1));
                return me;
            }
    2. In IE7 only buttons "Upload picture" && "Cancel" are visible.
    3. Load. Server send
    Code:
    
    {"success":"true","data ":{"contactId":"contact id","file":"./img/27265.gif"}}
    but
    Code:
            actioncomplete: function(form, action) {
                if (action.type == "load")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
                }
    isn't occured and pic.src isn't changed.
    4. Upload. Server send
    Code:
    
    {"success":"true","data ":{"contactId":"contact id","file":"./download/user.png"}}
    but
    4.1. Browser (FF 3.6.3) offer me to save contact-picture.aspx
    4.2.
    Code:
            actioncomplete: function(form, action) {
                if (action.type == "submit")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
                    Ext.getDom("newPic").value = "";
                }
    isn't occured and pic.src isn't changed.
    Is this example incorrect?

    P.S. ExtJS ver.3.2.1

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. columnWidth:"100 px" is invalid. You want width:100
    2. picBox is overnested. Why put a BoxComponent inside a Panel when all you need is a BoxComponent?
    3. For a file upload the response needs to have Content-type:text/html and should either be HTML encoded JSON or plain JSON in a textarea tag, e.g.
    Code:
    <html><body><textarea>{"success":"true","data ":{"contactId":"contact id","file":"./download/user.png"}}</textarea></body></html>
    4. Due to security reasons Firefox doesn't include the path in the filename, so setting the image src won't work.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    249

    Default

    Quote Originally Posted by Condor View Post
    1. columnWidth:"100 px" is invalid. You want width:100
    +1 THNX
    Quote Originally Posted by Condor View Post
    2. picBox is overnested. Why put a BoxComponent inside a Panel when all you need is a BoxComponent?
    This isn't my code.
    Quote Originally Posted by Ex_Soft View Post
    I test this example (from Ext JS 3.0 Cookbook)
    Quote Originally Posted by Condor View Post
    3. For a file upload the response needs to have Content-type:text/html and should either be HTML encoded JSON or plain JSON in a textarea tag, e.g.
    Code:
    <html><body><textarea>{"success":"true","data ":{"contactId":"contact id","file":"./download/user.png"}}</textarea></body></html>
    Quote Originally Posted by Ext JS 3.0 Cookbook
    Notice that after a successful upload, the JSON-encoded response will have the following structure:
    Code:
    "{success:true,data:{contactId:'contact id',file:'[picture path]'}}
    Quote Originally Posted by Condor View Post
    4. Due to security reasons Firefox doesn't include the path in the filename, so setting the image src won't work.
    Hm...
    Code:
    <html>
        <head>
            <title>&laquo;Test &lt;img&gt; src&raquo;</title>
        </head>
        <body onload="document.getElementById('ImgVictim').src='./pix/SmthPix.gif'">
            <img id="ImgVictim" />
        </body>
    </html>
    works fine. (FF 3.6.3)
    and
    Quote Originally Posted by Ex_Soft View Post
    actioncomplete isn't occured

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    249

    Default

    Quote Originally Posted by Condor View Post
    3. For a file upload the response needs to have Content-type:text/html and should either be HTML encoded JSON or plain JSON in a textarea tag, e.g.
    Code:
    <html><body><textarea>{"success":"true","data ":{"contactId":"contact id","file":"./download/user.png"}}</textarea></body></html>
    +1 THNX
    Code:
    actioncomplete: function(form, action) {
                if (action.type == "submit")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
                    Ext.getDom("newPic").value = "";
                }
    works fine in FF && Chrome. In IE7
    Code:
    Ext.getDom("newPic").value = "";
    doesn't work.
    When I send this for load:
    Code:
    8272        doDecode = function(json){
    8273            return eval("(" + json + ')');    
            }
    error in ext-all-debug.js is occured. So, for load response should be JSON?

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. I said that the response could also be HTML encoded JSON. Since the JSON doesn't contain <, > or & it is already HTML encoded.

    Example: If you wanted to return the following JSON:
    Code:
    {success: true, message: '<span class="info">AT&T</span>'}
    then for a fileUpload:true you would need to return:
    HTML Code:
    {success: true, message: '&lt;span class="info"&gt;AT&amp;T&lt;/span&gt;'}
    2. If you want to change the value of a field then you should not modify the element, but the component.
    Code:
    Ext.getCmp('newPic').setValue('');
    3. Does the following line really work in Firefox (if you select an image from a different directoy)?
    Code:
    Ext.getDom("pic").src = pic.file;

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    249

    Default

    Quote Originally Posted by Condor View Post
    1. I said that the response could also be HTML encoded JSON. Since the JSON doesn't contain <, > or & it is already HTML encoded.

    Example: If you wanted to return the following JSON:
    Code:
    {success: true, message: '<span class="info">AT&T</span>'}
    then for a fileUpload:true you would need to return:
    HTML Code:
    {success: true, message: '&lt;span class="info"&gt;AT&amp;T&lt;/span&gt;'}
    You don't understand me. (BTW, I'm so sorry for my English) After upload file all works fine.
    Code:
            actioncomplete: function(form, action) {
                if (action.type == "load")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
                }
    doesn't work.
    Quote Originally Posted by Condor View Post
    2. If you want to change the value of a field then you should not modify the element, but the component.
    Code:
    Ext.getCmp('newPic').setValue('');
    In IE7 error:
    Microsoft JScript runtime error: Object doesn't suppurt this property or method
    In FF
    Error: Ext.getDom("newPic").setValue is not a function
    Quote Originally Posted by Condor View Post
    3. Does the following line really work in Firefox (if you select an image from a different directoy)?
    Code:
    Ext.getDom("pic").src = pic.file;
    Yes. After upload
    Code:
                if (action.type == "submit")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
                    Ext.getDom("newPic").value="";
                }
    set img.src.

  7. #7
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    1. I said:
    Code:
    Ext.getCmp('newPic').setValue('');
    2. OK, so you are showing a server image after upload. Yes that works.

  8. #8
    Sencha User
    Join Date
    Mar 2010
    Posts
    249

    Default

    Quote Originally Posted by Condor View Post
    Code:
    Ext.getCmp('newPic').setValue('');
    I'm confused... However even
    Code:
    Ext.getCmp('newPic').setValue('');
    doesn't work in IE7.
    Quote Originally Posted by Condor View Post
    2. OK, so you are showing a server image after upload. Yes that works.
    But img.src wasn't set after first page load.

  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Please be clearer. What exactly doesn't work?

  10. #10
    Sencha User
    Join Date
    Mar 2010
    Posts
    249

    Default

    Quote Originally Posted by Condor View Post
    Please be clearer. What exactly doesn't work?
    1. After
    Code:
    Ext.onReady(function() {
        ...
    ==>    pictUploadForm.getForm().load({ params: { act: "getPicture", id: "contact1" }, waitMsg: "Loading" });
    });
    Server send
    Code:
    {"success":"true","data ":{"contactId":"contact id","file":"./img/27265.gif"}}
    but actioncomplete isn't occured and
    Code:
        pictUploadForm.on({
    ==>        actioncomplete: function(form, action) {
    ==>            if (action.type == "load")
    ==>            {
    ==>                var
    ==>                    pic = action.result.data;
    ==>                    
    ==>                Ext.getDom("pic").src = pic.file;
    ==>                Ext.getCmp("currPic").setValue(pic.file);
    ==>            }
    doesn't work.

    2. After upload file actioncomplete is occured, but
    Code:
        pictUploadForm.on({
            actioncomplete: function(form, action) {
                if (action.type == "submit")
                {
                    var
                        pic = action.result.data;
                        
                    Ext.getDom("pic").src = pic.file;
                    Ext.getCmp("currPic").setValue(pic.file);
    ==>                //Ext.getDom("newPic").value = "";
    ==>                Ext.getCmp("newPic").setValue("");
                }
    doesn't clear newPic.value in IE7.

Page 1 of 2 12 LastLast

Similar Threads

  1. Using forms for file uploads
    By Ex_Soft in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 18 Jun 2010, 12:19 AM
  2. File Uploads: server response
    By arthurakay in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 1 Jul 2009, 11:16 AM
  3. File Uploads
    By neall in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Jan 2008, 1:23 PM
  4. Using generated forms with an updateManager for file uploads: no cigar
    By cesarulo in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 23 May 2007, 10:50 AM

Posting Permissions

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