Is there a way to put a javascript-made file (blob) automatically into a file upload value

Question

I was trying to code a system where a javascript made file would be put into a form where it could be submitted, but I could not a find a way how to do it

I tried putting the file variable into the value of the file upload input. I also tried making a blob link and putting that in the file upload system.

I tried

<form method="post" enctype="multipart/form-data" action="http://localhost:88/index.php">
<input type="file" name="data" id="savegamedataZ"></input>
<button onclick="writeSave()" id="submit-save" class="build-buttons">Save</button>
</form>
<script>
    var saveTempFile = new Blob(
        [data], {type:'text/plain;charset=utf8'}
    );
    document.getElementById('savegamedataZ').value = saveTempFile;

</script>

I also tried

<form method="post" enctype="multipart/form-data" action="http://localhost:88/index.php">
<input type="file" name="data" id="savegamedataZ"></input>
<button onclick="writeSave()" id="submit-save" class="build-buttons">Save</button>
</form>
<script>
    var saveTempFile = new Blob(
        [data], {type:'text/plain;charset=utf8'}
    );
    var fileURL = window.URL.createObjectURL(saveTempFile);
    document.getElementById('savegamedataZ').value = fileURL;

</script>

I even tried

<form method="post" enctype="multipart/form-data" action="http://localhost:88/index.php">
<input type="file" name="data" id="savegamedataZ"></input>
<button onclick="writeSave()" id="submit-save" class="build-buttons">Save</button>
</form>
<script>
    var saveTempFile = new Blob(
        [data], {type:'text/plain;charset=utf8'}
    );
    document.getElementById('savegamedataZ').file[0] = saveTempFile;

</script>

I even also tried

<form method="post" enctype="multipart/form-data" action="http://localhost:88/index.php">
<input type="file" name="data" id="savegamedataZ"></input>
<button onclick="writeSave()" id="submit-save" class="build-buttons">Save</button>
</form>
<script>
    var saveTempFile = new Blob(
        [data], {type:'text/plain;charset=utf8'}
    );
    var fileURL = window.URL.createObjectURL(saveTempFile);
    document.getElementById('savegamedataZ').file[0] = fileURL;

</script>

Everytime I went to the output, it gave me that nothing was uploaded yet. How can i put a javascript blob into the input

Answer 1

Use the File and DataTranfer API.

Example:

<form method="post" enctype="multipart/form-data" action="http://localhost:88/index.php">
<input type="file" name="data" id="savegamedataZ"></input>
<button onclick="writeSave()" id="submit-save" class="build-buttons">Save</button>
</form>
<script>
    const blob = // some blob...
    const file = new File([blob], "file_name");
    const dt = new DataTransfer();
    dt.items.add(file);
    document.getElementById('savegamedataZ').files = dt.files;
</script>