We Keep Coding

Image source is getting deleted after uploading new image to Flask using Javascript

I have method to upload images to Flask in JavaScript. Below is the code used to upload images and display text in chatbot. This is used in my Chatbox class on button click:
For text there is no issue, it's working fine. However when uploading an image, previously uploaded images are getting deleted, ie. the previous img tag src is not visible in the DOM inspector.
var i = 1;
let formData = new FormData();
formData.append('question', $("#question").val());
formData.append('questionImageFile', $("#question-image")[0].files[0]);
let question_id = $("#question").val();
let question_image_file = $("#question-image")[0].files[0];
let msg1;
if ($("#question").val() === "" && $("#question-image")[0].files[0] === "")
return;
else if ($("#question").val() != "")
msg1 = {
name: "User",
message: question_id,
timestamp: new Date().toLocaleTimeString()
}
else {
var imgMsg = '<img id="' + i + '"/>'
msg1 = {
name: "User",
message: imgMsg,
timestamp: new Date().toLocaleTimeString()
}
}
this.messages.push(msg1);
$.ajax({
type: "POST",
url: "/chatbot",
data: formData,
cache: false,
processData: false,
contentType: false,
success: (result) => {
let msg2 = {
name: "Sam",
message: result.response,
timestamp: new Date().toLocaleTimeString()
};
this.messages.push(msg2);
var html = '';
this.messages.slice().reverse().forEach(function(item, index) {
if (item.name === "Sam") {
$("#question").val() + '</div>' + '<div class="chatbotResponse"><div class="timeBot">' + new Date().toLocaleTimeString() + '</div>' + result.response + '</div>'
html += '<div class="messages__item messages__item--visitor">' + '<div class="timeBot">' + item.timestamp + '</div>' + item.message
if (item.message.startsWith("Sorry, I")) {
html += '<button type="button" class="btn btn-outline-primary" id="feedbackBtn" data-toggle="modal" data-target="#exampleModal">Go to feedback form</button>'
}
html += '</div>'
} else {
html += '<div class="messages__item messages__item--operator">' + '<div class="timeUser">' + item.timestamp + '</div>' + item.message + '</div>'
}
});
const chatmessage = chatbox.querySelector('.chatbox__messages');
chatmessage.innerHTML = html;
if (formData.get('questionImageFile')) {
console.log(i)
var output = document.getElementById(i);
output.src = window ? .URL ? .createObjectURL(formData.get('questionImageFile'));
i = i + 1;
}
// $("#question").val()
$("#question").val("");
},
error: function(result) {
alert('error');
this.updateChatText(chatbox)
$("#question").val("");
}
});

Progress bar of some files do not load (javascript)

this is my problem.
I have an input to upload several files at the same time, then I have an ajax that is responsible for sending the request and events listener to load the bars.
The problem is when I upload 8 files and some do not meet the validations (size and format), then draw most of the bars and the last ones do not.
The file is uploaded but neither the bar nor the text is drawn
This is the javascript code
<script type="text/javascript">
var newFileList = [];
$('.addfiles').on('click', function () { $('#fileUploader').click(); return false; });
$(document).ready(function () {
$('input[type=file]').change(function () {
if (this.files.length != 0) { $("#btnUpload").attr('disabled', false); };
$("#bars").remove();
$("#divFiles").append('<div id="bars"></div>')
for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically
var fileId = i;
const file = this.files[i];
if (validateFileExtension(file)) {
$("#bars").append(
'<div id = "' + fileId + '" >' +
'<div>' + file.name + '</div>' +
'<div class="progress">' +
'<div class="bar" id="progressbar_' + fileId + '" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>' +
' </div>' +
'<div>' +
'<input type="button" class="btn btn-danger" style="display:none;line-height:6px;height:25px" id="cancel_' + fileId + '" value="cancel">' +
'</div>' +
'<div>' +
'<p class="progress-status" style="text-align: right;margin-right:-15px;font-weight:bold;color:saddlebrown" id="status_' + fileId + '"></p>' +
'</div>' +
'<div>' +
'<p id="notify_' + fileId + '" style="text-align: right;"></p>' +
'</div>' +
'</div>'
);
}
};
$('file_count').text('# Files selected: ' + newFileList.length);
})
});
function uploadFiles() {
var file = document.getElementById("fileUploader")//All files
for (var i = 0; i < newFileList.length; i++) {
uploadSingleFile(newFileList[i], i);
}
}
function uploadSingleFile(file, i) {
var fileId = i;
var ajax = new XMLHttpRequest();
//Progress Listener
ajax.upload.addEventListener("progress", function (e) {
console.log(file);
var percent = (e.loaded / e.total) * 100;
$("#status_" + fileId).text(Math.round(percent) + "% uploaded, please wait...");
$('#progressbar_' + fileId).css("width", percent + "%")
$("#notify_" + fileId).text("Uploaded " + (e.loaded) + " KB of " + (e.total) + " KB ");
}, false);
//Load Listener
ajax.addEventListener("load", function (e) {
$("#status_" + fileId).text("File upload!");
$('#progressbar_' + fileId).css("width", "100%")
//Hide cancel button
var _cancel = $('#cancel_' + fileId);
_cancel.hide();
}, false);
//Error Listener
ajax.addEventListener("error", function (e) {
$("#status_" + fileId).text("Upload Failed");
}, false);
//Abort Listener
ajax.addEventListener("abort", function (e) {
$("#status_" + fileId).text("Upload Aborted");
}, false);
var imagePath = window.location.search;
var filePath = imagePath.replace("imagePath", "filePath");
ajax.open("POST", "/File"+filePath); // Your API .net, php
var uploaderForm = new FormData(); // Create new FormData
uploaderForm.append("file", file); // append the next file for upload
ajax.send(uploaderForm);
//Cancel button
var _cancel = $('#cancel_' + fileId);
_cancel.show();
_cancel.on('click', function () {
ajax.abort();
})
}
function validateFileExtension(file) {
if (!/(\.bmp|\.jpg|\.gif|\.png)$/i.test(file.name)) {
bootbox.alert("Invalid file type:" + file.name + " . Only JPG, GIF, PNG or BMP File");
return false;
}
// Validate Size
var imgsize = document.getElementById('ImgSize').value;
var size = file.size;
// check file size
if (size > imgsize) {
$(this).val("");
bootbox.alert("The size of " + file.name + " is too big: " + size + " Byte, you only can upload " + imgsize + " Byte");
return false;
}
newFileList.push(file);
return true;
}
</script>
EDIT
apply the changes but follow the same problem the file is uploaded, but the bar is not drawn on the screen or anything else
function uploadFiles() {
filesToUpload = newFileList.slice(0);
uploadSingleFile(filesToUpload.pop(), 0); // start the process here
}
function uploadSingleFile(file, i) {
var fileId = i;
var ajax = new XMLHttpRequest();
//Progress Listener
ajax.upload.addEventListener("progress", function (e) {
var percent = (e.loaded / e.total) * 100;
$("#status_" + fileId).text(Math.round(percent) + "% uploaded, please wait...");
$('#progressbar_' + fileId).css("width", percent + "%")
$("#notify_" + fileId).text("Uploaded " + (e.loaded) + " KB of " + (e.total) + " KB ");
}, false);
//Load Listener
ajax.addEventListener("load", function (e) {
$("#status_" + fileId).text("File upload!");
$('#progressbar_' + fileId).css("width", "100%")
//Hide cancel button
var _cancel = $('#cancel_' + fileId);
_cancel.hide();
}, false);
//Error Listener
ajax.addEventListener("error", function (e) {
$("#status_" + fileId).text("Upload Failed");
}, false);
//Abort Listener
ajax.addEventListener("abort", function (e) {
$("#status_" + fileId).text("Upload Aborted");
}, false);
var imagePath = window.location.search;
var filePath = imagePath.replace("imagePath", "filePath");
ajax.open("POST", "/File" + filePath); // Your API .net, php
var uploaderForm = new FormData(); // Create new FormData
uploaderForm.append("file", file); // append the next file for upload
ajax.send(uploaderForm);
ajax.onreadystatechange = function () {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
console.log('successful');
if (filesToUpload.length > 0) { // do this inside your ajax success call
uploadSingleFile(filesToUpload.pop(), ++i);
}
else {
console.log(ajax.status);
console.log('failed');
}
}
}
}
//Cancel button
var _cancel = $('#cancel_' + fileId);
_cancel.show();
_cancel.on('click', function () {
ajax.abort();
})
}

Jquery File Upload Add data to preview when upload is done

I'm using blueimp/jQuery-File-Upload's plugin to upload files and I'm trying (unsuccessfully) to add a data-attribute to the preview when the upload is done.
Here is the code:
$('#fileupload').fileupload({
autoUpload: true,
disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|doc?x|pdf|xml|psd|tif)$/i,
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<div class="template-upload fade">' +
'<span class="preview"></span>' +
'<p class="name"></p>' +
'<div class="error"></div>' +
'<div class="progress"></div>' +
(!index && !o.options.autoUpload ?
'<button class="start" disabled>Start</button>' : '') +
(!index ? '<button class="cancel">Cancel</button>' : '') +
'</td>' +
'</div>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(file.error);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<div class="template-download fade">' +
'<span class="preview"></span>' +
'<p class="name"></p>' +
(file.error ? '<div class="error"></div>' : '') +
//'<button class="delete">Delete</button>' +
'</div>');
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.name').text(file.name);
row.find('.error').text(file.error);
} else {
row.find('.name').append($('<a></a>').text(file.name));
if (file.thumbnailUrl) {
row.find('.preview').append(
$('<a></a>').append(
$('<img>').prop('src', file.thumbnailUrl)
)
);
}
row.find('a')
.attr('data-gallery', '')
.prop('href', file.url);
row.find('button.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
}
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
}).bind('fileuploaddone', function(e, data) {
var arquivo = data.result.files[0].url;
var varCodTipoProcesso = $('.indexador-campo').data('cod-tipo-processo');
var varCodEstabelecimento = $('.estabelecimento-select').parent().children('a').children('span').data('cod-estabelecimento');
var varArrayCampos = [];
var tipos = ['jpg', 'png', 'gif', 'psd', 'bmp', 'tif', 'pdf', 'xml'];
var nome = data.result.files[0].name;
var today = new Date();
var s = today.getSeconds();
var i = today.getMinutes();
var h = today.getHours();
var dd = today.getDate();
var mm = today.getMonth();
var yyyy = today.getFullYear();
now = '' + yyyy + mm + dd + h + i + s;
var filename = now + '.' + nome.substr(nome.lastIndexOf('.')+1);
$('.indexadores-campos .row input').each(function() {
var indexadoresData = {};
indexadoresData.nomCampo = $(this).attr('name');
indexadoresData.numOrdem = $(this).data('num-ordem');
indexadoresData.valor = $(this).val();
varArrayCampos.push(indexadoresData);
});
console.log(varCodTipoProcesso)
$.getJSON('/sistema/ajax/setUploadFileJson.php', {
arquivo: arquivo,
varCodProcesso: null,
varCodTipoProcesso: varCodTipoProcesso,
varCodEstabelecimento: varCodEstabelecimento,
varCodTipoDocumento: null,
varArrayCampos: varArrayCampos,
pasta: null,
tipos: tipos,
nome: filename
}).done(function(doc) {
console.log(data.codDocumento); //there's the data I want to add to the preview
}).fail(function() {
console.log('error');
});
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
type: 'HEAD'
}).fail(function () {
$('<div class="alert alert-danger"/>').text('Upload server currently unavailable - ' + new Date()).appendTo('#fileupload');
});
}
// Load & display existing files:
$('#fileupload').addClass('fileupload-processing');
$.ajax({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).always(function () {
$(this).removeClass('fileupload-processing');
}).done(function (result) {
$(this).fileupload('option', 'done')
.call(this, $.Event('done'), {result: result});
});
I managed to get the data from the server, but douldn't add it to the preview and I can't figure out how to do it. Can anybody help me on this?

The answered is already available and both will work fine.
You need to use additional plugin jquery.fileupload-ui.js as mentioned in answer (https://stackoverflow.com/a/11016888/2871356) or as mentioned in answer(https://stackoverflow.com/a/18284685/2871356) Place this inside your add(e, data) callback function, adjusting for your own html elements accordingly:
$('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '"/>');

object doesn't support this property or method using AJAX

Please see the code below:
$.ajax({
type: "POST",
url: "Results1.aspx/TableQuery",
data: JSON.stringify({
mappingid: res[i],
strCon: $("#fieldGenieConnectionString")[0].value,
strTypeSession: $("#fieldTypeSession")[0].value
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess(i, res.length),
error: OnError,
failure: function (response) {
alert('there was a failure loading the webpage')
}
});
and the code below:
function OnSuccess(i, totalrows) {
return function (response) {
//if (response.d != "") {
var strResponse = response.d;
strResponse = strResponse.toUpperCase;
if (strResponse.indexOf("<TR>") > 0) {
// alert(response.d);
document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
}
numSucceeded++;
var completeCalculation = (numSucceeded / totalrows) * 100
var rounded = completeCalculation.toFixed(0);
document.getElementById('ProgressIndicator').innerHTML = rounded + ' % complete';
document.getElementById('ProgressIndicator2').innerHTML = rounded + ' % complete';
if (numSucceeded === totalrows) {
var end = new Date().getTime();
var htmlResponse = "Loaded after: " + (end - start) / 1000 + " seconds"
document.getElementById('TotalTimeLabel').innerHTML = htmlResponse;
document.getElementById('TotalTime2Label').innerHTML = htmlResponse;
$("#LoadingImage").hide();
$("#LoadingImage2").hide();
}
}
}
The following line causes an error:
if (strResponse.indexOf("<TR>") > 0) {

strResponse = strResponse.toUpperCase;
There is a typo here. I think you want to write strResponse = strResponse.toUpperCase();
You are assigning a function to strResponse instead of calling the toUpperCase() on the existing strResponse

Formdata and XMLhttpRequest not Working on IE 11

I am using formdata and XMLHttpRequest to submit my form using ajax. Now everything works well on other browsers except IE 11 . Note I am uploading a file using this ajax request.
My code is as follows
var form = document.getElementById('chatMessageForm');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', form.getAttribute('action'), true);
xhr.responseType = "json";
xhr.send(formData);
xhr.onload = function (e) {
var new_message_response = xhr.response; // not responseText
console.log(new_message_response);
if (new_message_response.conversationStatus) {
alert('This Conversation is disabled by Other User');
jQuery('.conversationadd .messagebox #msgbox').attr('disabled',true);
} else {
var downloadLink = '';
if (new_message_response.attachment != '' && new_message_response.attachment != null) {
downloadLink = 'Download Attachment';
}
jQuery('.chatmessageinner').append('<div class="singlemsg right" id=" ' + new_message_response.id + ' ">'
+ '<p> ' + msg + ' </p>'
+ '<div class="messagefooter">'
+ '<span class="time">' + new_message_response.time + '</span>'
+ downloadLink
+ '</div>'
+ '</div>');
var objDiv = document.getElementsByClassName("chatmessageinner")["0"];
objDiv.scrollTop = objDiv.scrollHeight;
}
}

I have used jQuery.ajax instead of XMLhttpRequest now everything works smooth as silk :) Now my code looks like this:
var form = document.getElementById('chatMessageForm');
var formData = new FormData(form);
jQuery.ajax({
url: form.getAttribute('action'),
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (data) {
var new_message_response = data;
if (new_message_response.conversationStatus)
{
alert('This Conversation is disabled by Other User');
jQuery('.conversationadd .messagebox #msgbox').attr('disabled', true);
}
else
{
var downloadLink = '';
if (new_message_response.attachment != '' && new_message_response.attachment != null)
{
downloadLink = 'Download Attachment';
}
jQuery('.chatmessageinner').append('<div class="singlemsg right" id=" ' + new_message_response.id + ' ">'
+ '<p> ' + msg + ' </p>'
+ '<div class="messagefooter">'
+ '<span class="time">' + new_message_response.time + '</span>'
+ downloadLink
+ '</div>'
+ '</div>');
var objDiv = document.getElementsByClassName("chatmessageinner")["0"];
objDiv.scrollTop = objDiv.scrollHeight;
}
},
error: function (data) {
alert("error");
}
});