{"id":1351,"date":"2021-03-28T16:22:17","date_gmt":"2021-03-28T19:22:17","guid":{"rendered":"https:\/\/www.latirus.com\/blog\/?p=1351"},"modified":"2024-12-08T19:07:47","modified_gmt":"2024-12-08T22:07:47","slug":"agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond","status":"publish","type":"post","link":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/","title":{"rendered":"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond"},"content":{"rendered":"\n
\"\"\/<\/figure><\/div>\n\n\n\n

Uno de los drag & drop<\/strong> de im\u00e1genes mas populares que existen en Javascript es Filepond<\/strong>. No solamente te permite la carga de im\u00e1genes, sino tambi\u00e9n todo tipo de archivo que quieras que el usuario cargue en tu pagina. En esta gu\u00eda veremos como instalar Filepond en un proyecto de Laravel junto con Vue 2.0. Para comenzar a utilizar Filepond <\/a><\/strong>en Vue <\/strong>y Laravel <\/strong>vamos a instalar la extensi\u00f3n vue-filepond<\/strong> para que nos sirva como adaptador entre Filepond <\/strong>y Vue<\/strong>.<\/p>\n\n\n\n

Descargar vue-filepond para Vue 2.0<\/h2>\n\n\n\n
npm install vue-filepond@^6.0.0<\/code><\/code><\/pre>\n\n\n\n
Instalar Extensi\u00f3n de Imagen Previa en Filepond<\/h2>\n\n\n\n
npm i filepond-plugin-image-preview --save<\/code><\/code><\/pre>\n\n\n\n
Agregar Extensi\u00f3n de Verificaci\u00f3n de Archivos en Filepond<\/h2>\n\n\n\n
npm i filepond-plugin-file-validate-type<\/code><\/pre>\n\n\n\n
Ahora que ya tenemos instaladas todas las extensiones, vamos a configurar el archivo JS de nuestro proyecto para iniciar Filepond en Vue<\/strong>. En el caso de Laravel<\/strong>, se encuentra en resources\/js\/app.js<\/em>. Cabe mencionar que ya tenemos instanciada una app de Vue <\/strong>2.0:<\/p>\n\n\n\n
import Vue from 'vue';\nimport vueFilePond from \"vue-filepond\";\nimport FilePondPluginFileValidateType from \"filepond-plugin-file-validate-type\";\nimport FilePondPluginImagePreview from \"filepond-plugin-image-preview\";\n\nconst FilePond = vueFilePond(\n    FilePondPluginFileValidateType,\n    FilePondPluginImagePreview\n  );\n\nconst app = new Vue({\n    el: '#app',\n    components: {\n        FilePond\n    },\n    data: {\n        ...\n    },\n});<\/code><\/pre>\n\n\n\n
Justo debajo de importar Vue<\/strong>, agregamos vue-filepond<\/strong> junto con sus extensiones y dentro de la App, asignamos el componente de Filepond <\/strong>para poder utilizar en nuestros templates o en caso de Laravel <\/strong>dentro de Blade<\/strong>.<\/p>\n\n\n\n
Configurando los Estilos de FilePond<\/h2>\n\n\n\n
Para configurar los estilos de Filepond <\/strong>en Vue<\/strong>, tenemos dos opciones. La primera es importar los estilos dentro de nuestro archivo JS <\/strong>y la segunda es incorporando en el HTML los estilos desde el CDN<\/strong>.<\/p>\n\n\n\n
import \"filepond\/dist\/filepond.min.css\";  \nimport \"filepond-plugin-image-preview\/dist\/filepond-plugin-image-preview.min.css\";<\/code><\/pre>\n\n\n\n
En Laravel<\/strong>, tenemos un archivo de estilos en resouces\/css\/app.css<\/em>. En el caso de que no pongamos los estilos dentro del JS, escribimos lo siguiente en app.css.<\/p>\n\n\n\n
@import \"filepond\/dist\/filepond.min.css\";\n@import \"filepond-plugin-image-preview\/dist\/filepond-plugin-image-preview.min.css\";<\/code><\/pre>\n\n\n\n
y por ultimo, si ninguna de las dos opciones anteriores te parecen adecuadas, podes agregar en tu archivo HTML<\/strong> los estilos desde el CDN<\/strong>.<\/p>\n\n\n\n
<link href=\"https:\/\/unpkg.com\/filepond\/dist\/filepond.css\" rel=\"stylesheet\">\n<link href=\"https:\/\/unpkg.com\/filepond-plugin-image-preview\/dist\/filepond-plugin-image-preview.css\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\n
Configurando Paginas de Backend (Laravel)<\/h2>\n\n\n\n
Esta parte es f\u00e1cil de seguir, yo voy a usar PHP <\/strong>pero se van a entender los conceptos para que lo hagas en el lenguaje que est\u00e9s utilizando. Recordemos que puede ser NodeJS, Python, Java, etc… Filepond <\/strong>necesita una url para poder cargar las im\u00e1genes, esta carga se hace mediante de un formulario con el m\u00e9todo POST<\/strong>.<\/p>\n\n\n\n
Creando el Controlador para subir Im\u00e1genes <\/h2>\n\n\n\n
Vamos a crear un controlador que se va a encargar de subir las im\u00e1genes o archivos al Storage <\/strong>y eliminarlas en caso de que el usuario cancele la acci\u00f3n de subir la imagen con Filepond<\/strong>.<\/p>\n\n\n\n
php artisan make:controller UploadController<\/code><\/pre>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers;\n\nuse App\\Models\\TemporaryFile;\nuse Illuminate\\Http\\Request;\nuse Illuminate\\Support\\Facades\\Storage;\n\nclass UploadController extends Controller\n{\n    \/\/\n    public function __construct()\n    {\n        app('debugbar')->disable();\n    }\n\n    public function delete(Request $request)\n    {\n        $path = $request->getContent(); \n        $directory = '\/tmp\/'.dirname($path);\n        \n        Storage::deleteDirectory($directory);           \n    }\n\n    public function store(Request $request)\n    {        \n        if($request->hasFile('image')){\n            $file = $request->file('image');\n            $filename = $file->getClientOriginalName();\n            $folder = uniqid() . '-' . now()->timestamp;\n            $file->storeAs('tmp\/'.$folder , $filename);\n            $path = $folder.\"\/\".$filename;          \n            return $path;\n        }\n        return '';\n    }\n}<\/code><\/pre>\n\n\n\n
La funci\u00f3n de store que se encarga de guardar la imagen dentro del storage necesita devolver un string para que Filepond <\/strong>pueda seguir operando desde el formulario padre. <\/p>\n\n\n\n
Ahora que ya tenemos creado nuestro controlador, vamos a crear las rutas necesarias para que el formulario de Filepond <\/strong>funcione con Vue <\/strong>y Laravel<\/strong>.<\/p>\n\n\n\n
Creando Rutas para subir Im\u00e1genes<\/h2>\n\n\n\n
Necesitamos tener dos rutas una con el m\u00e9todo POST y otra con el m\u00e9todo DELETE. En mi caso voy a crear las dos rutas dentro de web con el middleware de Auth <\/strong>para que solamente los usuarios registrados puedan subir im\u00e1genes con filepond en Laravel<\/strong>.<\/p>\n\n\n\n
<?php\n    Route::middleware(['auth'])->group(function () {     \n    Route::delete('\/upload', [UploadController::class, \"delete\"]);\n    Route::post('\/upload', [UploadController::class, \"store\"]);\n});<\/code><\/pre>\n\n\n\n
Componente (Opcional)<\/h2>\n\n\n\n
Si solamente ten\u00e9s una secci\u00f3n de tu web que necesita tener un drag & drop<\/strong> junto con Laravel<\/strong>, Vue <\/strong>y Filepond <\/strong>no es necesario que hagas este paso. Solamente copiando el c\u00f3digo que te voy a pasar a continuaci\u00f3n dentro de tu archivo HTML (DIV ID : APP) es suficiente.<\/p>\n\n\n\n
En este caso, para que sea mas f\u00e1cil de leer, vamos a crear un componente en Laravel que se encargue de renderizar el componente de Vue<\/strong>. Vuelvo a decir que este paso no es obligatorio y podes manejarlo como acostumbres a tratar componentes de Vue<\/strong>.<\/p>\n\n\n\n
php artisan make:component InputDragDrop<\/code><\/pre>\n\n\n\n
<?php\n\nnamespace App\\View\\Components;\n\nuse Illuminate\\View\\Component;\n\nclass InputDragDrop extends Component\n{\n    \/**\n     * Create a new component instance.\n     *\n     * @return void\n     *\/\n\n    public $name;\n    public $url;\n\n    public function __construct($name, $url)\n    {\n        $this->name = $name;\n        $this->url = $url;\n    }\n\n    \/**\n     * Get the view \/ contents that represent the component.\n     *\n     * @return \\Illuminate\\Contracts\\View\\View|string\n     *\/\n    public function render()\n    {\n        return view('components.input-drag-drop');\n    }\n}<\/code><\/pre>\n\n\n\n
Este nuevo componente toma acepta dos par\u00e1metros, uno para el nombre y otro para la URL donde se encuentra el POST. Ahora vamos a incorporar a la vista de este componente el componente de Vue<\/strong> con las traducciones al Espa\u00f1ol<\/strong> correspondientes. Lamentablemente no existe la manera de traducir Filepond <\/strong>desde la extensi\u00f3n de Vue <\/strong>con un archivo JSON<\/em>, por lo que tendremos que modificar las label <\/em>una por una. Por este motivo hago un componente aparte sino seria un quilombo tener que copiar y pegar todo este componente en donde quiera un drag & drop de im\u00e1genes en Laravel<\/strong>.<\/p>\n\n\n\n
<file-pond class=\"mt-2\"\n    label-idle=\"Arrastra y suelta tus archivos o <span class = 'filepond--label-action'> Examinar <span>\"\n    label-invalid-field=\"El campo contiene archivos inv\u00e1lidos\" label-file-waiting-for-size=\"Esperando tama\u00f1o\"\n    label-file-size-not-available=\"Tama\u00f1o no disponible\" label-file-loading=\"Cargando\"\n    label-file-load-error=\"Error durante la carga\" label-file-processing=\"Cargando\"\n    label-file-processing-complete=\"Carga completa\" label-file-processing-aborted=\"Carga cancelada\"\n    label-file-processing-error=\"Error durante la carga\" label-file-processing-revert-error=\"Error durante la reversi\u00f3n\"\n    label-file-remove-error=\"Error durante la eliminaci\u00f3n\" label-tap-to-cancel=\"Toca para cancelar\"\n    label-tap-to-retry=\"Tocar para volver a intentar\" label-tap-to-undo=\"Tocar para deshacer\"\n    label-button-remove-item=\"Eliminar\" label-button-abort-item-load=\"Abortar\" label-button-retry-item-load=\"Reintentar\"\n    label-button-abort-item-processing=\"Cancelar\" label-button-undo-item-processing=\"Deshacer\"\n    label-button-retry-item-processing=\"Reintentar\" label-button-process-item=\"Cargar\"\n    label-max-file-size-exceeded=\"El archivo es demasiado grande\"\n    label-max-file-size=\"El tama\u00f1o m\u00e1ximo del archivo es {filesize}\"\n    label-max-total-file-size-exceeded=\"Tama\u00f1o total m\u00e1ximo excedido\"\n    label-max-total-file-size=\"El tama\u00f1o total m\u00e1ximo del archivo es {filesize}\"\n    label-file-type-not-allowed=\"Archivo de tipo no v\u00e1lido\"\n    file-validate-type-label-expected-types=\"Espera {allButLastType} o {lastType}\"\n    image-validate-size-label-format-error=\"Tipo de imagen no compatible\"\n    image-validate-size-label-image-size-too-small=\"La imagen es demasiado peque\u00f1a\"\n    image-validate-size-label-image-size-too-big=\"La imagen es demasiado grande\"\n    image-validate-size-label-expected-min-size=\"El tama\u00f1o m\u00ednimo es {minWidth} \u00d7 {minHeight}\"\n    image-validate-size-label-expected-max-size=\"El tama\u00f1o m\u00e1ximo es {maxWidth} \u00d7 {maxHeight}\"\n    image-validate-size-label-image-resolution-too-low=\"La resoluci\u00f3n es demasiado baja\"\n    image-validate-size-label-image-resolution-too-high=\"La resoluci\u00f3n es demasiado alta\"\n    image-validate-size-label-expected-min-resolution=\"La resoluci\u00f3n m\u00ednima es {minResolution}\"\n    image-validate-size-label-expected-max-resolution=\"La resoluci\u00f3n m\u00e1xima es {maxResolution}\"\n    name=\"{{$name}}\"\n    accepted-file-types=\"image\/jpeg, image\/png\" v-bind:server=\"{\n                                                      url: '{{$url}}',\n                                                      timeout: 7000,\n                                                      process: {\n                                                          method: 'POST',\n                                                          headers: {\n                                                              'X-CSRF-TOKEN': '{{ csrf_token() }}'\n                                                          },\n                                                      },\n                                                      revert: {\n                                                        method: 'DELETE',\n                                                        headers: {\n                                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'\n                                                        },\n                                                      }\n                                                    }\" \/><\/code><\/pre>\n\n\n\n
Ahora ya tenemos el componente, junto con FilePond en Espa\u00f1ol<\/strong> funcionando con Vue <\/strong>y Laravel<\/strong>. Nos queda un ultimo paso, agregar este drag & drop<\/strong> dentro de un formulario. Vamos a ir a nuestro archivo de Blade <\/strong>en donde tengamos un formulario POST<\/em>. Ejemplo podr\u00eda ser la carga de un articulo nuevo o logo para empresa.<\/p>\n\n\n\n
 <form action=\"{{route('products.store')}}\" method=\"POST\">\n    @csrf\n    @method('POST')\n\n    <x-input-drag-drop name=\"image\" url=\"\/upload\"><\/x-input-drag-drop>\n    \n    <div class=\"px-4 py-3 bg-gray-50 text-right sm:px-6\">\n        <a href=\"{{route('admin.products')}}\" class=\"button-cancel mr-2\">\n            Cancelar\n        <\/a>\n        <button type=\"submit\" class=\"button-save\" name=\"submit\">\n            Guardar\n        <\/button>\n    <\/div>\n    <\/div>\n<\/form><\/code><\/pre>\n\n\n\n
En name ponemos image y en url \/upload que son las rutas que acabamos de crear. Al subir una imagen, nos va a crear la imagen que se suba dentro del Storage <\/em>de Laravel <\/strong>y nos va a devolver el PATH o la ruta en donde se encuentra.<\/p>\n\n\n\n
 Al Enviar el formulario, pasara como par\u00e1metro una string <\/strong>con la ruta en donde se encuentra para que podamos guardarla en la Base de Datos, renombrarla o hacer lo cualquier cosa con ella.<\/p>\n","protected":false},"excerpt":{"rendered":"
Uno de los drag & drop de im\u00e1genes mas populares que existen en Javascript es Filepond. No solamente te permite la carga de im\u00e1genes, sino tambi\u00e9n todo tipo de archivo que quieras que el usuario cargue en tu pagina. En esta gu\u00eda veremos como instalar Filepond en un proyecto de Laravel junto con Vue 2.0. […]<\/p>\n","protected":false},"author":1,"featured_media":1357,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[225,223,220],"tags":[314,309,310,311,312,226,62,313],"class_list":["post-1351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php","category-tutoriales","tag-blade","tag-drag","tag-drop","tag-filepond","tag-js","tag-laravel","tag-php","tag-vue"],"yoast_head":"\nAgrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond - Latirus<\/title>\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.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond - Latirus\" \/>\n<meta property=\"og:description\" content=\"Uno de los drag & drop de im\u00e1genes mas populares que existen en Javascript es Filepond. No solamente te permite la carga de im\u00e1genes, sino tambi\u00e9n todo tipo de archivo que quieras que el usuario cargue en tu pagina. En esta gu\u00eda veremos como instalar Filepond en un proyecto de Laravel junto con Vue 2.0. […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/\" \/>\n<meta property=\"og:site_name\" content=\"Latirus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/latirus\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-28T19:22:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-08T22:07:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1284\" \/>\n\t<meta property=\"og:image:height\" content=\"842\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Federico Perez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Federico Perez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/\"},\"author\":{\"name\":\"Federico Perez\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c\"},\"headline\":\"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond\",\"datePublished\":\"2021-03-28T19:22:17+00:00\",\"dateModified\":\"2024-12-08T22:07:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/\"},\"wordCount\":851,\"publisher\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1\",\"keywords\":[\"Blade\",\"Drag\",\"Drop\",\"Filepond\",\"JS\",\"Laravel\",\"PHP\",\"Vue\"],\"articleSection\":[\"Laravel\",\"PHP\",\"Tutoriales\"],\"inLanguage\":\"es-AR\"},{\"@type\":[\"WebPage\",\"ItemPage\"],\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/\",\"url\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/\",\"name\":\"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond - Latirus\",\"isPartOf\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1\",\"datePublished\":\"2021-03-28T19:22:17+00:00\",\"dateModified\":\"2024-12-08T22:07:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1\",\"width\":1284,\"height\":842,\"caption\":\"filepond-laravel-vue\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/www.latirus.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#website\",\"url\":\"https:\/\/www.latirus.com\/blog\/\",\"name\":\"Latirus\",\"description\":\"Desarrollo de Sistemas\",\"publisher\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.latirus.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-AR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#organization\",\"name\":\"Latirus\",\"url\":\"https:\/\/www.latirus.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png\",\"contentUrl\":\"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png\",\"width\":340,\"height\":150,\"caption\":\"Latirus\"},\"image\":{\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/latirus\/\",\"https:\/\/linkedin.com\/company\/latirus\",\"https:\/\/www.youtube.com\/channel\/UCiTW7a7aDCBFg0qbIA5bq_Q\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c\",\"name\":\"Federico Perez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-AR\",\"@id\":\"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g\",\"caption\":\"Federico Perez\"},\"sameAs\":[\"http:\/\/latirus.com\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond - Latirus","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.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/","og_locale":"es_ES","og_type":"article","og_title":"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond - Latirus","og_description":"Uno de los drag & drop de im\u00e1genes mas populares que existen en Javascript es Filepond. No solamente te permite la carga de im\u00e1genes, sino tambi\u00e9n todo tipo de archivo que quieras que el usuario cargue en tu pagina. En esta gu\u00eda veremos como instalar Filepond en un proyecto de Laravel junto con Vue 2.0. […]","og_url":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/","og_site_name":"Latirus","article_publisher":"https:\/\/www.facebook.com\/latirus\/","article_published_time":"2021-03-28T19:22:17+00:00","article_modified_time":"2024-12-08T22:07:47+00:00","og_image":[{"width":1284,"height":842,"url":"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg","type":"image\/jpeg"}],"author":"Federico Perez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Federico Perez","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#article","isPartOf":{"@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/"},"author":{"name":"Federico Perez","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c"},"headline":"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond","datePublished":"2021-03-28T19:22:17+00:00","dateModified":"2024-12-08T22:07:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/"},"wordCount":851,"publisher":{"@id":"https:\/\/www.latirus.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1","keywords":["Blade","Drag","Drop","Filepond","JS","Laravel","PHP","Vue"],"articleSection":["Laravel","PHP","Tutoriales"],"inLanguage":"es-AR"},{"@type":["WebPage","ItemPage"],"@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/","url":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/","name":"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond - Latirus","isPartOf":{"@id":"https:\/\/www.latirus.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage"},"image":{"@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1","datePublished":"2021-03-28T19:22:17+00:00","dateModified":"2024-12-08T22:07:47+00:00","breadcrumb":{"@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#breadcrumb"},"inLanguage":"es-AR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/"]}]},{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#primaryimage","url":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1","width":1284,"height":842,"caption":"filepond-laravel-vue"},{"@type":"BreadcrumbList","@id":"https:\/\/www.latirus.com\/blog\/2021\/03\/28\/agrega-imagenes-drag-drop-en-laravel-y-vue-con-filepond\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/www.latirus.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Agrega Im\u00e1genes Drag & Drop en Laravel y Vue con Filepond"}]},{"@type":"WebSite","@id":"https:\/\/www.latirus.com\/blog\/#website","url":"https:\/\/www.latirus.com\/blog\/","name":"Latirus","description":"Desarrollo de Sistemas","publisher":{"@id":"https:\/\/www.latirus.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.latirus.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-AR"},{"@type":"Organization","@id":"https:\/\/www.latirus.com\/blog\/#organization","name":"Latirus","url":"https:\/\/www.latirus.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png","contentUrl":"https:\/\/www.latirus.com\/blog\/wp-content\/uploads\/2020\/08\/latirus-logo-light.png","width":340,"height":150,"caption":"Latirus"},"image":{"@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/latirus\/","https:\/\/linkedin.com\/company\/latirus","https:\/\/www.youtube.com\/channel\/UCiTW7a7aDCBFg0qbIA5bq_Q"]},{"@type":"Person","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/aacf914583ee8f94bf64b989e164591c","name":"Federico Perez","image":{"@type":"ImageObject","inLanguage":"es-AR","@id":"https:\/\/www.latirus.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/368c5b2c9e1744ec70feb6608555b474bc5119b36bdc7890e35d51216d231669?s=96&d=mm&r=g","caption":"Federico Perez"},"sameAs":["http:\/\/latirus.com\/blog"]}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.latirus.com\/blog\/wp-content\/uploads\/2021\/03\/filepond-laravel-vue.jpg?fit=1284%2C842&ssl=1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts\/1351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/comments?post=1351"}],"version-history":[{"count":6,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts\/1351\/revisions"}],"predecessor-version":[{"id":1358,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/posts\/1351\/revisions\/1358"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/media\/1357"}],"wp:attachment":[{"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/media?parent=1351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/categories?post=1351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.latirus.com\/blog\/wp-json\/wp\/v2\/tags?post=1351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}