VapiSoft
asked on
"Open-File" in Java-Script
Hi,
I added a "Browse" button to an HTML.
I want to implement the loadFile function in java-script.
I wrote
function loadFile() {
txtFileName.value = 'file:///' + document.data.cmuds.value;
txtFileName.focus();
}
but I receive an error:
document.data.cmuds.value is null or not an object.
Here is the entire HTML.
<!-- based on insimage.dlg -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML 3.2//EN">
<HTML id=dlgImage STYLE="width: 432px; height: 194px; ">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="MSThemeCompati ble" content="Yes">
<TITLE>Insert Image</TITLE>
<style>
html, body, button, div, input, select, fieldset { font-family: MS Shell Dlg; font-size: 8pt; position: absolute; };
</style>
<SCRIPT defer>
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function _getTextRange(elm) {
var r = elm.parentTextEdit.createT extRange() ;
r.moveToElementText(elm);
return r;
}
window.onerror = HandleError
function HandleError(message, url, line) {
var str = "An error has occurred in this dialog." + "\n\n"
+ "Error: " + line + "\n" + message;
alert(str);
window.close();
return true;
}
function loadFile() {
txtFileName.value = 'file:///' + document.data.cmuds.value;
txtFileName.focus();
}
function Init() {
var elmSelectedImage;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.create Range();
// event handlers
document.body.onkeypress = _CloseOnEsc;
btnOK.onclick = new Function("btnOKClick()");
btnBrowse.onclick = new Function("btnBrowseClick() ");
txtFileName.fImageLoaded = false;
txtFileName.intImageWidth = 0;
txtFileName.intImageHeight = 0;
if (globalDoc.selection.type == htmlSelectionControl) {
if (grngMaster.length == 1) {
elmSelectedImage = grngMaster.item(0);
if (elmSelectedImage.tagName == "IMG") {
txtFileName.fImageLoaded = true;
if (elmSelectedImage.src) {
txtFileName.value = elmSelectedImage.src.repla ce(/^[^*]* (\*\*\*)/, "$1"); // fix placeholder src values that editor converted to abs paths
txtFileName.intImageHeight = elmSelectedImage.height;
txtFileName.intImageWidth = elmSelectedImage.width;
txtVertical.value = elmSelectedImage.vspace;
txtHorizontal.value = elmSelectedImage.hspace;
txtBorder.value = elmSelectedImage.border;
txtAltText.value = elmSelectedImage.alt;
selAlignment.value = elmSelectedImage.align;
}
}
}
}
txtFileName.value = txtFileName.value || "http://";
txtFileName.focus();
}
function _isValidNumber(txtBox) {
var val = parseInt(txtBox);
if (isNaN(val) || val < 0 || val > 999) { return false; }
return true;
}
function btnBrowseClick() {
loadFile();
}
function btnOKClick() {
var elmImage;
var intAlignment;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.create Range();
// error checking
if (!txtFileName.value || txtFileName.value == "http://") {
alert("Image URL must be specified.");
txtFileName.focus();
return;
}
if (txtHorizontal.value && !_isValidNumber(txtHorizon tal.value) ) {
alert("Horizontal spacing must be a number between 0 and 999.");
txtHorizontal.focus();
return;
}
if (txtBorder.value && !_isValidNumber(txtBorder. value)) {
alert("Border thickness must be a number between 0 and 999.");
txtBorder.focus();
return;
}
if (txtVertical.value && !_isValidNumber(txtVertica l.value)) {
alert("Vertical spacing must be a number between 0 and 999.");
txtVertical.focus();
return;
}
// delete selected content and replace with image
if (globalDoc.selection.type == htmlSelectionControl && !txtFileName.fImageLoaded) {
grngMaster.execCommand('De lete');
grngMaster = globalDoc.selection.create Range();
}
idstr = "\" id=\"556e697175657e5374726 96e67"; // new image creation ID
if (!txtFileName.fImageLoaded ) {
grngMaster.execCommand("In sertImage" , false, idstr);
elmImage = globalDoc.all['556e6971756 57e5374726 96e67'];
elmImage.removeAttribute(" id");
elmImage.removeAttribute(" src");
grngMaster.moveStart("char acter", -1);
} else {
elmImage = grngMaster.item(0);
if (elmImage.src != txtFileName.value) {
grngMaster.execCommand('De lete');
grngMaster = globalDoc.selection.create Range();
grngMaster.execCommand("In sertImage" , false, idstr);
elmImage = globalDoc.all['556e6971756 57e5374726 96e67'];
elmImage.removeAttribute(" id");
elmImage.removeAttribute(" src");
grngMaster.moveStart("char acter", -1);
txtFileName.fImageLoaded = false;
}
grngMaster = _getTextRange(elmImage);
}
if (txtFileName.fImageLoaded) {
elmImage.style.width = txtFileName.intImageWidth;
elmImage.style.height = txtFileName.intImageHeight ;
}
if (txtFileName.value.length > 2040) {
txtFileName.value = txtFileName.value.substrin g(0,2040);
}
elmImage.src = txtFileName.value;
if (txtHorizontal.value != "") { elmImage.hspace = parseInt(txtHorizontal.val ue); }
else { elmImage.hspace = 0; }
if (txtVertical.value != "") { elmImage.vspace = parseInt(txtVertical.value ); }
else { elmImage.vspace = 0; }
elmImage.alt = txtAltText.value;
if (txtBorder.value != "") { elmImage.border = parseInt(txtBorder.value); }
else { elmImage.border = 0; }
elmImage.align = selAlignment.value;
grngMaster.collapse(false) ;
grngMaster.select();
window.close();
}
</SCRIPT>
</HEAD>
<BODY id=bdy onload="Init()" style="background: threedface; color: windowtext;" scroll=no>
<DIV id=divFileName style="left: 0.98em; top: 1.2168em; width: 7em; height: 1.2168em; ">Image URL:</DIV>
<INPUT ID=txtFileName type=text style="left: 8.54em; top: 1.0647em; width: 21.5em;height: 2.1294em; " tabIndex=10 onfocus="select()">
<DIV id=divAltText style="left: 0.98em; top: 4.1067em; width: 6.58em; height: 1.2168em; ">Alternate Text:</DIV>
<INPUT type=text ID=txtAltText tabIndex=15 style="left: 8.54em; top: 3.8025em; width: 21.5em; height: 2.1294em; " onfocus="select()">
<FIELDSET id=fldLayout style="left: .9em; top: 7.1em; width: 17.08em; height: 7.6em;">
<LEGEND id=lgdLayout>Layout</LEGEN D>
</FIELDSET>
<FIELDSET id=fldSpacing style="left: 18.9em; top: 7.1em; width: 11em; height: 7.6em;">
<LEGEND id=lgdSpacing>Spacing</LEG END>
</FIELDSET>
<DIV id=divAlign style="left: 1.82em; top: 9.126em; width: 4.76em; height: 1.2168em; ">Alignment:</DIV>
<SELECT size=1 ID=selAlignment tabIndex=20 style="left: 10.36em; top: 8.8218em; width: 6.72em; height: 1.2168em; ">
<OPTION id=optNotSet value=""> Not set </OPTION>
<OPTION id=optLeft value=left> Left </OPTION>
<OPTION id=optRight value=right> Right </OPTION>
<OPTION id=optTexttop value=textTop> Texttop </OPTION>
<OPTION id=optAbsMiddle value=absMiddle> Absmiddle </OPTION>
<OPTION id=optBaseline value=baseline SELECTED> Baseline </OPTION>
<OPTION id=optAbsBottom value=absBottom> Absbottom </OPTION>
<OPTION id=optBottom value=bottom> Bottom </OPTION>
<OPTION id=optMiddle value=middle> Middle </OPTION>
<OPTION id=optTop value=top> Top </OPTION>
</SELECT>
<DIV id=divHoriz style="left: 19.88em; top: 9.126em; width: 4.76em; height: 1.2168em; ">Horizontal:</DIV>
<INPUT ID=txtHorizontal style="left: 24.92em; top: 8.8218em; width: 4.2em; height: 2.1294em; ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=25 onfocus="select()">
<DIV id=divBorder style="left: 1.82em; top: 12.0159em; width: 8.12em; height: 1.2168em; ">Border Thickness:</DIV>
<INPUT ID=txtBorder style="left: 10.36em; top: 11.5596em; width: 6.72em; height: 2.1294em; ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=21 onfocus="select()">
<DIV id=divVert style="left: 19.88em; top: 12.0159em; width: 3.64em; height: 1.2168em; ">Vertical:</DIV>
<INPUT ID=txtVertical style="left: 24.92em; top: 11.5596em; width: 4.2em; height: 2.1294em; ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=30 onfocus="select()">
<BUTTON ID=btnBrowse style="left: 31.36em; top: 1.0647em; width: 7em; height: 2.2em; " type=submit tabIndex=40>Browse</BUTTON >
<BUTTON ID=btnOK style="left: 31.36em; top: 3.6504em; width: 7em; height: 2.2em; " type=submit tabIndex=40>OK</BUTTON>
<BUTTON ID=btnCancel style="left: 31.36em; top: 6.200em; width: 7em; height: 2.2em; " type=reset tabIndex=45 onClick="window.close();"> Cancel</BU TTON>
</BODY>
</HTML>
I added a "Browse" button to an HTML.
I want to implement the loadFile function in java-script.
I wrote
function loadFile() {
txtFileName.value = 'file:///' + document.data.cmuds.value;
txtFileName.focus();
}
but I receive an error:
document.data.cmuds.value is null or not an object.
Here is the entire HTML.
<!-- based on insimage.dlg -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML 3.2//EN">
<HTML id=dlgImage STYLE="width: 432px; height: 194px; ">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="MSThemeCompati
<TITLE>Insert Image</TITLE>
<style>
html, body, button, div, input, select, fieldset { font-family: MS Shell Dlg; font-size: 8pt; position: absolute; };
</style>
<SCRIPT defer>
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function _getTextRange(elm) {
var r = elm.parentTextEdit.createT
r.moveToElementText(elm);
return r;
}
window.onerror = HandleError
function HandleError(message, url, line) {
var str = "An error has occurred in this dialog." + "\n\n"
+ "Error: " + line + "\n" + message;
alert(str);
window.close();
return true;
}
function loadFile() {
txtFileName.value = 'file:///' + document.data.cmuds.value;
txtFileName.focus();
}
function Init() {
var elmSelectedImage;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.create
// event handlers
document.body.onkeypress = _CloseOnEsc;
btnOK.onclick = new Function("btnOKClick()");
btnBrowse.onclick = new Function("btnBrowseClick()
txtFileName.fImageLoaded = false;
txtFileName.intImageWidth = 0;
txtFileName.intImageHeight
if (globalDoc.selection.type == htmlSelectionControl) {
if (grngMaster.length == 1) {
elmSelectedImage = grngMaster.item(0);
if (elmSelectedImage.tagName == "IMG") {
txtFileName.fImageLoaded = true;
if (elmSelectedImage.src) {
txtFileName.value = elmSelectedImage.src.repla
txtFileName.intImageHeight
txtFileName.intImageWidth = elmSelectedImage.width;
txtVertical.value = elmSelectedImage.vspace;
txtHorizontal.value = elmSelectedImage.hspace;
txtBorder.value = elmSelectedImage.border;
txtAltText.value = elmSelectedImage.alt;
selAlignment.value = elmSelectedImage.align;
}
}
}
}
txtFileName.value = txtFileName.value || "http://";
txtFileName.focus();
}
function _isValidNumber(txtBox) {
var val = parseInt(txtBox);
if (isNaN(val) || val < 0 || val > 999) { return false; }
return true;
}
function btnBrowseClick() {
loadFile();
}
function btnOKClick() {
var elmImage;
var intAlignment;
var htmlSelectionControl = "Control";
var globalDoc = window.dialogArguments;
var grngMaster = globalDoc.selection.create
// error checking
if (!txtFileName.value || txtFileName.value == "http://") {
alert("Image URL must be specified.");
txtFileName.focus();
return;
}
if (txtHorizontal.value && !_isValidNumber(txtHorizon
alert("Horizontal spacing must be a number between 0 and 999.");
txtHorizontal.focus();
return;
}
if (txtBorder.value && !_isValidNumber(txtBorder.
alert("Border thickness must be a number between 0 and 999.");
txtBorder.focus();
return;
}
if (txtVertical.value && !_isValidNumber(txtVertica
alert("Vertical spacing must be a number between 0 and 999.");
txtVertical.focus();
return;
}
// delete selected content and replace with image
if (globalDoc.selection.type == htmlSelectionControl && !txtFileName.fImageLoaded)
grngMaster.execCommand('De
grngMaster = globalDoc.selection.create
}
idstr = "\" id=\"556e697175657e5374726
if (!txtFileName.fImageLoaded
grngMaster.execCommand("In
elmImage = globalDoc.all['556e6971756
elmImage.removeAttribute("
elmImage.removeAttribute("
grngMaster.moveStart("char
} else {
elmImage = grngMaster.item(0);
if (elmImage.src != txtFileName.value) {
grngMaster.execCommand('De
grngMaster = globalDoc.selection.create
grngMaster.execCommand("In
elmImage = globalDoc.all['556e6971756
elmImage.removeAttribute("
elmImage.removeAttribute("
grngMaster.moveStart("char
txtFileName.fImageLoaded = false;
}
grngMaster = _getTextRange(elmImage);
}
if (txtFileName.fImageLoaded)
elmImage.style.width = txtFileName.intImageWidth;
elmImage.style.height = txtFileName.intImageHeight
}
if (txtFileName.value.length > 2040) {
txtFileName.value = txtFileName.value.substrin
}
elmImage.src = txtFileName.value;
if (txtHorizontal.value != "") { elmImage.hspace = parseInt(txtHorizontal.val
else { elmImage.hspace = 0; }
if (txtVertical.value != "") { elmImage.vspace = parseInt(txtVertical.value
else { elmImage.vspace = 0; }
elmImage.alt = txtAltText.value;
if (txtBorder.value != "") { elmImage.border = parseInt(txtBorder.value);
else { elmImage.border = 0; }
elmImage.align = selAlignment.value;
grngMaster.collapse(false)
grngMaster.select();
window.close();
}
</SCRIPT>
</HEAD>
<BODY id=bdy onload="Init()" style="background: threedface; color: windowtext;" scroll=no>
<DIV id=divFileName style="left: 0.98em; top: 1.2168em; width: 7em; height: 1.2168em; ">Image URL:</DIV>
<INPUT ID=txtFileName type=text style="left: 8.54em; top: 1.0647em; width: 21.5em;height: 2.1294em; " tabIndex=10 onfocus="select()">
<DIV id=divAltText style="left: 0.98em; top: 4.1067em; width: 6.58em; height: 1.2168em; ">Alternate Text:</DIV>
<INPUT type=text ID=txtAltText tabIndex=15 style="left: 8.54em; top: 3.8025em; width: 21.5em; height: 2.1294em; " onfocus="select()">
<FIELDSET id=fldLayout style="left: .9em; top: 7.1em; width: 17.08em; height: 7.6em;">
<LEGEND id=lgdLayout>Layout</LEGEN
</FIELDSET>
<FIELDSET id=fldSpacing style="left: 18.9em; top: 7.1em; width: 11em; height: 7.6em;">
<LEGEND id=lgdSpacing>Spacing</LEG
</FIELDSET>
<DIV id=divAlign style="left: 1.82em; top: 9.126em; width: 4.76em; height: 1.2168em; ">Alignment:</DIV>
<SELECT size=1 ID=selAlignment tabIndex=20 style="left: 10.36em; top: 8.8218em; width: 6.72em; height: 1.2168em; ">
<OPTION id=optNotSet value=""> Not set </OPTION>
<OPTION id=optLeft value=left> Left </OPTION>
<OPTION id=optRight value=right> Right </OPTION>
<OPTION id=optTexttop value=textTop> Texttop </OPTION>
<OPTION id=optAbsMiddle value=absMiddle> Absmiddle </OPTION>
<OPTION id=optBaseline value=baseline SELECTED> Baseline </OPTION>
<OPTION id=optAbsBottom value=absBottom> Absbottom </OPTION>
<OPTION id=optBottom value=bottom> Bottom </OPTION>
<OPTION id=optMiddle value=middle> Middle </OPTION>
<OPTION id=optTop value=top> Top </OPTION>
</SELECT>
<DIV id=divHoriz style="left: 19.88em; top: 9.126em; width: 4.76em; height: 1.2168em; ">Horizontal:</DIV>
<INPUT ID=txtHorizontal style="left: 24.92em; top: 8.8218em; width: 4.2em; height: 2.1294em; ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=25 onfocus="select()">
<DIV id=divBorder style="left: 1.82em; top: 12.0159em; width: 8.12em; height: 1.2168em; ">Border Thickness:</DIV>
<INPUT ID=txtBorder style="left: 10.36em; top: 11.5596em; width: 6.72em; height: 2.1294em; ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=21 onfocus="select()">
<DIV id=divVert style="left: 19.88em; top: 12.0159em; width: 3.64em; height: 1.2168em; ">Vertical:</DIV>
<INPUT ID=txtVertical style="left: 24.92em; top: 11.5596em; width: 4.2em; height: 2.1294em; ime-mode: disabled;" type=text size=3 maxlength=3 value="" tabIndex=30 onfocus="select()">
<BUTTON ID=btnBrowse style="left: 31.36em; top: 1.0647em; width: 7em; height: 2.2em; " type=submit tabIndex=40>Browse</BUTTON
<BUTTON ID=btnOK style="left: 31.36em; top: 3.6504em; width: 7em; height: 2.2em; " type=submit tabIndex=40>OK</BUTTON>
<BUTTON ID=btnCancel style="left: 31.36em; top: 6.200em; width: 7em; height: 2.2em; " type=reset tabIndex=45 onClick="window.close();">
</BODY>
</HTML>
ASKER
I don't understand the question. It is in the loadFile function.
Just search for loadFile in the HTML.
Just search for loadFile in the HTML.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi,
I don't understand what you say.
This is an HTML that is part of the "htmlarea 2.03", so i cann;t do all these changes.
I just wanted to add a "Browse" button, that insert the file path to the textFileName (instead of the URL).
I don't understand what is "'file:///' + document.data.cmuds.value" , i just found it in google in a script that opens a "Open-File" dialog.
I don't understand what you say.
This is an HTML that is part of the "htmlarea 2.03", so i cann;t do all these changes.
I just wanted to add a "Browse" button, that insert the file path to the textFileName (instead of the URL).
I don't understand what is "'file:///' + document.data.cmuds.value"
For that, Jaax's point 2 is what you need.
ASKER
No, it does not do it.
The way I did with the <button
is OK, it shows the Browse button and when I click on the button it calls the loadFile function.
The problem is that I don't know how to open the Browse (Open-File) dialog-box is JS and I don't know how to get the selected file's path.
The way I did with the <button
is OK, it shows the Browse button and when I click on the button it calls the loadFile function.
The problem is that I don't know how to open the Browse (Open-File) dialog-box is JS and I don't know how to get the selected file's path.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Where is that in your html?