如何以方形空间形式提醒上传文件的文件名？

Question

I have a form on a page in SquareSpace that allows an image file to be uploaded:-

https://www.colourourstory.com/uploads (try with dummy data if needed).

I need to add the filename of the uploaded image to a hidden field named "SQF_FILENAME" which already exists.

Any tips on how do I do this please as the value is only available after a successful upload?

Thanks

Jonathan

Answer 1

I can suggest using some jQuery.

For example, you can hook a function to the change event of the input[type="file"] and grab its value. Then all you need to do is set the value to your hidden field.

Here is a short code example:

 $('.form-block').on('change', 'input[type="file"]', function() { console.log($(this)); console.log($(this).val()); const fileName = $(this).val().split('C:\\fakepath\\').pop(); $('input[name="SQF_FILENAME"]').val(fileName); });

Hope this helps.

Cheers.