Here is an updated solution that works rather well.
Known issue/s: Selecting a file and then changing your mind will cause a new file to be added to the list rather than changing the selected file.
Potential Improvements: Give the user a way to remove selected files if they change their minds.
Portion of the HTML form
<input id="txtFileName" type="text" class="txtFileName" readonly="readonly" style="margin-left: 0px; width: 100%" required />
<div id="divFileSelectComponent" class="fileinputs" title="Select File to Upload">
<form id="formFileUpload_1">
<input id="file_1" class="filehidden" accept="video/*,image/*," size="25" type="file" name="attachment" onchange="fileUploadChange('file_1')" />
</form>
</div>
<div id="SelectedFilesList"> </div>
<div id="CommentValidationMsg"> </div>
<div class="dijitDialogPaneActionBar" id="CommentButtons">
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){AddComment();}" id="SubmitComment">Submit</button><!--ValidateComment AddComment();-->
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){CancelComment();}" id="cancelComment">Cancel</button>
</div>
JS
var x, txtFileSelect = "", intFileUploads = 1, intSelectedFiles = 0, intCurrentFile, newObjectId = 0;
//Portion (2nd half) of the AddComment Function
//...
CommentLayer.applyEdits([theCommentGraphic], null, null, function (addResults) {
console.log("add success", addResults[0].success);
console.log("objectId", addResults[0].objectId);
CommentActivityLog(addResults[0].objectId, "Comment Added");
setTimeout(function () {
newObjectId = addResults[0].objectId;
console.log("!!! Comment Added", newObjectId);
if (IEversion > 9 || IEversion == 0) {
//console.log("IE is greater than 9 or other browser (IEversion:" + IEversion + ")");
if (dojo.byId('file_1').value != "") {
intCurrentFile = 1; //intCurrentFile++;
if (addResults[0].success && intFileUploads > 0) {
if (intFileUploads > 1) {
CommentLayer.addAttachment(addResults[0].objectId, dojo.byId('formFileUpload_1'), callbackEdits1, function (err) { console.log("File #1", err); });
} else {
CommentLayer.addAttachment(addResults[0].objectId, dojo.byId('formFileUpload_1'), callbackEdits2, function (err) { console.log("Only File (#1)", err); });
}
}
} else {
//console.log("!!! file_1 empty");
dom.byId("userFeedbackMessage").innerHTML = "Your comment has been submitted for review.\nPlease allow up to 48 hours for it to be posted onto the map.";
hideMapBusyIndicator();
showUserFeedbackMessage();
}
} else {
//IE 9 or less
//console.log("IE Version ", IEversion);
if (dojo.byId('file_1').value != "") {
dom.byId("userFeedbackMessage").innerHTML = "Your comment has been submitted for review.\nUnfortunately the file you selected to upload could not be saved.\nPlease allow up to 48 hours for it to be posted onto the map.";
} else {
dom.byId("userFeedbackMessage").innerHTML = "Your comment has been submitted for review.\nPlease allow up to 48 hours for it to be posted onto the map.";
}
hideMapBusyIndicator();
showUserFeedbackMessage();
}
}, 250);
}, function (err) {
//when an error occurs
console.log("applyEdits error ", err.message);
console.log("applyEdits err ", err);
//alert("Apply Edits Failed: " + err.message);
errorEdits(err);
});
function callbackEdits() {
newObjectId = addResults[0].objectId;
console.log("!!!", addResults[0].success, String(addResults[0].objectId));
theMap.graphics.clear();
theMap.infoWindow.hide();
}
};
function callbackEdits1() {
//console.log("!!! newObjectId", newObjectId);
//console.log("newObjectId", newObjectId, "intFileUploads", intFileUploads);
intCurrentFile++;
var formID = "formFileUpload_" + intCurrentFile;
var fileInputID = "file_" + intCurrentFile;
if (dojo.byId(fileInputID).value != "") {
console.log(dojo.byId(fileInputID).value);
var z = document.getElementById(fileInputID);
var file = z.files[0];
console.log("newObjectId", newObjectId, "file: ", file.name, file.size, "formID", formID, "intCurrentFile", intCurrentFile, "/", intFileUploads);
if (intCurrentFile < intSelectedFiles) { //(intFileUploads - 1)
CommentLayer.addAttachment(newObjectId, dojo.byId(formID), callbackEdits1, function (err) {
console.log("File #", intCurrentFile, newObjectId, formID, fileInputID, err);
errorEdits(err);
});
} else {
CommentLayer.addAttachment(newObjectId, dojo.byId(formID), callbackEdits2, function (err) {
console.log("Last File", intCurrentFile, newObjectId, formID, fileInputID, err);
errorEdits(err);
});
}
} else {
console.log("newObjectId", newObjectId, "file: No file", "formID", formID, "intCurrentFile", intCurrentFile, "/", intFileUploads);
if (intCurrentFile == intSelectedFiles) { //intFileUploads
callbackEdits2();
}
}
};
function callbackEdits2() {
console.log("callbackEdits2", newObjectId, intCurrentFile, intSelectedFiles);
if (intFileUploads > 0) {
dom.byId("userFeedbackMessage").innerHTML = "Your comment and " + intFileUploads + " attachments has been submitted for review.\nPlease allow up to 48 hours for it to be posted onto the map.";
} else {
dom.byId("userFeedbackMessage").innerHTML = "Your comment has been submitted for review.\nPlease allow up to 48 hours for it to be posted onto the map.";
}
hideMapBusyIndicator();
showUserFeedbackMessage();
DestroyFileUploads();
}
function errorEdits(err) {
console.log("!!! Error !!! newObjectId", newObjectId, "intCurrentFile", intCurrentFile, "intSelectedFiles", intSelectedFiles, "intFileUploads", intFileUploads, "\n", err);
var formID = "formFileUpload_" + intCurrentFile;
var fileInputID = "file_" + intCurrentFile;
var z = document.getElementById(fileInputID); //document.getElementById(formID);
var file = z.files[0];
var FileName = "NA", FileSize = 0;
if (z.files.length == 0) {
console.log("!!! No file !!!", formID, fileInputID);
} else {
FileName = file.name; FileSize = file.size;
console.log("!!! file !!!", file.name, file.size, "form & file", formID, fileInputID);
}
//email notification about the error
try {
var EmailHandler = "/Map/HandlerEmail.ashx?Error=" + err + "&FileName=" + FileName + "&FileSize=" + FileSize + "&Misc=intCurrentFile: " + intCurrentFile + ", newObjectId: " + newObjectId + ", intCurrentFile: " + intCurrentFile + ", intFileUploads: " + intFileUploads;
dojo.xhrGet({
url: EmailHandler,
load: function (result) {
console.log("!!! Sending Email", result);
}
});
}
catch (err) {
console.log("!!! Email ERROR:", err);
}
hideMapBusyIndicator();
dom.byId("userFeedbackMessage").innerHTML = "Something Happened <br/>" + err.message;
showUserFeedbackMessage();
DestroyFileUploads();
};
fileUploadChange = function (inputID, results) {
intSelectedFiles++; intFileUploads++; console.log("intFileUploads", intFileUploads, "intSelectedFiles", intSelectedFiles);
//console.log("inputID", inputID);
//console.log("results size", results.size);
x = document.getElementById(inputID);
if ('files' in x) {
if (x.files.length == 0) {
txtFileSelect = "Select a file.";
} else {
if ('files' in x) {
txtFileSelect += "<br><strong>" + intSelectedFiles + ". </strong>";
var file = x.files[0];
if ('name' in file) {
txtFileSelect += file.name;
}
if ('size' in file) {
txtFileSelect += " (" + file.size + " bytes )";
}
}
}
} else {
if (x.value == "") {
txtFileSelect += "Select a file."; //Select one or more files.
} else {
txtFileSelect += "The files property is not supported by your browser!";
txtFileSelect += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.
}
}
document.getElementById("SelectedFilesList").innerHTML = txtFileSelect;
var formID = "formFileUpload_" + intFileUploads, fileInputID = "file_" + intFileUploads, listID = "list_" + intFileUploads;
var fileInputForm = domConstruct.create("form", { id: formID });
var inputNode = domConstruct.create("input", { id: fileInputID, type: "file", name: "attachment", value: "", accept: "video/*,image/*,", class: "filehidden", onchange: "fileUploadChange('" + fileInputID + "')" });
var fileList = domConstruct.create("output", { id: listID });
domConstruct.place(fileInputForm, "divFileSelectComponent");
domConstruct.place(inputNode, fileInputForm);
};
DestroyFileUploads = function () {
console.log("!!!DestroyFileUploads!!! intFileUploads", intFileUploads, "intSelectedFiles", intSelectedFiles);
//Clean up as preparation for another comment submittal
//Loop through starting with the 2nd file upload control
for (var i = 2; i < intFileUploads + 1; i++) {
var formID = "formFileUpload_" + i;
var fileInputID = "file_" + i;
console.log("formID", formID, "fileInputID", fileInputID);
if (dojo.byId(fileInputID).value != "") {
var x = document.getElementById(fileInputID);
var file2 = x.files[0];
console.log("file name", file2.name, "size", file2.size);
} else { console.log("No file"); }
//Destroy the generated forms and file upload controls.
domConstruct.destroy(fileInputID);
domConstruct.destroy(formID);
}
//clear the list of files and reset the variables
dom.byId("SelectedFilesList").innerHTML = " "//SelectedFilesList
intFileUploads = 1;
intSelectedFiles = 0;
txtFileSelect = "";
}