Change file name before upload

Our asp.net aspx page uses the following javascript and jquery code to do an immediate resize andupload when the input file element (browse) button is clicked. This is used in a public site and many times from a smartphone. Problem is that an iPhone will not give a unique name to a camera-taken file and names all of them “image.jpg”. This causes an overwrite when someone previously uploads a camera picture. We also save the file names as an array in a Textbox named txtFilesUploaded. The file names are saved in a text file and uploaded after all photos are uploaded. Can anyone tell me where the file name can be changed so that the uploaded resized file name is unique? I was thinking of adding a date and time (hhmmss) string (e.g. 20211203144355) to the file name so it is unique.

“`
window.uploadPhotos = function(url){
// Read in file
var file = event.target.files[0];

// Ensure it’s an image
if(file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Resize the image
// TODO : pull max size from a site config
var canvas = document.getElementById(‘thecanvas’);
var max_size = 600;
var width = image.width;
var height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext(‘2d’).drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL(‘image/jpeg’).replace(“image/jpeg”, “image/octet-stream”);

var resizedImage = dataURLToBlob(dataUrl);
$.event.trigger({
type: “imageResized”,
blob: resizedImage,
url: dataUrl,
fileName: file.name
});
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
};

/* Utility function to convert a canvas to a BLOB */
var dataURLToBlob = function (dataURL) {
var BASE64_MARKER = ‘;base64,’;
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(‘,’);
var contentType = parts[0].split(‘:’)[1];
var raw = parts[1];

return new Blob([raw], {type: contentType});
}

var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(‘:’)[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;

var uInt8Array = new Uint8Array(rawLength);

for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}

return new Blob([uInt8Array], {type: contentType});
}
/* End Utility function to convert a canvas to a BLOB */

/* Handle image resized events */
$(document).on(“imageResized”, function (event) {
var data = new FormData($(“form[id*=’uploadImageForm’]”)[0]);

var sdate = new Date().toLocaleTimeString(“en-US”).replace(/:/g, ”);
sdate = Left(sdate, sdate.length – 3) + new Date().getSeconds();

if (event.blob && event.url) {
data.append(‘image_data’, event.blob);
$.ajax({
url: ‘uploadPhoto.aspx/uploadPhoto’,
data: JSON.stringify({
“imageData”: event.url, // this is image data
“fileName”: event.fileName
}),
dataType: “json”,
contentType: “application/json; charset=utf-8”,
type: ‘POST’,
success: function (data) {
addFileName(event.fileName);
//change source of image to new one uploaded
var x = ‘uploads/’ + event.fileName;
switch(vupnum) {
case 1:
$(“#Image1”).attr(“src”, x);
break;
case 2:
$(“#Image2”).attr(“src”, x);
break;
case 3:
$(“#Image3”).attr(“src”, x);
break;
case 4:
$(“#Image4”).attr(“src”, x);
break;
case 5:
$(“#Image5”).attr(“src”, x);
break;
case 6:
$(“#Image6”).attr(“src”, x);
break;
default:
vupnum = vupnum + 0;
}

},
error: function (req, status, error) {
alert(‘Sorry…upload failed’);
var lbl = document.getElementById(‘LblError’);
lbl.innerHTML = req.responseText;

}
});
}
});

function addFileName(sname) {
var vtxt = document.getElementById(‘txtFilesUploaded’);
vtxt.value += sname + ‘~’;
}
“`

Also in #JavaScript ↴