javascript - multiple - ¿Cómo dar a un Blob cargado como FormData un nombre de archivo?

formdata w3schools

Question

Actualmente estoy cargando imágenes pegadas desde el portapapeles con el siguiente código:

// Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
            "POST",
            "/upload",
            true
        );
request.send(form);

Desactiva el campo de formulario cargado con un nombre similar al siguiente: Blob157fce71535b4f93ba92ac6053d81e3a

¿Hay alguna forma de establecer esto o recibir este nombre de archivo del lado del cliente, sin hacer ninguna comunicación del lado del servidor?

Answer 1

¿Estás usando Google App Engine? Puede usar cookies (creadas con JavaScript) para mantener una relación entre los nombres de archivo y el nombre recibido del servidor.

Answer 2

Agregando esto aquí ya que no parece estar aquí.

Aparte de la excelente solución de form.append("blob",blob, filename); también puedes convertir el blob en una instancia de File :

var blob = new Blob([JSON.stringify([0,1,2])], {type : ''application/json''});
var fileOfBlob = new File([blob], ''aFileName.json'');
form.append("upload", fileOfBlob);

Answer 3

Como está pegando los datos al portapapeles, no existe una forma confiable de conocer el origen del archivo y sus propiedades (incluido el nombre).

Su mejor opción es crear un esquema de nombres de archivo propio y enviarlo junto con el blob.

form.append("filename",getFileName());
form.append("blob",blob);

function getFileName() {
 // logic to generate file names
}

Answer 4

Cuando usa Google Chrome puede usar / abusar de la Google Filesystem API para esto. Aquí puede crear un archivo con un nombre específico y escribir el contenido de un blob en él. Luego puede devolver el resultado al usuario.

Aún no he encontrado una buena manera para Firefox; probablemente se requiera una pequeña porción de Flash como downloadify para nombrar un blob.

IE10 tiene una función msSaveBlob() en BlobBuilder .

Tal vez esto es más para descargar un blob, pero está relacionado.

Answer 5

Ese nombre se ve derivado de un objeto GUID URL. Haga lo siguiente para obtener el objeto URL del que se derivó el nombre.

var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);

object_url se formateará como blob:{origin}{GUID} en Google Chrome y moz-filedata:{GUID} en Firefox. Un origen es el protocolo + host + puerto no estándar para el protocolo. Por ejemplo, blob:http://.com/e7bc644d-d174-4d5e-b85d-beeb89c17743 o blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99 . Probablemente desee extraer el GUID y eliminar cualquier guiones.

Answer 6

No lo he probado, pero eso debería alertar a la URL de datos de blobs:

var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();

var reader = new FileReader();
reader.onload = function(event) {
  alert(event.target.result); // <-- data url
};
reader.readAsDataURL(blob);

Answer 7

Para Chrome y Firefox, solo usa esto:

form.append("blob",blob, filename);

(ver documentación de MDN )

Answer 8

Realmente depende de cómo se configura el servidor del otro lado y con qué módulos se maneja una publicación blob. Puedes intentar poner el nombre deseado en la ruta de tu publicación.

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);