0

¿De qué forma puedo cambiar el nombre del archivo al adjuntarlo en un file input en javascript?


<input data-validationrules="{&quot;identifier&quot;:&quot;nombre-main&quot;,&quot;rules&quot;:[{&quot;type&quot;:&quot;required&quot;,&quot;prompt&quot;:&quot;Nombre&quot;}]}" data-validate="nombre-main" placeholder="" name="nombre" id="nombre" value="" type="text">

<input data-validationrules="{&quot;identifier&quot;:&quot;dni-main&quot;,&quot;rules&quot;:[{&quot;type&quot;:&quot;required&quot;,&quot;prompt&quot;:&quot;DNI&quot;}]}" data-validate="dni-main" placeholder="" name="dni" id="dni" value="" type="text">

<input data-validationrules="{&quot;identifier&quot;:&quot;archivo_pdf-main&quot;,&quot;rules&quot;:[{&quot;type&quot;:&quot;required&quot;,&quot;prompt&quot;:&quot;Adjuntar Archivo&quot;}]}" data-validate="archivo_pdf-main" name="archivo_pdf" id="archivo_pdf" type="file">

Lo que no se es como armar el script para q me tome los valores de los input Nombre y DNI y eso reemplazarlos en el nombre del archivo q se adjunte con esos valores. Porque al adjuntar un pdf directamente se carga con el nombre por defecto. Pero yo quiero renombrarlo para q se guarde con los valores de los input que le quiero asignar y asi se guarda en la base de datos.Ejemplo

1
  • Una alternativa es hacerlo en el servidor. No digo que esto sea una solución a lo que buscas, pero sería válido. En todo caso, una recomendación que puedo hacerte es que en vez de guardar el archivo con su nombre original, lo guardes con un nombre totalmente aleatorio (para evitar posibles colisiones), y en base de datos almacenes la ruta a ese archivo con nombre aleatorio y el nombre original que tenía dicho archivo al ser subido por el cliente. Saludos Commented el 27 nov. 2020 a las 14:05

2 respuestas 2

1

Puedes cambiarselo con el metodo FormData.append() de la clase FormData.

Tu código debería ser algo como esto:

const name = document.querySelector('#nombre');
const dni = document.querySelector('#dni');
const pdf = document.querySelector('#archivo_pdf').files[0];

const formData = new FormData();
formData.append('nombre', name);
formData.append('dni', dni);
formData.append('archivo_pdf', pdf, dni + ' ' + name);//<----- El tercer parametro de append es el nuevo nombre del archivo
5
  • mi consulta es como hacer para q al seleccionar el input file ( el nombre del archivo cambie con los nombres por los datos ingresados en los input #nombre y #dni ) para que el archivo se guarde con el nombre de esos ingresos de datos (nombre_dni.pdf) Commented el 27 nov. 2020 a las 13:52
  • ¿Te refieres al nombre que visualmente sale en la pagina? Ese no puede ser cambiado por que hace referencia a la ruta del archivo en tu pc. Lo que puedes hacer es utilizar estrategias para ocultar el input y reemplazarlo por un button y label propios. Commented el 27 nov. 2020 a las 14:15
  • Aqui te dejo unos ejemplos que utilizan el método que te mencioné Commented el 27 nov. 2020 a las 14:29
  • la idea es guardarlo en la base renombrando el achivo con los datos q ingresamos en los input (concatenando y guardar el archivo con ese renombramientos de archivo) Commented el 27 nov. 2020 a las 14:32
  • Normalmente renombras el archivo desde el receptor del archivo antes de guardarlo, por ejemplo si tienes un stack de React y NodeJS, el renombre del archivo se hace desde NodeJS no desde react cuando subes el archivo. De todas formas tal vez este enlace te sea de utilidad cambiando el nombre del archivo Commented el 27 nov. 2020 a las 14:40
0

No puedes modificar el nombre directamente del archivo que subes, ya que es por seguridad, lo que puedes renombrarlo desde el servidor para guardarlo con le nombre que desees.

function file(event){
  let file  = document.getElementById('file');
  document.getElementById('filename').innerHTML = `nombre original: ${file.files[0].name}`;
  let extension = file.files[0].name.split('.')[1];
  let nuevo_nombre = `archivo_nuevo.${extension}`;
  file.files[0].name = nuevo_nombre;
  
  document.getElementById('filenameNuevo').innerHTML = `nombre creado desde javascript: ${nuevo_nombre} `;
  
  document.getElementById('filenameSubido').innerHTML = `el nombre se conserva: ${file.files[0].name}`;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  
  <body>
    <input type="file" id="file" onchange="file(event)">
    <p id="filename"></p>
    <p id="filenameSubido"></p>
    <p id="filenameNuevo"></p>

  </body>
</html>

Tu Respuesta

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

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