1

Estoy intentando hacer un programa con 'NodeJS' que pueda editar archivos online de forma colaborativa. El problema está a la hora de guardar dicho archivo, que no consigo hacer que lea el nombre.

Aquí defino en concreto la constante cData, que es lo que utiliza el resto del programa para obtener el nombre del archivo.

/* requerir dependencias */
const http = require("http");
const express = require("express");
const fileUpload = require('express-fileupload');
const ShareDB = require("sharedb");
const richText = require("rich-text");
const WebSocket = require("ws");
const WebSocketJSONStream = require("websocket-json-stream");
const fs = require("fs");

ShareDB.types.register(richText.type);

const app = express();
app.use(express.static("static"));
app.use(express.static("node_modules/quill/dist"));

const backend = new ShareDB();
const connection = backend.connect();

const cData ={
    setData:(obj)=>{
      let da = JSON.stringify(obj);
      fs.writeFile("./cdata.json", da, function (err){
        if (err) return console.log("No funciono");
         console.log('Se ha reescrito perfectamente');
      });
    },
    getData:()=>{
      let da = fs.readFileSync("./cdata.json").toString();
      try  {
        d=JSON.parse(da);
        return d;
      } catch{
        return {};
      }
    }
}

Y aquí utilizo el GET para poder operar. Pero como ven, en todos me funciona correctamente (en //index y en //data) pero en //save no, ya que me da un valor 'undefined'. Es algo que no comprendo, cómo en todos los demás funciona, y en //save concretamente no.

/* PAGINACION */
/* index */
app.get('/',function(req,res){
    var fs = require("fs");
        res.sendfile("./static/index.html");
});
app.get('/ini.js',function(req,res){
    res.send('window.cData='+JSON.stringify(cData));
});


/* data */
app.get('/data',function(req,res){
    var fs = require("fs");
    res.sendfile("./files/"+cData.fileName);
});

app.get('/rdata', function(req, res){

  let param ={
      fileName : req.query.fileName,
      time:new Date
  }
  param.contents= fs.readFileSync("./files/"+param.fileName).toString();
  res.send(JSON.stringify(param));
});

/* save */
app.get('/save',function(req,res){

    fs.writeFile("./files/"+cData.fileName, req.query.myText, function (err){
    if (err) return console.log("No funciono");
    console.log('Se ha reescrito perfectamente');
    console.log(cData.fileName);
    console.log(req.query.myText);
        });
});

Pd: 'fs' está como const en el primer fragmento de código, he probado a meterlo como una variable local, pero tampoco funciona.

introducir la descripción de la imagen aquí

Aquí inserto cómo trabaja el código en consola, y como ven, myText si que funciona, como en todas partes, pero cData.fileName decide no funcionar aquí. ¿Hay alguna explicación?

[EDIT]

Aquí pongo el fragmento de donde sale el valor fileName:

function showname () {
      /*var name = document.getElementById('fileInput').files[0]; 
      console.log(name.files.item(0).name);*/
    var fileName = document.getElementById("fileInput");
    var files = fileName.files;
    var file
    // loop through files
    for (var i = 0; i < files.length; i++) {
        // get item
        file = files.item(i);
        //or
        file = files[i];
        return file.name;
    }
}

Y acabo de caer en la cuenta de que es una variable local...Pero otras funciones lo escuchan. Ahora si que estoy perdido.

1
  • También he probado con 'req.query.fileName' y tampoco funcionaba, siempre daba un valor 'undefined'
    – AQMR
    el 2 feb. 2021 a las 9:33

2 respuestas 2

0

Hola te recomiendo que lo hagas con un método que admita body para poder trabajar con datos mas extensos, el request get no recibe body, así que puedes utilizar usar post o put.

En lugar de utilizar queries utiliza parámetros para obtener el fileName y el body para obtener el texto, con body-parser claro.

Un ejemplo breve es:

npm i body-parser --save
const bodyParser = require('body-parser');
app.use(bodyParser.json());
...
app.post('/files/:filename', (req, res) => {
  const { myText } = req.body;
  const { fileName } = req.params
  foo...
})

Extenderé mi respuesta cuando indiques en la pregunta como haces el request desde el cliente :D, puede que sea un problema de como armas la url.

[EDIT]:

Tampoco entiendo de donde viene cData.fileName podrías explicar en donde estas almacenando el fileName en ese objeto, probablemente ahí esté el problema.

Realmente lo explicado en el ejemplo es la manera adecuada en la que se debería trabajar para realizar operaciones que requieran guardar o introducir data en el servidor, un saludo.

1
  • Nice, podrias actualizar tu pregunta poniendo como armas la request en el fron-end? y tambien explicando de donde sale cData.fileName. Sino como te comenté la manera adecuada de trabajar es con put o post pero aun así con get puedes utilizar los parámetros de url, es mejor que los queries por ejemplo app.get('/save/:fileName') y obtienes el parámetro como te explique antes. En el front la request seria algo como fetch('/save/myfile.json?myText=foo'), un saludo. el 2 feb. 2021 a las 12:25
0

Ya lo he conseguido, el problema estaba en el documento html, ya que no recibía una respuesta con el file.Name

El problema venía de aquí:

<input type="submit" id="btn" value="Guardar">

El input btn activaba la función showname

function showname () {
      /*var name = document.getElementById('fileInput').files[0]; 
      console.log(name.files.item(0).name);*/
    var fileName = document.getElementById("fileInput");
    var files = fileName.files;
    var file
    // loop through files
    for (var i = 0; i < files.length; i++) {
        // get item
        file = files.item(i);
        //or
        file = files[i];
        return file.name;
    }
}

Todas las demás funciones podían leer file.Name ya que obtenían una respuesta directa de la misma función con el POST

$("#btn").click(function(){
    var myText = $(".ql-editor").html();
    alert('Guardar');
    var url ="./save";

    $.ajax({
    url: "/save",
    data:{myText : myText, fileName:showname()}, dataType: "POST"
    }).done(function(dat) {
    $(".ql-editor").html(dat)
    })
  });

Al final solo tuve que modificar un poco la función ajax, para mandar mediante /save el valor filename:showname()

/* save */
app.get('/save',function(req,res){
    console.log(cData.getData());
    fs.writeFile("./files/"+req.query.fileName, req.query.myText, function (err){
    if (err) return console.log("No funciono");
    console.log('Se ha reescrito perfectamente');
        });
});

Y captarlo en el JS con el GET y el req.query.fileName

Ahora lo único malo es que, cualquier texto que escriba, al guardarlo y abrirlo en un .txt, salen las etiquetas de salto de línea, párrafo, etc...Pero ese es otro cantar, de momento me sirve.

¡¡Muchísimas gracias a los que me habéis ayudado!!

2
  • 1
    Hola, si utilizaras el body podrías guardar la data en un template literal :D, a de mas seria util dejar de utilizar ajax que ya esta un poco deprecated por funcionalidad e ir adoptando nuevas tecnologias y API's como fetch que es estandar o axios que es una libreria, saludos. el 3 feb. 2021 a las 10:36
  • 1
    Seguramente sea la forma más eficaz de hacerlo, y te lo agradezco muchísimo, es más, lo probé en un documento a parte y me funcionaba bien, pero a la hora de implementarlo en el código completo que tengo, me era muy raro. Igualmente gracias.
    – AQMR
    el 3 feb. 2021 a las 10:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.