{"id":13691,"date":"2022-08-02T10:14:26","date_gmt":"2022-08-02T08:14:26","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=13691"},"modified":"2022-08-02T10:32:32","modified_gmt":"2022-08-02T08:32:32","slug":"manipular-archivos-en-javascript-file-system-access-api","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/","title":{"rendered":"Manipular archivos en JavaScript
File System Access API"},"content":{"rendered":"

Hasta hace relativamente poco, la \u00fanica forma de manipular archivos desde el navegador implicaba manipularlos en el servidor<\/strong>. Es decir, si quer\u00edamos hacer cosas como generar un archivo o leer un archivo, estas eran cosas que se deb\u00edan de hacer en el servidor Web. Ya que, por motivos de seguridad, no se consideraba recomendable que el navegador pudiera acceder directamente a los archivos del usuario<\/strong> para manipularlos.<\/p>\n

Sin embargo, las necesidades de trasladar la carga de trabajo del servidor al navegador del usuario han llevado a la creaci\u00f3n de un nuevo API JavaScript llamado File System Access API<\/a> que nos va a permitir manipular directamente desde el navegador los archivos del usuario<\/strong>. Obviamente, para ello ser\u00e1 necesario que el usuario proporcione permisos de acceso<\/strong> a nuestro sitio Web, de forma similar a cuando permitimos a una aplicaci\u00f3n de nuestro tel\u00e9fono m\u00f3vil acceder a nuestros archivos.<\/p>\n

Es importante tener en cuenta que a d\u00eda de hoy, en Agosto de 2022, el soporte de este API en los navegadores Web es bastante limitado<\/a>. De hecho, en algunos navegadores<\/strong>, como por ejemplo Firefox o la mayor\u00eda de navegadores para dispositivos m\u00f3viles, el soporte es directamente nulo.<\/strong><\/p>\n

Finalmente, es recomendable que para comprender completamente el c\u00f3digo que vamos a ver tengas experiencia en el uso de promesas en JavaScript<\/a>, y sobretodo en el uso de async \/ await<\/a>. El c\u00f3digo ha sido probado con la \u00faltima versi\u00f3n de Chrome sin problemas.<\/p>\n

Como leer un archivo de texto con JavaScript<\/h2>\n

Para el siguiente ejemplo vamos a usar un bot\u00f3n para cargar el archivo y un textarea<\/strong> <\/em>donde mostraremos el contenido de dicho archivo de texto.<\/p>\n

HTML<\/strong><\/p>\n

<input id=\"cargar1\" type=\"button\" value=\"Cargar un \u00fanico archivo\" \/>\r\n<textarea id=\"contenido\" cols=\"30\" rows=\"10\"><\/textarea>\r\n<\/pre>\n
JavaScript<\/strong><\/p>\n
\/\/ ejemplo de como cargar un archivo de texto en un textarea\r\ndocument.querySelector(\"#cargar1\").addEventListener(\"click\", async ()=>{ \r\n  try {\r\n    \/\/ NOTA showOpenFilePicker nos devuelve un array!\r\n    const referencias = await window.showOpenFilePicker({}); \r\n\r\n    \/\/ a partir de la referencia, obtenemos el archivo (casilla 0 del array)\r\n    const archivo = await referencias[0].getFile();\r\n\r\n    \/\/ a partir del archivo obtenemos su contenido\r\n    const contenido = await archivo.text();\t\t\t\t\r\n\r\n    \/\/ mostramos contenido en el textarea \r\n    document.querySelector(\"#contenido\").value = contenido;\r\n  } catch(err) {\r\n    console.log(\"Se ha producido un error o se ha cancelado la carga. \" + err);\r\n  }  \t\t\t\r\n});\r\n<\/pre>\n
Como podemos ver, es todo bastante sencillo. Pero, \u00bfqu\u00e9 sucede si queremos cargar otro tipo de archivos o queremos cargar m\u00faltiples archivos?<\/p>\n
Cargar im\u00e1genes desde archivo en JavaScript<\/h2>\n
HTML<\/strong><\/p>\n
<input type=\"button\" id=\"cargar2\" value=\"Cargar m\u00faltiples archivos\"><\/pre>\n
JavaScript<\/strong><\/p>\n
\/\/ ejemplo de como cargar m\u00faltiples archivos de imagen\r\ndocument.querySelector(\"#cargar2\").addEventListener(\"click\", async ()=>{ \r\n  try {\r\n    \/\/ showOpenFilePicker nos devuelve un array\t\t\t\r\n    const referencias = await window.showOpenFilePicker({\r\n      types: [\r\n        { description: 'Im\u00e1genes', accept: { 'image\/*': ['.png', '.gif', '.jpeg', '.jpg'] } },\r\n      ],\r\n      excludeAcceptAllOption: true, \/\/ no permitir la opcion de \"cualquier tipo de archivo\" ?\r\n      multiple: true \/\/ permitir elegir varios archivos ?\r\n    });\r\n\r\n    \/\/ por cada archivo...\r\n    referencias.forEach(async (refer)=>{\t\t\t\t\t\r\n      \/\/ a partir de la referencia, obtenemos el archivo\r\n      var archivo = await refer.getFile();\r\n\r\n      \/\/ creamos un elemento imagen usando dicho archivo\r\n      var img = document.createElement(\"img\");\r\n      img.src = URL.createObjectURL(archivo);\r\n      img.alt = archivo.name;\r\n\r\n      \/\/ a\u00f1adimos dicho elemento imagen a la p\u00e1gina\r\n      document.body.append(img);\t\t\t\t\r\n    });\t\t\t\t\r\n  } catch(err) {\r\n    console.log(\"Se ha producido un error o se ha cancelado la carga. \" + err);\r\n  }  \t\t\t\r\n});\r\n<\/pre>\n
Tal y como se puede observar, el m\u00e9todo showOpenFilePicker()<\/strong><\/em> permite indicar un objeto con varias opciones. Entre ellas, podemos indicar los tipos de archivos aceptados, o si se permite o no la selecci\u00f3n m\u00faltiple de archivos. Despu\u00e9s, simplemente tenemos que recorrernos el array que devuelve este m\u00e9todo para ir procesando cada archivo. En el caso de im\u00e1genes, podemos usar el m\u00e9todo URL.createObjectURL()<\/strong><\/em> para obtener un URL que podemos usar en un elemento HTML o mediante CSS. Existen formas m\u00e1s avanzadas de leer archivos binarios, pero exceden las pretensiones de este art\u00edculo.<\/p>\n
Como leer el contenido de una carpeta con JavaScript<\/h2>\n
Un m\u00e9todo alternativo a showOpenFilePicker()<\/strong><\/em> es el m\u00e9todo showDirectoryPicker()<\/strong> <\/em>que en este caso nos va a permitir acceder al contenido de una carpeta del ordenador del usuario.<\/p>\n
HTML<\/strong><\/p>\n
<input type=\"button\" id=\"cargar3\" value=\"Cargar carpeta\">\r\n<div id=\"directorio\"><\/div><\/pre>\n
JavaScript<\/strong><\/p>\n
\/\/ ejemplo de como cargar el contenido de un directorio\r\ndocument.querySelector(\"#cargar3\").addEventListener(\"click\", async ()=>{\r\n  try {\r\n    \/\/ seleccionar un directorio\r\n    const referencia = await window.showDirectoryPicker();\r\n\r\n    \/\/ obtenemos el listado de archivos\r\n    let html = \"<ul>\";\r\n    for await (const archivo of referencia.values()) {\r\n      html += \"<li>\";\r\n      if (archivo.kind == \"file\")\r\n        \/\/ es un archivo\r\n        html += archivo.name;\r\n      else\r\n        \/\/ es una subcarpeta\r\n        html += \"<b>\" + archivo.name.toUpperCase() + \"<\/b>\";\r\n      html += \"<\/li>\";\r\n    }\r\n    html += \"<\/ul>\";\r\n    document.querySelector(\"#directorio\").innerHTML = html;\r\n\r\n  } catch(err) {\r\n    console.log(\"Se ha producido un error o se ha cancelado la carga. \" + err);\r\n  }\r\n});\r\n<\/pre>\n
Tal y como se puede observar, una vez tenemos acceso a la carpeta, podemos obtener acceso a los archivos y subcarpetas que contiene. Si queremos cargar alguno de los archivos, podemos usar el m\u00e9todo getFile()<\/strong><\/em> tal y como hemos visto en los anteriores ejemplos.<\/p>\n
Bien, ya hemos visto como leer archivos y carpetas. Pero, \u00bfpodemos crear archivos?<\/p>\n
Como crear un archivo de texto en JavaScript<\/h2>\n
La forma de crear un archivo es casi id\u00e9ntica a la que usamos para leerlo. La principal diferencia es que en este caso mediante el m\u00e9todo createWritable()<\/em><\/strong> crearemos un objeto FileSystemWritableFileStream<\/a><\/strong><\/em> que nos permitir\u00e1 guardar el contenido deseado en dicho archivo.<\/p>\n
En el siguiente ejemplo, guardaremos a un archivo de texto lo que el usuario escriba en el textarea.<\/p>\n
HTML<\/strong><\/p>\n
<textarea id=\"editor\" cols=\"30\" rows=\"10\"><\/textarea>\r\n<input type=\"button\" id=\"guardar1\" value=\"Guardar en un archivo\">\r\n<\/pre>\n
JavaScript<\/strong><\/p>\n
\/\/ ejemplo de como guardar en un archivo de texto\r\ndocument.querySelector(\"#guardar1\").addEventListener(\"click\", async ()=>{\r\n  let referencia;\r\n  try {\r\n    referencia = await window.showSaveFilePicker(\r\n      { types: [ { description: \"Texto\", accept: { \"text\/plain\": [\".txt\"], } }, \r\n    ]});\r\n  } catch(err) {\r\n    console.log(\"Se ha producido un error o se ha cancelado el proceso. \" + err);\r\n    return;\r\n  }  \t\r\n\r\n  try {\r\n    \/\/ obtenemos el contenido\r\n    const contenido = document.querySelector(\"#editor\").value;\r\n    \/\/ guardamos el archivo\r\n    const archivo = await referencia.createWritable();\t\t\t\t \r\n    await archivo.write(contenido);\r\n    await archivo.close();\t\t\t\t\r\n  } catch(err) {\r\n    alert(\"Error al guardar el archivo. \" + err);\r\n  }  \t\t\t\t\t\t\t\t\r\n});\r\n<\/pre>\n
\u00bfY si en lugar de guardar un archivo de texto, queremos crear una imagen y guardarla en un archivo?<\/p>\n
Guardar una imagen a archivo en JavaScript<\/h2>\n
Para poder guardar una imagen, primero debemos de crearla usando el elemento <canvas> de HTML5.<\/p>\n
HTML<\/strong><\/p>\n
<canvas id=\"dibujo\"><\/canvas>\r\n<input type=\"button\" id=\"guardar2\" value=\"Guardar imagen\"><\/pre>\n
JavaScript<\/strong><\/p>\n
\/\/ ejemplo de como guardar una imagen\r\ndocument.querySelector(\"#guardar2\").addEventListener(\"click\", async ()=>{\r\n  let referencia;\r\n  try {\r\n    referencia = await window.showSaveFilePicker(\r\n      { types: [ { description: \"Im\u00e1genes\", accept: { \"image\/PNG\": [\".png\"], } }, \r\n    ]});\r\n  } catch(err) {\r\n    console.log(\"Se ha producido un error o se ha cancelado el proceso. \" + err);\r\n    return;\r\n  } \r\n\r\n  try {\r\n    \/\/ obtenemos el canvas y cambiamos su tama\u00f1o\r\n    const canvas = document.querySelector(\"#dibujo\");\r\n    canvas.width = 300;\r\n    canvas.height = 180;\r\n    \/\/ dibujamos algo en el canvas\r\n    const context = canvas.getContext(\"2d\");\r\n    context.fillStyle = \"#AD1519\";\r\n    context.fillRect(0, 0, 300, 180);\r\n    context.fillStyle = \"#FABD00\";\r\n    context.fillRect(0, 45, 300, 90);\r\n    \/\/ convertimos el canvas en un blob \r\n    \/\/ (en este m\u00e9todo podemos indicar otro formato de imagen que no sea PNG)\r\n    canvas.toBlob(async (blob)=>{\r\n      \/\/ guardamos el blob a archivo\r\n      const archivo = await referencia.createWritable();         \r\n      await archivo.write(blob);\r\n      await archivo.close();        \r\n    });\r\n      \r\n  } catch(err) {\r\n    alert(\"Error al guardar el archivo. \" + err);\r\n  } \r\n});\r\n<\/pre>\n
Ya hemos visto que podemos leer y guardar archivos, \u00bfpodemos borrarlos? Si, se puede. Pero por lo general ni es necesario, ni es recomendable. Lo mejor es que, por seguridad, y si no existe un motivo de peso para lo contrario, sea el propio usuario el que realice de forma manual cualquier operaci\u00f3n de borrado de archivos o carpetas.<\/strong><\/p>\n
Conclusiones<\/h2>\n
Como hemos podido ver, este nuevo API es bastante potente y nos permite crear todo tipo de aplicaciones que requieran manipular archivos desde el propio navegador, sin necesidad de ir enviando y recibiendo informaci\u00f3n hacia\/desde el servidor Web<\/strong>, con toda la carga de trabajo que ello conlleva.<\/p>\n
Esperemos que el soporte por parte de los navegadores vaya mejorando poco a poco y pronto sea un API que se pueda usar sin problemas en cualquier plataforma. Queda por ver si el potencial riesgo de seguridad que supone este API es gestionado correctamente por los navegadores y los usuarios.<\/p>\n","protected":false},"excerpt":{"rendered":"
Con el nuevo File System Access API podemos manipular archivos directamente desde JavaScript sin necesidad de interactuar con un servidor Web.<\/p>\n","protected":false},"author":23,"featured_media":13716,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[253],"class_list":["post-13691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion","tag-javascript"],"yoast_head":"\nManipular archivos en JavaScript  File System Access API<\/title>\n<meta name=\"description\" content=\"Con el nuevo File System Access API podemos manipular archivos directamente desde JavaScript sin necesidad de interactuar con un servidor Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Manipular archivos en JavaScript  File System Access API\" \/>\n<meta property=\"og:description\" content=\"Con el nuevo File System Access API podemos manipular archivos directamente desde JavaScript sin necesidad de interactuar con un servidor Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-02T08:14:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-02T08:32:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Manipular archivos en JavaScript File System Access API\",\"datePublished\":\"2022-08-02T08:14:26+00:00\",\"dateModified\":\"2022-08-02T08:32:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/\"},\"wordCount\":798,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg\",\"keywords\":[\"javascript\"],\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/\",\"name\":\"Manipular archivos en JavaScript File System Access API\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg\",\"datePublished\":\"2022-08-02T08:14:26+00:00\",\"dateModified\":\"2022-08-02T08:32:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"Con el nuevo File System Access API podemos manipular archivos directamente desde JavaScript sin necesidad de interactuar con un servidor Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg\",\"width\":1000,\"height\":500,\"caption\":\"File System Access API\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Manipular archivos en JavaScript File System Access API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Manipular archivos en JavaScript  File System Access API","description":"Con el nuevo File System Access API podemos manipular archivos directamente desde JavaScript sin necesidad de interactuar con un servidor Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/","og_locale":"es_ES","og_type":"article","og_title":"Manipular archivos en JavaScript  File System Access API","og_description":"Con el nuevo File System Access API podemos manipular archivos directamente desde JavaScript sin necesidad de interactuar con un servidor Web.","og_url":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/","og_site_name":"Blog Escola Espai","article_published_time":"2022-08-02T08:14:26+00:00","article_modified_time":"2022-08-02T08:32:32+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Manipular archivos en JavaScript File System Access API","datePublished":"2022-08-02T08:14:26+00:00","dateModified":"2022-08-02T08:32:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/"},"wordCount":798,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg","keywords":["javascript"],"articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/","url":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/","name":"Manipular archivos en JavaScript File System Access API","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg","datePublished":"2022-08-02T08:14:26+00:00","dateModified":"2022-08-02T08:32:32+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"Con el nuevo File System Access API podemos manipular archivos directamente desde JavaScript sin necesidad de interactuar con un servidor Web.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg","width":1000,"height":500,"caption":"File System Access API"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2022\/08\/manipular-archivos-en-javascript-file-system-access-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Manipular archivos en JavaScript File System Access API"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/08\/file-system-access-api.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=13691"}],"version-history":[{"count":25,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13691\/revisions"}],"predecessor-version":[{"id":13717,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13691\/revisions\/13717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/13716"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=13691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=13691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=13691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}