How to modify file in form and submit the form with modified data?

I have a simple form:

<form id="uploadForm">
    <input type="file" name="files"> <br/><br/>
    <button type="submit">Upload</button>
</form>

Also i have a function, which gets the file as an input and returns the blob as an output, e.g.

async function doSmthWithFile(File) {
    var objFile=File;

    var plainTextBytes=await readFile(objFile)
        .catch(function(err){
            console.error(err);
        });
    plainTextBytes=new Uint8Array(plainTextBytes);
    return new Blob([plainTextBytes], {type: 'image/jpeg'});
}

i do want to get file, which user put in the form, modify it, using doSmthWithFile function and submit the form with the blob, which i received from doSmthWithFile! the condition i want to succeed is that the form should be sent as default one, because in that case, the redirect happens on the server side. On my server side i have an endpoint which seems like:

    @PostMapping("/")
    public String uploadFile(Map<String, Object> model,
                             @RequestParam("files") MultipartFile[] files) {
        Arrays.stream(files).forEach(storageService::store);
        model.put("files", getPathToDownloadUri());
        return "mainPage";
    }

for now i made the next:

    uploadForm.onsubmit = async (e) => {
        e.preventDefault();
        let oldFormData = new FormData(uploadForm);
        let file = oldFormData.get("files");
        let newFile = await doSmthWithFile(file);
        let newFilename = file.name + '.enc';
        oldFormData.set("files", newFile, newFilename);
        await fetch('/', {
            method: 'POST',
            body: oldFormData
        });
        uploadForm.reset();
        return true;
    };

the only problem i have with this is that re page is not refreshing now (or redirect does not happen)

so as i think i my ideal world i need smth like next:

ONSUBMIT() {
    1. get the current form data
    2. get the file from it
    3. process this new file -> generate new one
    4. set in formdata for the key "files" new file as value
    5. continue working in default mode (send form, clear form, redirect, etc.)
}

could someone please help me with solving such problem?))

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW