I use a browser tool for uploading media files for different products.

It's a modal where I drag and drop files. Once the files are processed, the modal turns to the following type of page:

<div class="row">
  <div class="col"><a target="_blank" rel="noopener noreferrer" class="cursor-pointer">0123456789.video.mp4</a></div>
</div>
<div class="row">
  <div class="input-container col-4">
    <div class="mb-1 sub-title">Product_ID</div>
    <input autocomplete="no" type="text" class="form-control" value="">
    <div class="mb-1 sub-title">Media_Type</div>
    <input autocomplete="no" type="text" class="form-control" value="">
  </div>
</div>
<div class="row">
  <div class="col"><a target="_blank" rel="noopener noreferrer" class="cursor-pointer">9876543210.image.jpg</a></div>
</div>
<div class="row">
  <div class="input-container col-4">
    <div class="mb-1 sub-title">Product_ID</div><input autocomplete="no" type="text" class="form-control" value="">
    <div class="mb-1 sub-title">Media_Type</div><input autocomplete="no" type="text" class="form-control" value="">
  </div>
</div>

Each set of divs contains the filename and a form for entering the product_ID and media_type. Most of the times these are already contained in the filename, so I would like to use a script (greasemonkey style) that takes the text from the filename and uses it as input for the form, instead of entering it manually for each file.

For example, if the filename is 0123456789.video.mp4, use '0123456789' as input for product_ID and 'video' as input for media_type.

The file naming template is [Product_ID].[Media_type].extension, so the dot always acts as delimiter between the 2 parts of the filename.

I already tried to find a similar case here, but without success, or without being able to translate it to my use case, since my programming skills are below basic.

I would appreciate if you could help me with any hints.

Thanks.