Trying to clear my file input. I have tried:
$("#documentUploader").val(null);
$("#documentUploaderLabel").val(null);
$("#documentUploader").val("");
$("#documentUploaderLabel").val("");
$(".custom-file-input").fileinput("clear");
Nothing works. How hard is it seriously supposed to be to clear a file input and the label that is attached to it?
below is the modal where the user selects the file(s), and the code that uploads and supposedly clears the field.
<!-- MODAL: Vendor document upload -->
<div class="modal fade modal-content-right" id="vendorDocumentUploadModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-dark text-white">
Upload document
<div class="spinner-grow spinner-grow-sm text-warning customAjaxLoader mt-1" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-10">
<div class="custom-file">
<input id="documentUploader" name="file[]" type="file" multiple="multiple" class="custom-file-input">
<label class="custom-file-label" id="documentUploaderLabel" for="file[]">Choose files</label>
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-outline-primary fa-pull-right" onclick="uploadFiles(<%= vendorId %>,'vendor');">Upload</button>
</div>
</div>
<div class="mt-3">You can upload as many documents as you please. Note that these documents are bound to the vendor itself, and should not be contracts or documents pertaining to a contract.</div>
<div id="showVendorDocumentProgress" class="mt-3"></div>
</div>
<div class="modal-footer shadow-none isblockablenospinner">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- MODAL END -->
Java code (the section where file is completed, UTYPE is set to VENDOR, just FYI). There are some commented-out lines there too:
function uploadFiles(id, utype) {
console.log("Uploading");
console.log(utype);
isLoading(1);
var showWorkingMessage = "<div class='alert alert-info' role='alert'>";
showWorkingMessage += "<div class='media'>";
showWorkingMessage +=
"<div class='spinner-grow spinner-grow-sm text-success mt-1 mr-2' role='status'>";
showWorkingMessage += "<span class='sr-only'>Loading...</span>";
showWorkingMessage += "</div>";
showWorkingMessage +=
"<div class='media-body'><strong>Saving</strong> Please wait for a little while...</div>";
showWorkingMessage += "</div>";
showWorkingMessage += "<div class='progress mt-1' style='height:3px;'>";
showWorkingMessage +=
"<div id='showContractDocumentUploadProgress' class='progress-bar bg-success' style='width: 0%;'></div>";
showWorkingMessage += "</div></div>";
var progressDivName = "";
var progressFunctionName = "";
if (utype == "contract") {
// Contract
progressDivName = "#showWorking";
progressFunctionName = "progressHandlingFunction";
$(progressDivName).html(showWorkingMessage);
} else {
// Vendor
progressDivName = "#showVendorDocumentProgress";
progressFunctionName = "progressVendorDocumentHandlingFunction";
$(progressDivName).html(showWorkingMessage);
}
var formData = new FormData($("#aspnetForm").get(0));
$.ajax({
url: "ajax/vendor/details/documentupload.aspx?id=" + id + "&ut=" + utype,
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
xhr: function () {
console.log(progressFunctionName);
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener(
"progress",
utype == "contract"
? progressHandlingFunction
: progressVendorDocumentHandlingFunction,
false
);
}
return myXhr;
},
success: function (ret) {
if (ret == "OK") {
new Noty({
text:
"<h5>Document uploaded</h5>The document was uploaded, thank you!",
type: "success",
timeout: 2000
}).show();
} else {
new Noty({
text:
"<h5>Error</h5>The document was not uploaded, please try again.",
type: "error",
timeout: 2000
}).show();
}
if (utype == "contract") {
$.get(
"ajax/vendor/details/contract_details.aspx?id=" + id,
function (data) {
$("#contractDetailsSummary").html(data);
isLoading(0);
$(progressDivName).fadeOut();
$(".fileinput").fileinput("clear");
}
);
} else {
isLoading(0);
refreshVendorDocuments();
$(progressDivName).fadeOut();
$("#documentUploader").val(null);
$("#documentUploaderLabel").val(null);
// $("#documentUploader").val('');
// $(".custom-file-input").fileinput("clear");
// $(".fileinput").fileinput("clear");
}
},
error: function (ret) {
console.log(ret);
isLoading(0);
$(progressDivName).fadeOut();
$(".fileinput").fileinput("clear");
new Noty({
text: "<h5>Error</h5>An unspecified error occurred, please try again",
type: "error",
timeout: 2000
}).show();
}
});
}
You can see where I have added the code that is supposed to clear the field, but nothing works. Anyone?? Please??
