[resolved]Open file dialog in webView



  • Hi, i have a project with a webview (i use qml). The navigation works fine but i now i would like to open a FileDialog to upload a file. I need this because my application need to upload parameters to a device with a html page. See the picture under :

    picture

    The problem is that when i click "choose file", nothing happen ... What i need is to open a filedialog, select a file and upload it to my device...

    My simple code (get from an exemple) :

    ScrollView {  
                                Layout.preferredWidth: (tabView.width)-30  
                                Layout.preferredHeight: 500  
                                WebView {  
                                    id: webview  
                                    url: "http://192.168.1.121"  
                                    anchors.fill: parent  
                                    onNavigationRequested: {  
                                        // detect URL scheme prefix, most likely an external link  
                                        var schemaRE = /^\w+:/;  
                                        if (schemaRE.test(request.url)) {  
                                            request.action = WebView.AcceptRequest;  
                                        } else {  
                                            request.action = WebView.IgnoreRequest;  
                                            // delegate request.url here  
                                        }  
                                    }  
                                }  
                            }  
    

    Can you give me some help ?


  • Moderators

    @modjo756 And where is the FileDialog ? Nothing as such in the posted code.



  • For the moment i don't have a filedialog ! I don't know how to take the signal when i clicked on the button "choose file" !


  • Moderators

    @modjo756 Ok and where is this "Choose File" button ? Is it in that web page ?



  • Yes is it on this url : http://192.168.1.121/TOOLS/index.htm


  • Moderators

    @modjo756 Have a look at WebChannel.


  • Moderators

    @modjo756 Also for file choose what html type have you used ? input type as file works. IT opens file choose dialog. Here's the HTML:

    <!DOCTYPE html>
    <html>
    <body>
    
    <input name="File" id="file" type="file">
    
    </body>
    </html>
    

    See if it invokes the file dialog on your system.



  • I didn't realize the HTML page. The device (that we have bought) is connected to the network by ethernet. To update (or load) parameters we can do this by a browser like chrome -> this works. Now i have my app (realized with qt5.5 qml/c++) and i would like to update the parameter from it, that's the reason i use a webview. Do you understand what i want ?


  • Moderators

    @modjo756 Isn't that the WebView loads an HTML page and that page contains file choose button ?
    Also what exactly is that file choose button ? Isn't it an element with type=file ?



  • this is the code source :

    <head> <title>Firmwaremanagement IDST</title> <link  rel="stylesheet" type="text/css" href="css/mainframe.css"/> <script src="js/libs/jquery.js" type="text/javascript"></script> <script type="text/javascript">
    function hG(n){return n;};function x8(){var oControl,Vc;if(!top.document.w){return;}lQ();gk();oControl=top.document.oControl;var j=top.document.w.Ni();var G=j.KH();var i6=oControl.aAxisXref[0];var g0=window.top.document.oUserManagement.GJ("ParamFileLoad_IDST");window.top.document.fF.iq("ParamFileLoad_IDST",document);window.top.document.fF.ma();};function lQ(){var j=top.document.w.Ni(),f7="Load parameters - identification data of the axis";var G=j.KH();window.top.document.k._6($("#ActivateSMOInfoDiv"),false,"After the activation of the parameter values the parameter image must be activated.","The replacement of the parameter set must be recorded in the machine logbook:");window.top.document.k.xU($("#divSmoReport"),"Load parameters");if((G.E4.uf=="S4")||(G.E4.uf=="S5")){mq();$("#divSmoActivate").css("display","");}else{$("#divSmoActivate").css("display","none");}$("#btnSaveRefreshIdDataAxis").css("cursor","pointer");$("#btnSaveRefreshIdDataAxis").on("click",function(){window.top.document.k.TP(false,$("#divDeviceLogbook").html(),$("#txtaComment").val(),$("#txtDate").val(),$("#txtCommEngineer").val(),f7);});$("#szSave").css("cursor","pointer");$("#szSave").on("click",function(){window.top.document.k.TP(false,$("#divDeviceLogbook").html(),$("#txtaComment").val(),$("#txtDate").val(),$("#txtCommEngineer").val(),f7);});$("#btnPrintRefreshIdDataAxis").css("cursor","pointer");$("#btnPrintRefreshIdDataAxis").on("click",function(){window.top.document.k.TP(true,$("#divDeviceLogbook").html(),$("#txtaComment").val(),$("#txtDate").val(),$("#txtCommEngineer").val(),f7);});$("#szPrint").css("cursor","pointer");$("#szPrint").on("click",function(){window.top.document.k.TP(true,$("#divDeviceLogbook").html(),$("#txtaComment").val(),$("#txtDate").val(),$("#txtCommEngineer").val(),f7);});$("#btnRefreshIdDataAxis").css("cursor","pointer");$("#btnRefreshIdDataAxis").on("click",mq);$("#szRefresh").css("cursor","pointer");$("#szRefresh").on("click",mq);};function mq(){var mw=top.document.w.Ni();var G=mw.KH();var m7=[$("#szSMOSectionModuleVal"),$("#szSMOVariantSectionModuleVal"),$("#szSMOVariantRow"),$("#szSMOAxisSectionModuleVal"),$("#szSMODeviceSectionModuleVal"),$("#szSMODeviceRow"),$("#szSMOVersionSectionModuleVal")];var Vx=[[$("#szSMOActiveAxisCharVal"),"P-0-3235.0.1.7"],[$("#szSoftwareRevisionVal"),"S-0-1300.0.9.7"],[$("#szSMOManuVersionVal"),"P-0-3200.0.0.7"],[$("#szDeviceNameVal"),"S-0-1300.0.4.7"],[$("#szSerialNumberVal"),"S-0-1300.0.12.7"],[$("#szMotorTypeVal"),"S-0-0141.0.0.7"],[$("#szSMOConfigChecksumVal"),"P-0-3234.0.1.7"],[$("#szSMOOpHoursConfigVal"),"P-0-3234.0.2.7"],[$("#szSMOOpHoursConfigVal"),"P-0-3234.0.2.4"],[$("#szSMOConfigChangeCounterVal"),"P-0-3234.0.3.7"],[$("#szSMOParaChecksumVal"),"P-0-3234.0.4.7"],[$("#szSMOptHoursParaVal"),"P-0-3234.0.5.7"],[$("#szSMOptHoursParaVal"),"P-0-3234.0.5.4"],[$("#szSMOParaChangeCounterVal"),"P-0-3234.0.6.7"]];if(G.derivedFrom('Zk')){G=G.G;}window.top.document.k.t7(G,Vx);window.top.document.k.hw(G,"P-0-3200.0.5.7",m7);window.top.document.k.r9(G,"P-0-3200.0.6.7",$("#szDebugBridge"));};function gk(){var Uv=$("#UploadFile"),BE=0;window.top.document.k.fC(document,"BodyDiv");if(window.top.basefrm.document.body.clientWidth<786){BE=(window.top.basefrm.document.body.clientWidth/10);Uv.attr("size",BE);}else{Uv.attr("size",91);}};function Ie(){window.top.headerFrame.wJ.uZ();};function kI(){var oControl=window.top.document.oControl,f5=false;var j=top.document.w.Ni();if(oControl.aAxisXref.length>1){for(var H=0;H<oControl.aAxisXref.length;H++){if(oControl.aAxisXref[H].pY==false){f5=true;break;};};}else{if(oControl.cZ!=2){f5=true;};}if(f5){if(confirm("To activate the parameter file, you have to switch the drive into parameter mode!")){if(oControl.aAxisXref.length>1){oControl.E7("2",0,FS);}else{oControl.f0("2",Fa);}return false;}else{Qt();return true;};}else{Qt();return true;}};function Fa(D){if((!top.document.c.p(D))&&(D!="error")){window.top.document.oControl.c3(Rc);}};function FS(EP){var OQ=false;for(var H=0;H<EP.length;H++){if((top.document.c.p(EP[H]))&&(EP[H]=="error")){OQ=true;};}if(!OQ){window.top.document.oControl.Zj(Rc);}};function Rc(){$("#formUpload").submit();};function Qt(){if(window.top.document.k.KY()){document.getElementsByTagName("form")[0].action="http://"+top.document.oControl.zU+"/upload.cgi";}$("#btnParUpdate")[0].disabled="disabled";$("#szInfo")[0].style.display="table-row";window.top.headerFrame.wJ.DU(2);window.top.headerFrame.wJ.fnStep();$('#uploadFrame').contents().find('body').html("");eC();};function eQ(){var rI=/^.*\.par$/i;var Xu=$("#UploadFile")[0];var eb=Xu.value.split("\\");var lm=rI.test(eb[eb.length-1]);var Ws,fu;if(!lm){Xu.value="";if(window.top.document.k.Wa()){var vy=Xu.cloneNode(false);vy.onchange=Xu.onchange;Xu.parentNode.replaceChild(vy,Xu);}$("#btnParUpdate")[0].disabled="disabled";}else{$("#btnParUpdate")[0].disabled="";}};function eC(){var uh=$('#uploadFrame').contents().find('body').html();var w5=[];if(window.top.document.k.KY()){try{uh=$("#uploadFrame")[0].contentWindow.window.document.body.innerText;}catch(X){uh="Upload erfolgreich";};}else{uh=$('#uploadFrame').contents().find('body').html();}window.top.document.k.Ud(200);try{if(uh!==""){uh=uh.substring(4,uh.length-5);window.top.headerFrame.wJ.fnStep();$('#uploadFrame').contents().find('body').html("");YS();}else{window.setTimeout(eC,200);}}catch(X){window.alert(X.message);$("#btnParUpdate")[0].disabled="";window.top.headerFrame.wJ.uZ();$("#szInfo")[0].style.display="none";}};function Wq(){var mw=top.document.w.Ni();var G=mw.KH();$("#btnActiParamImage").attr("disabled",false);$("#btnClearError").attr("disabled",false);if(G.derivedFrom('Zk')){G=G.G;}if((G.E4.uf=="S4")||(G.E4.uf=="S5")){mq();}};function YS(){$.get('http://'+window.top.document.location.host+'/UploadParameter.log',function(data){Nw(data);});};function Nw(l){var bO=l.split("\n"),Fx=[],Wl=[],aN="",HV=0,p7=0,uC=new Array;var m6="",yc="",V9="",Pd="";for(var H=0;H<bO.length;H++){if((bO[H].indexOf("PARAMETER:")!=-1)&&(bO[H].indexOf("ERROR:")!=-1)){Fx=bO[H].split("PARAMETER:");Fx=Fx[1].split("ERROR:");HV=parseInt(Fx[0],10);p7=parseInt(Fx[1],10);};}if(p7!=0){for(var i=0;i<bO.length;i++){if(bO[i].indexOf("ERROR ")!=-1){Fx=bO[i].split("ERROR ");Wl=Fx[0].split("Parameter");V9=$.trim(Wl[1]);aN=$.trim(Fx[1]);Fx=aN.split(" ");yc=$.trim(Fx[0]);Fx.shift();m6=$.trim(Fx.join(" "));uC[uC.length]=new Array(V9,m6);};}for(var z=0;z<uC.length;z++){if(z==0){Pd=uC[z][0]+"     "+uC[z][1];}else{Pd=Pd+"\n"+uC[z][0]+"     "+uC[z][1];};}$("#txtaParamError").val(Pd);$("#divParamError").css("display","");if(confirm("Parameter update not successful! To assume the changes to the IDST completely, the IDST must be reloaded. Would you like to reload the IDST now?")){window.top.location.reload(true);}Wq();}else{Wq();}$("#btnParUpdate")[0].disabled="";window.top.headerFrame.wJ.uZ();$("#szInfo")[0].style.display="none";};function m_(b){window.top.headerFrame.wJ.uZ();$("#szInfo")[0].style.display="none";window.alert(b);window.top.basefrm.document.body.className="BODY";$("#btnParUpdate")[0].disabled="";};
    
    </script> </head> <body  class="BODY" onload="x8();;" onunload="Ie();;" onresize="gk();;"> <div style="text-align:center; padding-left:5; width:98%;" id="BodyDiv"> <form  id="formUpload" action="upload.cgi" method="post" target="uploadFrame" enctype="multipart/form-data" onsubmit="return kI();;"> <br/> <label class="CAPTION-TEXT" id="szFileSelection" style="text-align:left; display:block;">File selection</label> <div class="DIV-WITH-BORDER" id="FileSelectionDiv"> <table class="OverviewNoBorder" id="FileSelection" style="font: 9pt Arial; width:100%; margin-bottom:12px; margin-top:12px; padding-left:3px;" cellpadding="0px" cellspacing="0px"> <colgroup> <col width="30%"/> <col width="70%"/> </colgroup> <tr> <td id="szUploadFile">Parameter file:</td> <td> <input  type="file" id="UploadFile" name="upload-file" size="91" maxlength="15000000" onchange="eQ();;"/> </td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> <tr> <td colspan="2" align="right"> <input type="submit" id="btnParUpdate" disabled="disabled" style="margin-right:3px;" value="Activate parameter file"/> </td> </tr> <tr id="szInfo" style="display:none;"> <td colspan="2" align="center"><span class="frame_icons Warning" id="picWarning1" style="height:16px; width:16px; display:inline-block;"></span><label id="szInfoText" style="color:Red; font-weight:bold; display:inline-block; vertical-align:bottom; padding-left:5px; padding-right:5px;">Do not disconnect control voltage and communication!</label><span class="frame_icons Warning" id="picWarning2" style="height:16px; width:16px; display:inline-block;"></span></td> </tr> </table> </div> <br/> <div id="divParamError" class="DIV-WITH-BORDER" style="text-align:left; display:none; background-color:White;"> <textarea id="txtaParamError" class="WizardProtocol" readonly="readonly" rows="10" cols="100"></textarea> </div> <br/> <div id="divSmoActivate" class="DIV-WITH-BORDER" style="width: 100%; text-align: left; display: none;"> <div id="ActivateSMOInfoDiv" class="DIV-NO-BORDER" style="width: 100%; text-align: left; height: 182px; margin: 12px 3px 12px 3px;"> </div> <div class="DIV-NO-BORDER" id="divSmoReport" style="width: 100%; text-align: left; margin: 12px 3px 12px 3px;"> </div> </div> <br/> <input type="text" name="save-in-folder" style="visibility:hidden; display:none;" id="saveFolder" value=""/> </form> </div> <iframe style="visibility:hidden; width:1px; height:1px;" id="uploadFrame" name="uploadFrame"></iframe> <a  href="" id="BackupErrorLog" onclick="location=this.href;;" target="_new" style="display:none;"></a> </body> </html>
    

  • Moderators

    @modjo756 That is a huge code. Can you trim it down to the essential parts ?



  • Problem resolved, link to the solution


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.