Javasctipt, Chunks and NodeJs-CodePudding

I need to upload a file on the Postgres database using the nodeJs server. On frontend (vueJs) I have <input ref="file_upload" type="file" multiple="true" @change="changeFile" > element where I pick files. After I select the wanted file I convert it to a base64 string with the following code:

        var file_input = this.$refs.file_upload
        var base64String

        function changeFile() {
            for(let i = 0; i < file_input.files.length; i  ) {

                var reader = new FileReader();

                reader.onloadend = () => {
                    base64String = reader.result
                        .replace('data:', '')
                        .replace(/^. ,/, '');

                    console.log(base64String)
                    console.log("SIZE: "   base64String.length)

                }
                
                reader.readAsDataURL(file_input.files[i]);

            }
        } 

        file_input.addEventListener('change', changeFile);

After I convert it to a base64 string, on button click I create post request with this code:


btnSubmit.addEventListener("click", () => {

            let dat_title = file_input.files[0].name;

            let url_files = "http://localhost:3000/blobFile/"   dat_title   "/"   base64String

            console.log("URL:\n"   url_files)

            fetch(url_files, {
                method: "POST"
            })
            .then(response => {
                response.json().then(parsedJson => {

                    console.log(parsedJson);

                }) 
            })

        })

And that's where problems start. If the size of the base64 string is less than 16kB, it will normally do a post request and will be inserted into the database table (column is bytea type, so before insert I decode base64 string). But, if the size of the base64 string is more than 16kB, it shows an error that says how it failed to fetch. So I figured out that the URL is too big to fetch and I need to split it into chunks. And my question is how can I do that. How can I split that base64 string into chunks and receive those chunks on the nodeJs server? I've tried millions of solutions but nothing worked. If you know how to tackle this problem please write it down. Under is nodeJs server configuration:

app.js

require('dotenv').config(); 

var express = require('express');
var cors = require('cors');
var app = express();
const pool = require('./dbConnect');
const port = 3000;

app.use(cors());

app.post("/blobFile/:title/:url(*)", pool.postBlobFile)

app.listen(port, () => {
    var host = "localhost";
    console.log(`Server listening on port http://%s:%s`, host, port);
})

dbConnect.js

const postBlobFile = (req, res) => {
    const dat_title = req.params.title
    var base64String = req.params.url

    console.log("TITLE: "   dat_title)
    console.log("STRING: "   base64String)
    console.log("STRING_SIZE: "   base64String.length)

    pool.query(`insert into test_blob (dat_naziv, dat_blob) 
            values ('${dat_title}', decode('${base64String}', 'base64'))`, 
    (err, results) => {
        if (err) console.log(err);
        else{
            res.json(results.rows)
        }
    })
}

module.exports = {
    pool,
    postBlobFile,
}

THANK'S IN ADVANCE

CodePudding user response：

POST is for a reason. you are using GET, POST is just sitting useless in your code

There are 2 Problems which I am seeing

I don't know what you are trying to do. but do note that there is a URL length limit. and you are trying to exploit it and that's why you are getting this error. I don't understand why you are using POST if you won't just want to use bas64 in the URL

It is a best practice that you don't use Postgres for blob or byte type of things. just a suggestion. use something like s3 or spaces.

btnSubmit.addEventListener("click", () => {

     let dat_title = file_input.files[0].name;

     let url_files = "http://localhost:3000/blobFile/"

     console.log("URL:\n"   url_files)

     fetch(url_files, {
         method: "POST",
         'data | body': {'**Your data over here**'}
     })
     .then(response => {
         response.json().then(parsedJson => {

             console.log(parsedJson);

         }) 
     })

 })