Home>

I'm planning to base64 encode a png image with js, POST it as json, decode the encoded string with python, and save it as png.
I'm writing the code as below, but when I save it, the file is corrupted and I can't open it.
I would like to know how to save it properly.

Corresponding source code
// encode
btoa (encodeURIComponent (the_file.target.result))
#Decode and save
with open (path,'w', encoding ='utf-8') as f:
            f.write (
                urllib.parse.unquote (
                    base64.b64decode (
                        validated_data ['content'] # js encoded string
                    ) .decode ()
                )
            )


Addendum: Overall code

// Get cookie
const get_cookie = name =>{
    let cookieValue = null;
    if (document.cookie&&document.cookie! =='') {
        const cookies = document.cookie.split (';');
        for (var i = 0;i<cookies.length;i ++) {
            let cookie = jQuery.trim (cookies [i]);
            if (cookie.substring (0, name.length + 1) === (name +'=')) {
                cookieValue = decodeURIComponent (cookie.substring (name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
class Transmission {
    constructor (method, content, func) {
        this.method = method;
        this.content = content;
        this.func = func;
        this.__proto__.csrftoken = get_cookie ('csrftoken');
    }
    send (url) {
        fetch (url, {
            method: this.method,
            credentials: "same-origin",
            headers: {"Accept": "application/json",
                "Content-Type": "application/json",
                "X-CSRFToken": this.csrftoken,
            },


            body: JSON.stringify (this.content)
        })
        .then (response =>{
            if (response.ok) {
                return response.json ();
            } else {
                throw new Error ("not found ...");
            }
        })
        .then (data =>{
            // this binding
            this.func (data);
        })
        .catch (e =>{
            console.log (e.message);
        });
    }
}
Transmission.uid = get_cookie ('uid');

{
    let file_name = file_content = null;
    // Extract the contents of the file and base64 encode
    document.querySelector ('.custom-file-input'). addEventListener ('change', function (e) {
        const file = document.getElementById ("input_file"). files [0];
        const next_sibling = e.target.nextElementSibling;
        file_name = file.name;
        next_sibling.innerText = file_name;
        if (1<= document.getElementById ("input_file"). files.length) {
            let reader = new FileReader ();
            reader.onload = the_file =>{
                file_content = btoa (encodeURIComponent (the_file.target.result));
            }
            reader.readAsText (file, "utf-8");
        }
    });
    // document.getElementById ("send"). addEventListener ("click", e =>{
    // const cmd = document.getElementById ("cmd");
    // if (cmd.value! = "") {// let content = {
    // sender: Transmission.uid,
    // cmd: cmd.value,
    // recipient: "00-FF-CE-89-86-5B"
    //}
    // if (file_name! = null&&file_content! = null) {
    // content ["name"] = file_name;
    // content ["content"] = file_content;
    //}
    // tran = new Transmission (
    // "POST",
    // content,
    // (data) =>{
    // console.log (data);
    //}
    //);
    // tran.send ("http://127.0.0.1:8000/api/command/?format=json");
    //}
    //});
    document.getElementById ("send"). addEventListener ("click", e =>{
        const cmd = document.getElementById ("cmd");
        if (cmd.value! = "") {
            let content = {
                response: "hogheoh",
            }
            if (file_name! = null&&file_content! = null) {
                content ["name"] = file_name;
                content ["content"] = file_content;
            }
            tran = new Transmission (
                "PATCH",
                content,
                (data) =>{
                    console.log (data);
                }
            );
            tran.send ("http://127.0.0.1:8000/api/command/2/?format=json");
        }
    });
    console.log (document.getElementById ("target"). value);
}
Supplementary information (FW/tool version, etc.)

python3
django rest framework