Uploading Image and renaming the file

Ask the Community Get Answers
1

I have a form where people upload an image. They have to give that image a name.

Let’s say that image name is “A nice image”.

They add that file.

What I wondered was whether there would be a way to have that image renamed upon upload to match the image name less spaces.

So if a person uploaded afdklnglkfdg.jpg, after saving it becomes

aniceimage.jpg in the database.

Cheers.

2

I cannot imagine this being possible.

You are talking about multiple users updating from multiple sources to a common database.

So you’re basically inputting a data field into your shared database which has no interaction with the operating/filing system of the sending computer.

To store the image the sender has indicated the name of a file in the first instance to be able to upload it. I do not believe we have a cut and paste option for images therefore a filename and location has to be specified.

You could assign a label to be displayed with the image as opposed to the filename but not altering the image name, I would not think that was possible.

To give an example if I click to see the path and name of an image stored in my database it comes up like this

https://s3.ap-southeast-2.amazonaws.com/ap-southeast-2-assets.knack.com/assets/5d51f2924b401b00108cxxxx/68b438bfb55967028b0bxxxx/original/1941005403.jpg

This is where the image once uploaded now resides within the knack environment.

Any changes would need to be made THERE.

My honest opinion, if you want renaming, you need to instruct the users to change it to the correct name before uploading it in the first instance.

Cheers

3

Yes, it can be redone but you have to use Javascript.

$(document).on(‘knack-scene-render.scene_XYZ’, function(event, scene) {

// Watch for file input change on the file field
$(document).on(‘change’, ‘input\[type=“file”\]’, function(e) {
let fileInput = e.target;
let file = fileInput.files\[0\];

if (file) {
  // Get the user-entered "Image Name" from the form field
  let imageName = $('input[name="field_123"]').val(); // Replace field_123 with your image name field key

  if (imageName) {
    // Clean up name: remove spaces and non-alphanumerics
    let safeName = imageName.toLowerCase().replace(/[^a-z0-9]/g, '');

    // Keep file extension
    let extension = file.name.split('.').pop();
    let newName = safeName + '.' + extension;

    // Create a new File object with renamed filename
    let renamedFile = new File([file], newName, { type: file.type });

    // Replace the input’s FileList with the new file
    let dataTransfer = new DataTransfer();
    dataTransfer.items.add(renamedFile);
    fileInput.files = dataTransfer.files;
  }
}
});
});
1 Like