diff --git a/README.md b/README.md
index 486c654..92ae1f7 100644
--- a/README.md
+++ b/README.md
@@ -84,6 +84,7 @@ When an image is uploaded successfully, a 200 HTTP Status code response must be
 | `save-request-headers` | Object  | `{}`          | (OPTIONAL) If you need to pass any additional HTTP headers, you may do so by providing the header names and values in this object                                                                |
 | `allow-photo-pane`     | Boolean | false         | (OPTIONAL) When this attribute is true, clicking on an image in the gallery will show a larger version of the image in a Photo pane, along with any additional image information.                |
 | `allow-delete`         | Boolean | false         | (OPTIONAL) Whether or not to provide a provision for deleting an image in Photo Pane view. If this is true, delete button will be shown and a `deleted` event will be generated                  |
+| `allow-rename`         | Boolean | false         | (OPTIONAL) Whether or not to provide a provision for renaming an image in Photo Pane view. If this is true, rename input with button will be shown and a `renamed` event will be generated                  |
 | `allow-choose`         | Boolean | false         | (OPTIONAL) Whether or not to provide a provision for chosing the image inside Photo Pane view. If this is true, a "Choose" button will be displayed and a `chosen` event will be generated       |
 | `allow-copy`           | Boolean | true          | (OPTIONAL) Whether or not to provide a provision for copying the image URL in the Photo Pane View. If this is true, a `Copy Link` button will be shown and image `url` will be copied to clipboard |
 | `captionable`          | Boolean | false         | (OPTIONAL) Whether or not to provide a provision for specifying the image caption after selecting an image. If this is true, a prompt will be shown for image caption when users select an image |
@@ -103,7 +104,7 @@ Following events are generated when performing various interactions with the ima
 | `chosen`      | Object          | image             | This event is generated when users select an image. The image is passed to the event handler.                                                                             |
 | `saved`       | Object          | image             | This event is generated when users successfully upload an image. The image is passed to the event handler.                                                                |
 | `deleted`     | Object          | image             | This event is generated when users delete an image. The image is passed to the event handler.                                                                             |
-
+| `renamed`     | Object, String  | image, new name   | This event is generated when users rename an image. The image and the new name are passed to the event handler.                                                                             |
 
 ## Example
 
@@ -125,6 +126,7 @@ Following events are generated when performing various interactions with the ima
             @chosen="onChoose"
             @saved="onSave"
             @deleted="onDelete"
+            @renamed="onRename"
             @searched="onSearch"
             >
         </VueImageBrowser>
@@ -174,6 +176,11 @@ export default {
             }
         },
 
+        onRename(image, newName) {
+            console.log('on rename : image -> ', image)
+            console.log('on rename : new name -> ', newName)
+        },
+
         onSelect(image) {
             console.log('on select', image)
         },
diff --git a/dist/vue-image-browser.esm.js b/dist/vue-image-browser.esm.js
index 465f07e..0dbeed2 100644
--- a/dist/vue-image-browser.esm.js
+++ b/dist/vue-image-browser.esm.js
@@ -227,6 +227,27 @@
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script = {
   name: 'vue-image-browser',
@@ -266,6 +287,11 @@ var script = {
       default: false,
     },
 
+    allowRename: {
+      type: Boolean,
+      default: false,
+    },
+
     allowPhotoPane: {
       type: Boolean,
       default: false,
@@ -301,6 +327,7 @@ var script = {
     return {
       message: null,
       query: '',
+      renameQuery: '',
       searchResult: null,
       pane: 'gallery',
       selectedPhoto: {},
@@ -337,12 +364,18 @@ var script = {
         'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
       )
     },
+
+    isRenameDisabled: function isRenameDisabled() {
+      return this.selectedPhoto.name === this.renameQuery
+    },
   },
 
   methods: {
     select: function select(photo) {
       this.selectedPhoto = photo;
 
+      this.renameQuery = photo.name;
+
       this.allowPhotoPane && (this.pane = 'photo');
 
       this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
@@ -456,6 +489,13 @@ var script = {
       this.pane = 'gallery';
     },
 
+    renameSelected: function renameSelected() {
+      if (this.renameQuery.length <= 0)
+        { return; }
+
+      this.$emit('renamed', this.selectedPhoto, this.renameQuery);
+    },
+
     doDelayedSearch: function doDelayedSearch() {
       var p = this;
 
@@ -512,132 +552,132 @@ var script = {
   },
 };
 
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-    }
-    // Vue.extend constructor export interop.
-    var options = typeof script === 'function' ? script.options : script;
-    // render functions
-    if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true;
-        // functional template
-        if (isFunctionalTemplate) {
-            options.functional = true;
-        }
-    }
-    // scopedId
-    if (scopeId) {
-        options._scopeId = scopeId;
-    }
-    var hook;
-    if (moduleIdentifier) {
-        // server build
-        hook = function (context) {
-            // 2.3 injection
-            context =
-                context || // cached call
-                    (this.$vnode && this.$vnode.ssrContext) || // stateful
-                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-            // 2.2 with runInNewContext: true
-            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                context = __VUE_SSR_CONTEXT__;
-            }
-            // inject component styles
-            if (style) {
-                style.call(this, createInjectorSSR(context));
-            }
-            // register component module identifier for async chunk inference
-            if (context && context._registeredComponents) {
-                context._registeredComponents.add(moduleIdentifier);
-            }
-        };
-        // used by ssr in case component is cached and beforeCreate
-        // never gets called
-        options._ssrRegister = hook;
-    }
-    else if (style) {
-        hook = shadowMode
-            ? function (context) {
-                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-            }
-            : function (context) {
-                style.call(this, createInjector(context));
-            };
-    }
-    if (hook) {
-        if (options.functional) {
-            // register for functional component in vue file
-            var originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            var existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-        }
-    }
-    return script;
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    var options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    var hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            var originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            var existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
 }
 
-var isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return function (id, style) { return addStyle(id, style); };
-}
-var HEAD;
-var styles = {};
-function addStyle(id, css) {
-    var group = isOldIE ? css.media || 'default' : id;
-    var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        var code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                { style.element.setAttribute('media', css.media); }
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            var index = style.ids.size - 1;
-            var textNode = document.createTextNode(code);
-            var nodes = style.element.childNodes;
-            if (nodes[index])
-                { style.element.removeChild(nodes[index]); }
-            if (nodes.length)
-                { style.element.insertBefore(textNode, nodes[index]); }
-            else
-                { style.element.appendChild(textNode); }
-        }
-    }
+var isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return function (id, style) { return addStyle(id, style); };
+}
+var HEAD;
+var styles = {};
+function addStyle(id, css) {
+    var group = isOldIE ? css.media || 'default' : id;
+    var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        var code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                { style.element.setAttribute('media', css.media); }
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            var index = style.ids.size - 1;
+            var textNode = document.createTextNode(code);
+            var nodes = style.element.childNodes;
+            if (nodes[index])
+                { style.element.removeChild(nodes[index]); }
+            if (nodes.length)
+                { style.element.insertBefore(textNode, nodes[index]); }
+            else
+                { style.element.appendChild(textNode); }
+        }
+    }
 }
 
 /* script */
@@ -921,21 +961,79 @@ var __vue_render__ = function() {
               0
             ),
             _vm._v(" "),
-            _vm.allowDelete
-              ? _c(
-                  "button",
-                  {
-                    staticClass:
-                      "text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
-                    on: {
-                      click: function($event) {
-                        return _vm.deleteSelected()
-                      }
-                    }
-                  },
-                  [_vm._v("\n        Delete\n      ")]
-                )
-              : _vm._e()
+            _c(
+              "div",
+              {
+                staticClass:
+                  "w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap"
+              },
+              [
+                _c("div", { staticClass: "flex-none px-3" }, [
+                  _vm.allowDelete
+                    ? _c(
+                        "button",
+                        {
+                          staticClass:
+                            "text-red-500 border px-4 text-sm py-2 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
+                          on: {
+                            click: function($event) {
+                              return _vm.deleteSelected()
+                            }
+                          }
+                        },
+                        [_vm._v("\n            Delete\n          ")]
+                      )
+                    : _vm._e()
+                ]),
+                _vm._v(" "),
+                _vm.allowRename
+                  ? _c("div", { staticClass: "flex-grow flex px-3" }, [
+                      _c("input", {
+                        directives: [
+                          {
+                            name: "model",
+                            rawName: "v-model",
+                            value: _vm.renameQuery,
+                            expression: "renameQuery"
+                          }
+                        ],
+                        staticClass:
+                          "p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none",
+                        attrs: { type: "text" },
+                        domProps: { value: _vm.renameQuery },
+                        on: {
+                          input: function($event) {
+                            if ($event.target.composing) {
+                              return
+                            }
+                            _vm.renameQuery = $event.target.value;
+                          }
+                        }
+                      }),
+                      _vm._v(" "),
+                      _c("div", { staticClass: "flex relative" }, [
+                        _c(
+                          "button",
+                          {
+                            staticClass:
+                              "text-blue-500 px-4 text-sm py-1 hover:border hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-r-lg border-r border-t border-b border-gray-300 cursor-pointer",
+                            class: _vm.isRenameDisabled
+                              ? "opacity-50 cursor-not-allowed"
+                              : "",
+                            attrs: { disabled: _vm.isRenameDisabled },
+                            on: {
+                              click: function($event) {
+                                return _vm.renameSelected()
+                              }
+                            }
+                          },
+                          [_vm._v("\n              Rename\n            ")]
+                        )
+                      ])
+                    ])
+                  : _vm._e()
+              ]
+            )
           ])
         ])
       : _vm._e(),
@@ -1147,7 +1245,7 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-5b2da7ca_0", { source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\n    height: 300px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\n    height: 250px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\n    height: 200px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\n    height: 120px;\n    overflow: hidden;\n}\n}\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n", map: {"version":3,"sources":["/Users/akash/code/vue-image-browser/src/vue-image-browser.vue"],"names":[],"mappings":";AAggBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA","file":"vue-image-browser.vue","sourcesContent":["<template>\n  <div class=\"w-full\">\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\n      id=\"top-panel\"\n    >\n      <div class=\"flex-grow flex\">\n        <input\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\n          type=\"text\"\n          v-model=\"query\"\n          @keyup=\"doDelayedSearch\"\n          placeholder=\"search...\"\n        />\n        <div\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\n        >\n          <span\n            v-if=\"searchResult\"\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\n            v-text=\"searchResult\"\n          ></span>\n        </div>\n      </div>\n      <div class=\"flex-none\" v-if=\"allowUpload\">\n        <button\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\n          title=\"Upload Image\"\n          @click=\"pane = 'upload'\"\n        >\n          Add Image\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\n    >\n      <div\n        v-for=\"photo in images\"\n        :key=\"photo.id\"\n        :class=\"imagesPerRow\"\n        @click=\"select(photo)\"\n      >\n        <div\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\n        >\n          <div class=\"w-full flex items-center justify-center thumbnail\">\n            <img\n              v-bind:data-src=\"photo.url\"\n              :title=\"photo.name\"\n              class=\"mg-photo\"\n            />\n          </div>\n          <div\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\n          >\n            <span class=\"truncate\">{{ photo.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'photo'\"\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\n    >\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\n        >\n          <polygon\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n          />\n        </svg>\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\n      </button>\n\n      <div class=\"flex items-center justify-between\">\n        <button\n          @click=\"copy\"\n          v-if=\"allowCopy\"\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\n        >\n          {{ copyLinkText }}\n        </button>\n        <button\n          @click=\"choose\"\n          v-if=\"allowChoose\"\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\n        >\n          {{ chooseBtnText }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\n      <div class=\"w-full postcard\">\n        <img\n          :src=\"selectedPhoto.url\"\n          :title=\"selectedPhoto.name\"\n          class=\"mx-auto shadow-lg mg-photo\"\n        />\n      </div>\n\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\n        <table class=\"w-full mt-4 table-auto\">\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\n              {{ pk.toUpperCase() }}\n            </td>\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\n          </tr>\n        </table>\n\n        <button\n          @click=\"deleteSelected()\"\n          v-if=\"allowDelete\"\n          class=\"text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'upload'\"\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\n    >\n      <div class=\"flex justify-between\">\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\n          >\n            <polygon\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n            />\n          </svg>\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\n            Back to Gallery\n          </p>\n        </button>\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\n          <div class=\"w-full flex bg-transparent\">\n            <label\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\n            >\n              <svg\n                class=\"w-8 h-8 mr-4\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\n                />\n              </svg>\n              <p class=\"text-base leading-normal\">\n                Upload\n                <span class=\"hidden sm:inline\">From Local Computer</span>\n              </p>\n              <input\n                id=\"files\"\n                type=\"file\"\n                name=\"files\"\n                multiple\n                class=\"hidden\"\n                @change=\"uploadFiles\"\n              />\n            </label>\n          </div>\n        </form>\n      </div>\n      <div\n        id=\"file-list-display\"\n        class=\"w-full my-4\"\n        v-if=\"uploadableFiles.length > 0\"\n      >\n        <table class=\"w-full my-2 text-sm\">\n          <thead>\n            <tr class=\"bg-white text-left\">\n              <th class=\"p-2 font-light hidden md:block\">#</th>\n              <th class=\"p-2 font-light\">File Name</th>\n              <th class=\"p-2 font-light\">Status</th>\n              <th class=\"p-2 font-light\">Progress</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              class=\"p-2 border-b\"\n              v-for=\"(f, index) in uploadableFiles\"\n              v-bind:key=\"index\"\n            >\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\n              <td>\n                <span v-text=\"f.status\"></span>\n              </td>\n              <td>\n                <progress\n                  id=\"progressBar\"\n                  :value=\"f.completion\"\n                  max=\"100\"\n                  class=\"my-2 w-full\"\n                ></progress>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <div\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\n      id=\"message\"\n      v-if=\"message\"\n    >\n      <span v-text=\"message\"></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'vue-image-browser',\n\n  props: {\n    images: {\n      type: Array,\n      default: () => [],\n    },\n\n    imageProperties: {\n      type: Object,\n    },\n\n    allowUpload: {\n      type: Boolean,\n      default: false,\n    },\n\n    saveUrl: {\n      type: String,\n      default: '/api/photos',\n    },\n\n    saveRequestHeaders: {\n      type: Object,\n      default: () => {},\n    },\n\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n\n    allowDelete: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowPhotoPane: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowChoose: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowCopy: {\n      type: Boolean,\n      default: true,\n    },\n\n    captionable: {\n      type: Boolean,\n      default: false,\n    },\n\n    enableLazyLoad: {\n      type: Boolean,\n      default: true,\n    },\n\n    maxImagesPerRow: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  data: function () {\n    return {\n      message: null,\n      query: '',\n      searchResult: null,\n      pane: 'gallery',\n      selectedPhoto: {},\n      uploadableFiles: [],\n      copyLinkText: 'Copy Link',\n      chooseBtnText: 'Choose',\n    }\n  },\n\n  created() {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  updated: function () {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  computed: {\n    imagesPerRow() {\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\n\n      return (\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\n      )\n    },\n  },\n\n  methods: {\n    select(photo) {\n      this.selectedPhoto = photo\n\n      this.allowPhotoPane && (this.pane = 'photo')\n\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('selected', this.selectedPhoto)\n    },\n\n    choose: function () {\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('chosen', this.selectedPhoto)\n\n      this.pane = 'gallery'\n    },\n\n    copy() {\n      let p = this\n\n      if (navigator.clipboard) {\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\n          p.copyLinkText = 'Link Copied!'\n        })\n      }\n    },\n\n    getCaption() {\n      // remove file name extensions\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\n\n      // remove special characters with space\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\n\n      // uppercase first letter of each word\n      caption = caption\n        .toLowerCase()\n        .split(' ')\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\n        .join(' ')\n\n      return prompt('Enter an caption for this image', caption)\n    },\n\n    uploadFiles: function () {\n      let files = document.getElementById('files').files,\n        p = this\n\n      for (let i = 0; i < files.length; i++) {\n        let upf = {\n          name: files[i].name,\n          formdata: new FormData(),\n          ajax: new XMLHttpRequest(),\n          status: 'Not Started',\n          completion: 0,\n        }\n\n        upf.formdata.append('image', files[i])\n        upf.formdata.append('name', files[i].name)\n\n        upf.ajax.upload.onprogress = function (e) {\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\n          upf.completion = Math.round((e.loaded / e.total) * 100)\n        }\n        upf.ajax.upload.onload = function (e) {\n          upf.status = 'Complete'\n          upf.completion = 100\n        }\n        upf.ajax.upload.onerror = function (e) {\n          upf.status = 'Error uploading the file'\n          upf.completion = 0\n        }\n        // ajax.upload.addEventListener('abort', abortHandler, false);\n\n        upf.ajax.open('POST', p.saveUrl)\n\n        let header_keys = Object.keys(p.saveRequestHeaders)\n        for (let i = 0; i < header_keys.length; i++) {\n          let header = header_keys[i]\n          let val = p.saveRequestHeaders[header]\n          upf.ajax.setRequestHeader(header, val)\n        }\n\n        upf.ajax.onreadystatechange = function () {\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\n            let response = upf.ajax.responseText\n            if (response) {\n              try {\n                let media = JSON.parse(response)\n                p.$emit('saved', media)\n              } catch (e) {\n                alert(e)\n              }\n            }\n          }\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\n            upf.status =\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\n            upf.completion = 0\n          }\n        }\n        upf.ajax.send(upf.formdata)\n        this.uploadableFiles.push(upf)\n      }\n    },\n\n    deleteSelected() {\n      this.$emit('deleted', this.selectedPhoto)\n      this.pane = 'gallery'\n    },\n\n    doDelayedSearch() {\n      let p = this\n\n      if (this.timer) {\n        clearTimeout(this.timer)\n        this.timer = null\n      }\n\n      if (p.query.length > 0) p.searchResult = 'Searching...'\n      else p.searchResult = ''\n\n      this.timer = setTimeout(() => {\n        p.$emit('searched', p.query)\n      }, this.searchDelay)\n    },\n\n    // This is an experimental function that enables\n    // lazy-loading.\n    enableLazyLoading() {\n      let images = document.querySelectorAll('.mg-photo')\n\n      const config = {\n        root: null,\n        rootMargin: '0px 0px 50px 0px',\n      }\n\n      // check if intersection observer is supported via browser\n      if (!('IntersectionObserver' in window)) {\n        // if not, just load all immediately\n        Array.from(images).forEach(function (image) {\n          console.log('IntersectionObserver unsupported loading')\n          if (!image.src) image.src = image.dataset.src\n        })\n      } else {\n        let observer = new IntersectionObserver(function (entries) {\n          entries.forEach((image) => {\n            // Are we in viewport?\n            if (image.isIntersecting) {\n              // console.log('Loading: ' + image.target.dataset.src)\n              // console.log(image.target.src)\n              image.target.src = image.target.dataset.src\n              observer.unobserve(image.target)\n            }\n          })\n        }, config)\n\n        images.forEach((image) => {\n          if (!image.src) {\n            observer.observe(image)\n          }\n        })\n      }\n    },\n  },\n}\n</script>\n\n<style>\n@media only screen and (min-width: 640px) {\n  .thumbnail {\n    height: 300px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 768px) {\n  .thumbnail {\n    height: 250px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1024px) {\n  .thumbnail {\n    height: 200px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .thumbnail {\n    height: 120px;\n    overflow: hidden;\n  }\n}\n\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n</style>\n"]}, media: undefined });
+    inject("data-v-962f8ec2_0", { source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\r\n    height: 300px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\r\n    height: 250px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\r\n    height: 200px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\r\n    height: 120px;\r\n    overflow: hidden;\n}\n}\n.mg-photo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\n}\r\n", map: {"version":3,"sources":["C:\\laragon\\www\\vue-image-browser\\src\\vue-image-browser.vue"],"names":[],"mappings":";AAwiBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA","file":"vue-image-browser.vue","sourcesContent":["<template>\r\n  <div class=\"w-full\">\r\n    <div\r\n      v-show=\"pane === 'gallery'\"\r\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\r\n      id=\"top-panel\"\r\n    >\r\n      <div class=\"flex-grow flex\">\r\n        <input\r\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\r\n          type=\"text\"\r\n          v-model=\"query\"\r\n          @keyup=\"doDelayedSearch\"\r\n          placeholder=\"search...\"\r\n        />\r\n        <div\r\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\r\n        >\r\n          <span\r\n            v-if=\"searchResult\"\r\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\r\n            v-text=\"searchResult\"\r\n          ></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"flex-none\" v-if=\"allowUpload\">\r\n        <button\r\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\r\n          title=\"Upload Image\"\r\n          @click=\"pane = 'upload'\"\r\n        >\r\n          Add Image\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-show=\"pane === 'gallery'\"\r\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\r\n    >\r\n      <div\r\n        v-for=\"photo in images\"\r\n        :key=\"photo.id\"\r\n        :class=\"imagesPerRow\"\r\n        @click=\"select(photo)\"\r\n      >\r\n        <div\r\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\r\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\r\n        >\r\n          <div class=\"w-full flex items-center justify-center thumbnail\">\r\n            <img\r\n              v-bind:data-src=\"photo.url\"\r\n              :title=\"photo.name\"\r\n              class=\"mg-photo\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\r\n          >\r\n            <span class=\"truncate\">{{ photo.name }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"pane === 'photo'\"\r\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\r\n    >\r\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 20 20\"\r\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\r\n        >\r\n          <polygon\r\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\r\n          />\r\n        </svg>\r\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\r\n      </button>\r\n\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          @click=\"copy\"\r\n          v-if=\"allowCopy\"\r\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\r\n        >\r\n          {{ copyLinkText }}\r\n        </button>\r\n        <button\r\n          @click=\"choose\"\r\n          v-if=\"allowChoose\"\r\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\r\n        >\r\n          {{ chooseBtnText }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\r\n      <div class=\"w-full postcard\">\r\n        <img\r\n          :src=\"selectedPhoto.url\"\r\n          :title=\"selectedPhoto.name\"\r\n          class=\"mx-auto shadow-lg mg-photo\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\r\n        <table class=\"w-full mt-4 table-auto\">\r\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\r\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\r\n              {{ pk.toUpperCase() }}\r\n            </td>\r\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\r\n          </tr>\r\n        </table>\r\n\r\n        <div class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\">\r\n          <div class=\"flex-none px-3\">\r\n            <button\r\n              @click=\"deleteSelected()\"\r\n              v-if=\"allowDelete\"\r\n              class=\"text-red-500 border px-4 text-sm py-2 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\r\n            >\r\n              Delete\r\n            </button>\r\n          </div>\r\n          <div class=\"flex-grow flex px-3\" v-if=\"allowRename\">\r\n            <input\r\n              class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\r\n              type=\"text\"\r\n              v-model=\"renameQuery\"\r\n            />\r\n            <div class=\"flex relative\">\r\n              <button \r\n                @click=\"renameSelected()\"\r\n                :disabled=\"isRenameDisabled\"\r\n                :class=\"isRenameDisabled ? 'opacity-50 cursor-not-allowed' : ''\"\r\n                class=\"text-blue-500 px-4 text-sm py-1 hover:border hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-r-lg border-r border-t border-b border-gray-300 cursor-pointer\">\r\n                Rename\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"pane === 'upload'\"\r\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\r\n    >\r\n      <div class=\"flex justify-between\">\r\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 20 20\"\r\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\r\n          >\r\n            <polygon\r\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\r\n            />\r\n          </svg>\r\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\r\n            Back to Gallery\r\n          </p>\r\n        </button>\r\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\r\n          <div class=\"w-full flex bg-transparent\">\r\n            <label\r\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\r\n            >\r\n              <svg\r\n                class=\"w-8 h-8 mr-4\"\r\n                fill=\"currentColor\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 20 20\"\r\n              >\r\n                <path\r\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\r\n                />\r\n              </svg>\r\n              <p class=\"text-base leading-normal\">\r\n                Upload\r\n                <span class=\"hidden sm:inline\">From Local Computer</span>\r\n              </p>\r\n              <input\r\n                id=\"files\"\r\n                type=\"file\"\r\n                name=\"files\"\r\n                multiple\r\n                class=\"hidden\"\r\n                @change=\"uploadFiles\"\r\n              />\r\n            </label>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div\r\n        id=\"file-list-display\"\r\n        class=\"w-full my-4\"\r\n        v-if=\"uploadableFiles.length > 0\"\r\n      >\r\n        <table class=\"w-full my-2 text-sm\">\r\n          <thead>\r\n            <tr class=\"bg-white text-left\">\r\n              <th class=\"p-2 font-light hidden md:block\">#</th>\r\n              <th class=\"p-2 font-light\">File Name</th>\r\n              <th class=\"p-2 font-light\">Status</th>\r\n              <th class=\"p-2 font-light\">Progress</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr\r\n              class=\"p-2 border-b\"\r\n              v-for=\"(f, index) in uploadableFiles\"\r\n              v-bind:key=\"index\"\r\n            >\r\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\r\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\r\n              <td>\r\n                <span v-text=\"f.status\"></span>\r\n              </td>\r\n              <td>\r\n                <progress\r\n                  id=\"progressBar\"\r\n                  :value=\"f.completion\"\r\n                  max=\"100\"\r\n                  class=\"my-2 w-full\"\r\n                ></progress>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\r\n      id=\"message\"\r\n      v-if=\"message\"\r\n    >\r\n      <span v-text=\"message\"></span>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'vue-image-browser',\r\n\r\n  props: {\r\n    images: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n\r\n    imageProperties: {\r\n      type: Object,\r\n    },\r\n\r\n    allowUpload: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    saveUrl: {\r\n      type: String,\r\n      default: '/api/photos',\r\n    },\r\n\r\n    saveRequestHeaders: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n\r\n    searchDelay: {\r\n      type: Number,\r\n      default: 500,\r\n    },\r\n\r\n    allowDelete: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowRename: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowPhotoPane: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowChoose: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowCopy: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n\r\n    captionable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    enableLazyLoad: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n\r\n    maxImagesPerRow: {\r\n      type: Number,\r\n      default: 5,\r\n    },\r\n  },\r\n\r\n  data: function () {\r\n    return {\r\n      message: null,\r\n      query: '',\r\n      renameQuery: '',\r\n      searchResult: null,\r\n      pane: 'gallery',\r\n      selectedPhoto: {},\r\n      uploadableFiles: [],\r\n      copyLinkText: 'Copy Link',\r\n      chooseBtnText: 'Choose',\r\n    }\r\n  },\r\n\r\n  created() {\r\n    this.$nextTick(function () {\r\n      if (this.enableLazyLoad) {\r\n        this.enableLazyLoading()\r\n      }\r\n    })\r\n  },\r\n\r\n  updated: function () {\r\n    this.$nextTick(function () {\r\n      if (this.enableLazyLoad) {\r\n        this.enableLazyLoading()\r\n      }\r\n    })\r\n  },\r\n\r\n  computed: {\r\n    imagesPerRow() {\r\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\r\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\r\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\r\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\r\n\r\n      return (\r\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\r\n      )\r\n    },\r\n\r\n    isRenameDisabled() {\r\n      return this.selectedPhoto.name === this.renameQuery\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    select(photo) {\r\n      this.selectedPhoto = photo\r\n\r\n      this.renameQuery = photo.name\r\n\r\n      this.allowPhotoPane && (this.pane = 'photo')\r\n\r\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\r\n\r\n      this.$emit('selected', this.selectedPhoto)\r\n    },\r\n\r\n    choose: function () {\r\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\r\n\r\n      this.$emit('chosen', this.selectedPhoto)\r\n\r\n      this.pane = 'gallery'\r\n    },\r\n\r\n    copy() {\r\n      let p = this\r\n\r\n      if (navigator.clipboard) {\r\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\r\n          p.copyLinkText = 'Link Copied!'\r\n        })\r\n      }\r\n    },\r\n\r\n    getCaption() {\r\n      // remove file name extensions\r\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\r\n\r\n      // remove special characters with space\r\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\r\n\r\n      // uppercase first letter of each word\r\n      caption = caption\r\n        .toLowerCase()\r\n        .split(' ')\r\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\r\n        .join(' ')\r\n\r\n      return prompt('Enter an caption for this image', caption)\r\n    },\r\n\r\n    uploadFiles: function () {\r\n      let files = document.getElementById('files').files,\r\n        p = this\r\n\r\n      for (let i = 0; i < files.length; i++) {\r\n        let upf = {\r\n          name: files[i].name,\r\n          formdata: new FormData(),\r\n          ajax: new XMLHttpRequest(),\r\n          status: 'Not Started',\r\n          completion: 0,\r\n        }\r\n\r\n        upf.formdata.append('image', files[i])\r\n        upf.formdata.append('name', files[i].name)\r\n\r\n        upf.ajax.upload.onprogress = function (e) {\r\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\r\n          upf.completion = Math.round((e.loaded / e.total) * 100)\r\n        }\r\n        upf.ajax.upload.onload = function (e) {\r\n          upf.status = 'Complete'\r\n          upf.completion = 100\r\n        }\r\n        upf.ajax.upload.onerror = function (e) {\r\n          upf.status = 'Error uploading the file'\r\n          upf.completion = 0\r\n        }\r\n        // ajax.upload.addEventListener('abort', abortHandler, false);\r\n\r\n        upf.ajax.open('POST', p.saveUrl)\r\n\r\n        let header_keys = Object.keys(p.saveRequestHeaders)\r\n        for (let i = 0; i < header_keys.length; i++) {\r\n          let header = header_keys[i]\r\n          let val = p.saveRequestHeaders[header]\r\n          upf.ajax.setRequestHeader(header, val)\r\n        }\r\n\r\n        upf.ajax.onreadystatechange = function () {\r\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\r\n            let response = upf.ajax.responseText\r\n            if (response) {\r\n              try {\r\n                let media = JSON.parse(response)\r\n                p.$emit('saved', media)\r\n              } catch (e) {\r\n                alert(e)\r\n              }\r\n            }\r\n          }\r\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\r\n            upf.status =\r\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\r\n            upf.completion = 0\r\n          }\r\n        }\r\n        upf.ajax.send(upf.formdata)\r\n        this.uploadableFiles.push(upf)\r\n      }\r\n    },\r\n\r\n    deleteSelected() {\r\n      this.$emit('deleted', this.selectedPhoto)\r\n      this.pane = 'gallery'\r\n    },\r\n\r\n    renameSelected() {\r\n      if (this.renameQuery.length <= 0)\r\n        return;\r\n\r\n      this.$emit('renamed', this.selectedPhoto, this.renameQuery)\r\n    },\r\n\r\n    doDelayedSearch() {\r\n      let p = this\r\n\r\n      if (this.timer) {\r\n        clearTimeout(this.timer)\r\n        this.timer = null\r\n      }\r\n\r\n      if (p.query.length > 0) p.searchResult = 'Searching...'\r\n      else p.searchResult = ''\r\n\r\n      this.timer = setTimeout(() => {\r\n        p.$emit('searched', p.query)\r\n      }, this.searchDelay)\r\n    },\r\n\r\n    // This is an experimental function that enables\r\n    // lazy-loading.\r\n    enableLazyLoading() {\r\n      let images = document.querySelectorAll('.mg-photo')\r\n\r\n      const config = {\r\n        root: null,\r\n        rootMargin: '0px 0px 50px 0px',\r\n      }\r\n\r\n      // check if intersection observer is supported via browser\r\n      if (!('IntersectionObserver' in window)) {\r\n        // if not, just load all immediately\r\n        Array.from(images).forEach(function (image) {\r\n          console.log('IntersectionObserver unsupported loading')\r\n          if (!image.src) image.src = image.dataset.src\r\n        })\r\n      } else {\r\n        let observer = new IntersectionObserver(function (entries) {\r\n          entries.forEach((image) => {\r\n            // Are we in viewport?\r\n            if (image.isIntersecting) {\r\n              // console.log('Loading: ' + image.target.dataset.src)\r\n              // console.log(image.target.src)\r\n              image.target.src = image.target.dataset.src\r\n              observer.unobserve(image.target)\r\n            }\r\n          })\r\n        }, config)\r\n\r\n        images.forEach((image) => {\r\n          if (!image.src) {\r\n            observer.observe(image)\r\n          }\r\n        })\r\n      }\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style>\r\n@media only screen and (min-width: 640px) {\r\n  .thumbnail {\r\n    height: 300px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 768px) {\r\n  .thumbnail {\r\n    height: 250px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 1024px) {\r\n  .thumbnail {\r\n    height: 200px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 1280px) {\r\n  .thumbnail {\r\n    height: 120px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n.mg-photo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
diff --git a/dist/vue-image-browser.min.js b/dist/vue-image-browser.min.js
index f4e39e2..493384a 100644
--- a/dist/vue-image-browser.min.js
+++ b/dist/vue-image-browser.min.js
@@ -230,6 +230,27 @@ var VueImageBrowser = (function (exports) {
   //
   //
   //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
 
   var script = {
     name: 'vue-image-browser',
@@ -269,6 +290,11 @@ var VueImageBrowser = (function (exports) {
         default: false,
       },
 
+      allowRename: {
+        type: Boolean,
+        default: false,
+      },
+
       allowPhotoPane: {
         type: Boolean,
         default: false,
@@ -304,6 +330,7 @@ var VueImageBrowser = (function (exports) {
       return {
         message: null,
         query: '',
+        renameQuery: '',
         searchResult: null,
         pane: 'gallery',
         selectedPhoto: {},
@@ -340,12 +367,18 @@ var VueImageBrowser = (function (exports) {
           'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
         )
       },
+
+      isRenameDisabled: function isRenameDisabled() {
+        return this.selectedPhoto.name === this.renameQuery
+      },
     },
 
     methods: {
       select: function select(photo) {
         this.selectedPhoto = photo;
 
+        this.renameQuery = photo.name;
+
         this.allowPhotoPane && (this.pane = 'photo');
 
         this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
@@ -459,6 +492,13 @@ var VueImageBrowser = (function (exports) {
         this.pane = 'gallery';
       },
 
+      renameSelected: function renameSelected() {
+        if (this.renameQuery.length <= 0)
+          { return; }
+
+        this.$emit('renamed', this.selectedPhoto, this.renameQuery);
+      },
+
       doDelayedSearch: function doDelayedSearch() {
         var p = this;
 
@@ -515,132 +555,132 @@ var VueImageBrowser = (function (exports) {
     },
   };
 
-  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-      if (typeof shadowMode !== 'boolean') {
-          createInjectorSSR = createInjector;
-          createInjector = shadowMode;
-          shadowMode = false;
-      }
-      // Vue.extend constructor export interop.
-      var options = typeof script === 'function' ? script.options : script;
-      // render functions
-      if (template && template.render) {
-          options.render = template.render;
-          options.staticRenderFns = template.staticRenderFns;
-          options._compiled = true;
-          // functional template
-          if (isFunctionalTemplate) {
-              options.functional = true;
-          }
-      }
-      // scopedId
-      if (scopeId) {
-          options._scopeId = scopeId;
-      }
-      var hook;
-      if (moduleIdentifier) {
-          // server build
-          hook = function (context) {
-              // 2.3 injection
-              context =
-                  context || // cached call
-                      (this.$vnode && this.$vnode.ssrContext) || // stateful
-                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-              // 2.2 with runInNewContext: true
-              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                  context = __VUE_SSR_CONTEXT__;
-              }
-              // inject component styles
-              if (style) {
-                  style.call(this, createInjectorSSR(context));
-              }
-              // register component module identifier for async chunk inference
-              if (context && context._registeredComponents) {
-                  context._registeredComponents.add(moduleIdentifier);
-              }
-          };
-          // used by ssr in case component is cached and beforeCreate
-          // never gets called
-          options._ssrRegister = hook;
-      }
-      else if (style) {
-          hook = shadowMode
-              ? function (context) {
-                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-              }
-              : function (context) {
-                  style.call(this, createInjector(context));
-              };
-      }
-      if (hook) {
-          if (options.functional) {
-              // register for functional component in vue file
-              var originalRender = options.render;
-              options.render = function renderWithStyleInjection(h, context) {
-                  hook.call(context);
-                  return originalRender(h, context);
-              };
-          }
-          else {
-              // inject component registration as beforeCreate hook
-              var existing = options.beforeCreate;
-              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-          }
-      }
-      return script;
+  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+          createInjectorSSR = createInjector;
+          createInjector = shadowMode;
+          shadowMode = false;
+      }
+      // Vue.extend constructor export interop.
+      var options = typeof script === 'function' ? script.options : script;
+      // render functions
+      if (template && template.render) {
+          options.render = template.render;
+          options.staticRenderFns = template.staticRenderFns;
+          options._compiled = true;
+          // functional template
+          if (isFunctionalTemplate) {
+              options.functional = true;
+          }
+      }
+      // scopedId
+      if (scopeId) {
+          options._scopeId = scopeId;
+      }
+      var hook;
+      if (moduleIdentifier) {
+          // server build
+          hook = function (context) {
+              // 2.3 injection
+              context =
+                  context || // cached call
+                      (this.$vnode && this.$vnode.ssrContext) || // stateful
+                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+              // 2.2 with runInNewContext: true
+              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                  context = __VUE_SSR_CONTEXT__;
+              }
+              // inject component styles
+              if (style) {
+                  style.call(this, createInjectorSSR(context));
+              }
+              // register component module identifier for async chunk inference
+              if (context && context._registeredComponents) {
+                  context._registeredComponents.add(moduleIdentifier);
+              }
+          };
+          // used by ssr in case component is cached and beforeCreate
+          // never gets called
+          options._ssrRegister = hook;
+      }
+      else if (style) {
+          hook = shadowMode
+              ? function (context) {
+                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+              }
+              : function (context) {
+                  style.call(this, createInjector(context));
+              };
+      }
+      if (hook) {
+          if (options.functional) {
+              // register for functional component in vue file
+              var originalRender = options.render;
+              options.render = function renderWithStyleInjection(h, context) {
+                  hook.call(context);
+                  return originalRender(h, context);
+              };
+          }
+          else {
+              // inject component registration as beforeCreate hook
+              var existing = options.beforeCreate;
+              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+          }
+      }
+      return script;
   }
 
-  var isOldIE = typeof navigator !== 'undefined' &&
-      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-  function createInjector(context) {
-      return function (id, style) { return addStyle(id, style); };
-  }
-  var HEAD;
-  var styles = {};
-  function addStyle(id, css) {
-      var group = isOldIE ? css.media || 'default' : id;
-      var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-      if (!style.ids.has(id)) {
-          style.ids.add(id);
-          var code = css.source;
-          if (css.map) {
-              // https://developer.chrome.com/devtools/docs/javascript-debugging
-              // this makes source maps inside style tags work properly in Chrome
-              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-              // http://stackoverflow.com/a/26603875
-              code +=
-                  '\n/*# sourceMappingURL=data:application/json;base64,' +
-                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                      ' */';
-          }
-          if (!style.element) {
-              style.element = document.createElement('style');
-              style.element.type = 'text/css';
-              if (css.media)
-                  { style.element.setAttribute('media', css.media); }
-              if (HEAD === undefined) {
-                  HEAD = document.head || document.getElementsByTagName('head')[0];
-              }
-              HEAD.appendChild(style.element);
-          }
-          if ('styleSheet' in style.element) {
-              style.styles.push(code);
-              style.element.styleSheet.cssText = style.styles
-                  .filter(Boolean)
-                  .join('\n');
-          }
-          else {
-              var index = style.ids.size - 1;
-              var textNode = document.createTextNode(code);
-              var nodes = style.element.childNodes;
-              if (nodes[index])
-                  { style.element.removeChild(nodes[index]); }
-              if (nodes.length)
-                  { style.element.insertBefore(textNode, nodes[index]); }
-              else
-                  { style.element.appendChild(textNode); }
-          }
-      }
+  var isOldIE = typeof navigator !== 'undefined' &&
+      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+  function createInjector(context) {
+      return function (id, style) { return addStyle(id, style); };
+  }
+  var HEAD;
+  var styles = {};
+  function addStyle(id, css) {
+      var group = isOldIE ? css.media || 'default' : id;
+      var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+      if (!style.ids.has(id)) {
+          style.ids.add(id);
+          var code = css.source;
+          if (css.map) {
+              // https://developer.chrome.com/devtools/docs/javascript-debugging
+              // this makes source maps inside style tags work properly in Chrome
+              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+              // http://stackoverflow.com/a/26603875
+              code +=
+                  '\n/*# sourceMappingURL=data:application/json;base64,' +
+                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                      ' */';
+          }
+          if (!style.element) {
+              style.element = document.createElement('style');
+              style.element.type = 'text/css';
+              if (css.media)
+                  { style.element.setAttribute('media', css.media); }
+              if (HEAD === undefined) {
+                  HEAD = document.head || document.getElementsByTagName('head')[0];
+              }
+              HEAD.appendChild(style.element);
+          }
+          if ('styleSheet' in style.element) {
+              style.styles.push(code);
+              style.element.styleSheet.cssText = style.styles
+                  .filter(Boolean)
+                  .join('\n');
+          }
+          else {
+              var index = style.ids.size - 1;
+              var textNode = document.createTextNode(code);
+              var nodes = style.element.childNodes;
+              if (nodes[index])
+                  { style.element.removeChild(nodes[index]); }
+              if (nodes.length)
+                  { style.element.insertBefore(textNode, nodes[index]); }
+              else
+                  { style.element.appendChild(textNode); }
+          }
+      }
   }
 
   /* script */
@@ -924,21 +964,79 @@ var VueImageBrowser = (function (exports) {
                 0
               ),
               _vm._v(" "),
-              _vm.allowDelete
-                ? _c(
-                    "button",
-                    {
-                      staticClass:
-                        "text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
-                      on: {
-                        click: function($event) {
-                          return _vm.deleteSelected()
-                        }
-                      }
-                    },
-                    [_vm._v("\n        Delete\n      ")]
-                  )
-                : _vm._e()
+              _c(
+                "div",
+                {
+                  staticClass:
+                    "w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap"
+                },
+                [
+                  _c("div", { staticClass: "flex-none px-3" }, [
+                    _vm.allowDelete
+                      ? _c(
+                          "button",
+                          {
+                            staticClass:
+                              "text-red-500 border px-4 text-sm py-2 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
+                            on: {
+                              click: function($event) {
+                                return _vm.deleteSelected()
+                              }
+                            }
+                          },
+                          [_vm._v("\n            Delete\n          ")]
+                        )
+                      : _vm._e()
+                  ]),
+                  _vm._v(" "),
+                  _vm.allowRename
+                    ? _c("div", { staticClass: "flex-grow flex px-3" }, [
+                        _c("input", {
+                          directives: [
+                            {
+                              name: "model",
+                              rawName: "v-model",
+                              value: _vm.renameQuery,
+                              expression: "renameQuery"
+                            }
+                          ],
+                          staticClass:
+                            "p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none",
+                          attrs: { type: "text" },
+                          domProps: { value: _vm.renameQuery },
+                          on: {
+                            input: function($event) {
+                              if ($event.target.composing) {
+                                return
+                              }
+                              _vm.renameQuery = $event.target.value;
+                            }
+                          }
+                        }),
+                        _vm._v(" "),
+                        _c("div", { staticClass: "flex relative" }, [
+                          _c(
+                            "button",
+                            {
+                              staticClass:
+                                "text-blue-500 px-4 text-sm py-1 hover:border hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-r-lg border-r border-t border-b border-gray-300 cursor-pointer",
+                              class: _vm.isRenameDisabled
+                                ? "opacity-50 cursor-not-allowed"
+                                : "",
+                              attrs: { disabled: _vm.isRenameDisabled },
+                              on: {
+                                click: function($event) {
+                                  return _vm.renameSelected()
+                                }
+                              }
+                            },
+                            [_vm._v("\n              Rename\n            ")]
+                          )
+                        ])
+                      ])
+                    : _vm._e()
+                ]
+              )
             ])
           ])
         : _vm._e(),
@@ -1150,7 +1248,7 @@ var VueImageBrowser = (function (exports) {
     /* style */
     var __vue_inject_styles__ = function (inject) {
       if (!inject) { return }
-      inject("data-v-5b2da7ca_0", { source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\n    height: 300px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\n    height: 250px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\n    height: 200px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\n    height: 120px;\n    overflow: hidden;\n}\n}\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n", map: {"version":3,"sources":["/Users/akash/code/vue-image-browser/src/vue-image-browser.vue"],"names":[],"mappings":";AAggBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA","file":"vue-image-browser.vue","sourcesContent":["<template>\n  <div class=\"w-full\">\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\n      id=\"top-panel\"\n    >\n      <div class=\"flex-grow flex\">\n        <input\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\n          type=\"text\"\n          v-model=\"query\"\n          @keyup=\"doDelayedSearch\"\n          placeholder=\"search...\"\n        />\n        <div\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\n        >\n          <span\n            v-if=\"searchResult\"\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\n            v-text=\"searchResult\"\n          ></span>\n        </div>\n      </div>\n      <div class=\"flex-none\" v-if=\"allowUpload\">\n        <button\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\n          title=\"Upload Image\"\n          @click=\"pane = 'upload'\"\n        >\n          Add Image\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\n    >\n      <div\n        v-for=\"photo in images\"\n        :key=\"photo.id\"\n        :class=\"imagesPerRow\"\n        @click=\"select(photo)\"\n      >\n        <div\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\n        >\n          <div class=\"w-full flex items-center justify-center thumbnail\">\n            <img\n              v-bind:data-src=\"photo.url\"\n              :title=\"photo.name\"\n              class=\"mg-photo\"\n            />\n          </div>\n          <div\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\n          >\n            <span class=\"truncate\">{{ photo.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'photo'\"\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\n    >\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\n        >\n          <polygon\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n          />\n        </svg>\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\n      </button>\n\n      <div class=\"flex items-center justify-between\">\n        <button\n          @click=\"copy\"\n          v-if=\"allowCopy\"\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\n        >\n          {{ copyLinkText }}\n        </button>\n        <button\n          @click=\"choose\"\n          v-if=\"allowChoose\"\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\n        >\n          {{ chooseBtnText }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\n      <div class=\"w-full postcard\">\n        <img\n          :src=\"selectedPhoto.url\"\n          :title=\"selectedPhoto.name\"\n          class=\"mx-auto shadow-lg mg-photo\"\n        />\n      </div>\n\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\n        <table class=\"w-full mt-4 table-auto\">\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\n              {{ pk.toUpperCase() }}\n            </td>\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\n          </tr>\n        </table>\n\n        <button\n          @click=\"deleteSelected()\"\n          v-if=\"allowDelete\"\n          class=\"text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'upload'\"\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\n    >\n      <div class=\"flex justify-between\">\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\n          >\n            <polygon\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n            />\n          </svg>\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\n            Back to Gallery\n          </p>\n        </button>\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\n          <div class=\"w-full flex bg-transparent\">\n            <label\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\n            >\n              <svg\n                class=\"w-8 h-8 mr-4\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\n                />\n              </svg>\n              <p class=\"text-base leading-normal\">\n                Upload\n                <span class=\"hidden sm:inline\">From Local Computer</span>\n              </p>\n              <input\n                id=\"files\"\n                type=\"file\"\n                name=\"files\"\n                multiple\n                class=\"hidden\"\n                @change=\"uploadFiles\"\n              />\n            </label>\n          </div>\n        </form>\n      </div>\n      <div\n        id=\"file-list-display\"\n        class=\"w-full my-4\"\n        v-if=\"uploadableFiles.length > 0\"\n      >\n        <table class=\"w-full my-2 text-sm\">\n          <thead>\n            <tr class=\"bg-white text-left\">\n              <th class=\"p-2 font-light hidden md:block\">#</th>\n              <th class=\"p-2 font-light\">File Name</th>\n              <th class=\"p-2 font-light\">Status</th>\n              <th class=\"p-2 font-light\">Progress</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              class=\"p-2 border-b\"\n              v-for=\"(f, index) in uploadableFiles\"\n              v-bind:key=\"index\"\n            >\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\n              <td>\n                <span v-text=\"f.status\"></span>\n              </td>\n              <td>\n                <progress\n                  id=\"progressBar\"\n                  :value=\"f.completion\"\n                  max=\"100\"\n                  class=\"my-2 w-full\"\n                ></progress>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <div\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\n      id=\"message\"\n      v-if=\"message\"\n    >\n      <span v-text=\"message\"></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'vue-image-browser',\n\n  props: {\n    images: {\n      type: Array,\n      default: () => [],\n    },\n\n    imageProperties: {\n      type: Object,\n    },\n\n    allowUpload: {\n      type: Boolean,\n      default: false,\n    },\n\n    saveUrl: {\n      type: String,\n      default: '/api/photos',\n    },\n\n    saveRequestHeaders: {\n      type: Object,\n      default: () => {},\n    },\n\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n\n    allowDelete: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowPhotoPane: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowChoose: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowCopy: {\n      type: Boolean,\n      default: true,\n    },\n\n    captionable: {\n      type: Boolean,\n      default: false,\n    },\n\n    enableLazyLoad: {\n      type: Boolean,\n      default: true,\n    },\n\n    maxImagesPerRow: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  data: function () {\n    return {\n      message: null,\n      query: '',\n      searchResult: null,\n      pane: 'gallery',\n      selectedPhoto: {},\n      uploadableFiles: [],\n      copyLinkText: 'Copy Link',\n      chooseBtnText: 'Choose',\n    }\n  },\n\n  created() {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  updated: function () {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  computed: {\n    imagesPerRow() {\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\n\n      return (\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\n      )\n    },\n  },\n\n  methods: {\n    select(photo) {\n      this.selectedPhoto = photo\n\n      this.allowPhotoPane && (this.pane = 'photo')\n\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('selected', this.selectedPhoto)\n    },\n\n    choose: function () {\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('chosen', this.selectedPhoto)\n\n      this.pane = 'gallery'\n    },\n\n    copy() {\n      let p = this\n\n      if (navigator.clipboard) {\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\n          p.copyLinkText = 'Link Copied!'\n        })\n      }\n    },\n\n    getCaption() {\n      // remove file name extensions\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\n\n      // remove special characters with space\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\n\n      // uppercase first letter of each word\n      caption = caption\n        .toLowerCase()\n        .split(' ')\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\n        .join(' ')\n\n      return prompt('Enter an caption for this image', caption)\n    },\n\n    uploadFiles: function () {\n      let files = document.getElementById('files').files,\n        p = this\n\n      for (let i = 0; i < files.length; i++) {\n        let upf = {\n          name: files[i].name,\n          formdata: new FormData(),\n          ajax: new XMLHttpRequest(),\n          status: 'Not Started',\n          completion: 0,\n        }\n\n        upf.formdata.append('image', files[i])\n        upf.formdata.append('name', files[i].name)\n\n        upf.ajax.upload.onprogress = function (e) {\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\n          upf.completion = Math.round((e.loaded / e.total) * 100)\n        }\n        upf.ajax.upload.onload = function (e) {\n          upf.status = 'Complete'\n          upf.completion = 100\n        }\n        upf.ajax.upload.onerror = function (e) {\n          upf.status = 'Error uploading the file'\n          upf.completion = 0\n        }\n        // ajax.upload.addEventListener('abort', abortHandler, false);\n\n        upf.ajax.open('POST', p.saveUrl)\n\n        let header_keys = Object.keys(p.saveRequestHeaders)\n        for (let i = 0; i < header_keys.length; i++) {\n          let header = header_keys[i]\n          let val = p.saveRequestHeaders[header]\n          upf.ajax.setRequestHeader(header, val)\n        }\n\n        upf.ajax.onreadystatechange = function () {\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\n            let response = upf.ajax.responseText\n            if (response) {\n              try {\n                let media = JSON.parse(response)\n                p.$emit('saved', media)\n              } catch (e) {\n                alert(e)\n              }\n            }\n          }\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\n            upf.status =\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\n            upf.completion = 0\n          }\n        }\n        upf.ajax.send(upf.formdata)\n        this.uploadableFiles.push(upf)\n      }\n    },\n\n    deleteSelected() {\n      this.$emit('deleted', this.selectedPhoto)\n      this.pane = 'gallery'\n    },\n\n    doDelayedSearch() {\n      let p = this\n\n      if (this.timer) {\n        clearTimeout(this.timer)\n        this.timer = null\n      }\n\n      if (p.query.length > 0) p.searchResult = 'Searching...'\n      else p.searchResult = ''\n\n      this.timer = setTimeout(() => {\n        p.$emit('searched', p.query)\n      }, this.searchDelay)\n    },\n\n    // This is an experimental function that enables\n    // lazy-loading.\n    enableLazyLoading() {\n      let images = document.querySelectorAll('.mg-photo')\n\n      const config = {\n        root: null,\n        rootMargin: '0px 0px 50px 0px',\n      }\n\n      // check if intersection observer is supported via browser\n      if (!('IntersectionObserver' in window)) {\n        // if not, just load all immediately\n        Array.from(images).forEach(function (image) {\n          console.log('IntersectionObserver unsupported loading')\n          if (!image.src) image.src = image.dataset.src\n        })\n      } else {\n        let observer = new IntersectionObserver(function (entries) {\n          entries.forEach((image) => {\n            // Are we in viewport?\n            if (image.isIntersecting) {\n              // console.log('Loading: ' + image.target.dataset.src)\n              // console.log(image.target.src)\n              image.target.src = image.target.dataset.src\n              observer.unobserve(image.target)\n            }\n          })\n        }, config)\n\n        images.forEach((image) => {\n          if (!image.src) {\n            observer.observe(image)\n          }\n        })\n      }\n    },\n  },\n}\n</script>\n\n<style>\n@media only screen and (min-width: 640px) {\n  .thumbnail {\n    height: 300px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 768px) {\n  .thumbnail {\n    height: 250px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1024px) {\n  .thumbnail {\n    height: 200px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .thumbnail {\n    height: 120px;\n    overflow: hidden;\n  }\n}\n\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-962f8ec2_0", { source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\r\n    height: 300px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\r\n    height: 250px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\r\n    height: 200px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\r\n    height: 120px;\r\n    overflow: hidden;\n}\n}\n.mg-photo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\n}\r\n", map: {"version":3,"sources":["C:\\laragon\\www\\vue-image-browser\\src\\vue-image-browser.vue"],"names":[],"mappings":";AAwiBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA","file":"vue-image-browser.vue","sourcesContent":["<template>\r\n  <div class=\"w-full\">\r\n    <div\r\n      v-show=\"pane === 'gallery'\"\r\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\r\n      id=\"top-panel\"\r\n    >\r\n      <div class=\"flex-grow flex\">\r\n        <input\r\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\r\n          type=\"text\"\r\n          v-model=\"query\"\r\n          @keyup=\"doDelayedSearch\"\r\n          placeholder=\"search...\"\r\n        />\r\n        <div\r\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\r\n        >\r\n          <span\r\n            v-if=\"searchResult\"\r\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\r\n            v-text=\"searchResult\"\r\n          ></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"flex-none\" v-if=\"allowUpload\">\r\n        <button\r\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\r\n          title=\"Upload Image\"\r\n          @click=\"pane = 'upload'\"\r\n        >\r\n          Add Image\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-show=\"pane === 'gallery'\"\r\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\r\n    >\r\n      <div\r\n        v-for=\"photo in images\"\r\n        :key=\"photo.id\"\r\n        :class=\"imagesPerRow\"\r\n        @click=\"select(photo)\"\r\n      >\r\n        <div\r\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\r\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\r\n        >\r\n          <div class=\"w-full flex items-center justify-center thumbnail\">\r\n            <img\r\n              v-bind:data-src=\"photo.url\"\r\n              :title=\"photo.name\"\r\n              class=\"mg-photo\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\r\n          >\r\n            <span class=\"truncate\">{{ photo.name }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"pane === 'photo'\"\r\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\r\n    >\r\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 20 20\"\r\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\r\n        >\r\n          <polygon\r\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\r\n          />\r\n        </svg>\r\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\r\n      </button>\r\n\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          @click=\"copy\"\r\n          v-if=\"allowCopy\"\r\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\r\n        >\r\n          {{ copyLinkText }}\r\n        </button>\r\n        <button\r\n          @click=\"choose\"\r\n          v-if=\"allowChoose\"\r\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\r\n        >\r\n          {{ chooseBtnText }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\r\n      <div class=\"w-full postcard\">\r\n        <img\r\n          :src=\"selectedPhoto.url\"\r\n          :title=\"selectedPhoto.name\"\r\n          class=\"mx-auto shadow-lg mg-photo\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\r\n        <table class=\"w-full mt-4 table-auto\">\r\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\r\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\r\n              {{ pk.toUpperCase() }}\r\n            </td>\r\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\r\n          </tr>\r\n        </table>\r\n\r\n        <div class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\">\r\n          <div class=\"flex-none px-3\">\r\n            <button\r\n              @click=\"deleteSelected()\"\r\n              v-if=\"allowDelete\"\r\n              class=\"text-red-500 border px-4 text-sm py-2 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\r\n            >\r\n              Delete\r\n            </button>\r\n          </div>\r\n          <div class=\"flex-grow flex px-3\" v-if=\"allowRename\">\r\n            <input\r\n              class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\r\n              type=\"text\"\r\n              v-model=\"renameQuery\"\r\n            />\r\n            <div class=\"flex relative\">\r\n              <button \r\n                @click=\"renameSelected()\"\r\n                :disabled=\"isRenameDisabled\"\r\n                :class=\"isRenameDisabled ? 'opacity-50 cursor-not-allowed' : ''\"\r\n                class=\"text-blue-500 px-4 text-sm py-1 hover:border hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-r-lg border-r border-t border-b border-gray-300 cursor-pointer\">\r\n                Rename\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"pane === 'upload'\"\r\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\r\n    >\r\n      <div class=\"flex justify-between\">\r\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 20 20\"\r\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\r\n          >\r\n            <polygon\r\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\r\n            />\r\n          </svg>\r\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\r\n            Back to Gallery\r\n          </p>\r\n        </button>\r\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\r\n          <div class=\"w-full flex bg-transparent\">\r\n            <label\r\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\r\n            >\r\n              <svg\r\n                class=\"w-8 h-8 mr-4\"\r\n                fill=\"currentColor\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 20 20\"\r\n              >\r\n                <path\r\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\r\n                />\r\n              </svg>\r\n              <p class=\"text-base leading-normal\">\r\n                Upload\r\n                <span class=\"hidden sm:inline\">From Local Computer</span>\r\n              </p>\r\n              <input\r\n                id=\"files\"\r\n                type=\"file\"\r\n                name=\"files\"\r\n                multiple\r\n                class=\"hidden\"\r\n                @change=\"uploadFiles\"\r\n              />\r\n            </label>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div\r\n        id=\"file-list-display\"\r\n        class=\"w-full my-4\"\r\n        v-if=\"uploadableFiles.length > 0\"\r\n      >\r\n        <table class=\"w-full my-2 text-sm\">\r\n          <thead>\r\n            <tr class=\"bg-white text-left\">\r\n              <th class=\"p-2 font-light hidden md:block\">#</th>\r\n              <th class=\"p-2 font-light\">File Name</th>\r\n              <th class=\"p-2 font-light\">Status</th>\r\n              <th class=\"p-2 font-light\">Progress</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr\r\n              class=\"p-2 border-b\"\r\n              v-for=\"(f, index) in uploadableFiles\"\r\n              v-bind:key=\"index\"\r\n            >\r\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\r\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\r\n              <td>\r\n                <span v-text=\"f.status\"></span>\r\n              </td>\r\n              <td>\r\n                <progress\r\n                  id=\"progressBar\"\r\n                  :value=\"f.completion\"\r\n                  max=\"100\"\r\n                  class=\"my-2 w-full\"\r\n                ></progress>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\r\n      id=\"message\"\r\n      v-if=\"message\"\r\n    >\r\n      <span v-text=\"message\"></span>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'vue-image-browser',\r\n\r\n  props: {\r\n    images: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n\r\n    imageProperties: {\r\n      type: Object,\r\n    },\r\n\r\n    allowUpload: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    saveUrl: {\r\n      type: String,\r\n      default: '/api/photos',\r\n    },\r\n\r\n    saveRequestHeaders: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n\r\n    searchDelay: {\r\n      type: Number,\r\n      default: 500,\r\n    },\r\n\r\n    allowDelete: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowRename: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowPhotoPane: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowChoose: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowCopy: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n\r\n    captionable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    enableLazyLoad: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n\r\n    maxImagesPerRow: {\r\n      type: Number,\r\n      default: 5,\r\n    },\r\n  },\r\n\r\n  data: function () {\r\n    return {\r\n      message: null,\r\n      query: '',\r\n      renameQuery: '',\r\n      searchResult: null,\r\n      pane: 'gallery',\r\n      selectedPhoto: {},\r\n      uploadableFiles: [],\r\n      copyLinkText: 'Copy Link',\r\n      chooseBtnText: 'Choose',\r\n    }\r\n  },\r\n\r\n  created() {\r\n    this.$nextTick(function () {\r\n      if (this.enableLazyLoad) {\r\n        this.enableLazyLoading()\r\n      }\r\n    })\r\n  },\r\n\r\n  updated: function () {\r\n    this.$nextTick(function () {\r\n      if (this.enableLazyLoad) {\r\n        this.enableLazyLoading()\r\n      }\r\n    })\r\n  },\r\n\r\n  computed: {\r\n    imagesPerRow() {\r\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\r\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\r\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\r\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\r\n\r\n      return (\r\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\r\n      )\r\n    },\r\n\r\n    isRenameDisabled() {\r\n      return this.selectedPhoto.name === this.renameQuery\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    select(photo) {\r\n      this.selectedPhoto = photo\r\n\r\n      this.renameQuery = photo.name\r\n\r\n      this.allowPhotoPane && (this.pane = 'photo')\r\n\r\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\r\n\r\n      this.$emit('selected', this.selectedPhoto)\r\n    },\r\n\r\n    choose: function () {\r\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\r\n\r\n      this.$emit('chosen', this.selectedPhoto)\r\n\r\n      this.pane = 'gallery'\r\n    },\r\n\r\n    copy() {\r\n      let p = this\r\n\r\n      if (navigator.clipboard) {\r\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\r\n          p.copyLinkText = 'Link Copied!'\r\n        })\r\n      }\r\n    },\r\n\r\n    getCaption() {\r\n      // remove file name extensions\r\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\r\n\r\n      // remove special characters with space\r\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\r\n\r\n      // uppercase first letter of each word\r\n      caption = caption\r\n        .toLowerCase()\r\n        .split(' ')\r\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\r\n        .join(' ')\r\n\r\n      return prompt('Enter an caption for this image', caption)\r\n    },\r\n\r\n    uploadFiles: function () {\r\n      let files = document.getElementById('files').files,\r\n        p = this\r\n\r\n      for (let i = 0; i < files.length; i++) {\r\n        let upf = {\r\n          name: files[i].name,\r\n          formdata: new FormData(),\r\n          ajax: new XMLHttpRequest(),\r\n          status: 'Not Started',\r\n          completion: 0,\r\n        }\r\n\r\n        upf.formdata.append('image', files[i])\r\n        upf.formdata.append('name', files[i].name)\r\n\r\n        upf.ajax.upload.onprogress = function (e) {\r\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\r\n          upf.completion = Math.round((e.loaded / e.total) * 100)\r\n        }\r\n        upf.ajax.upload.onload = function (e) {\r\n          upf.status = 'Complete'\r\n          upf.completion = 100\r\n        }\r\n        upf.ajax.upload.onerror = function (e) {\r\n          upf.status = 'Error uploading the file'\r\n          upf.completion = 0\r\n        }\r\n        // ajax.upload.addEventListener('abort', abortHandler, false);\r\n\r\n        upf.ajax.open('POST', p.saveUrl)\r\n\r\n        let header_keys = Object.keys(p.saveRequestHeaders)\r\n        for (let i = 0; i < header_keys.length; i++) {\r\n          let header = header_keys[i]\r\n          let val = p.saveRequestHeaders[header]\r\n          upf.ajax.setRequestHeader(header, val)\r\n        }\r\n\r\n        upf.ajax.onreadystatechange = function () {\r\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\r\n            let response = upf.ajax.responseText\r\n            if (response) {\r\n              try {\r\n                let media = JSON.parse(response)\r\n                p.$emit('saved', media)\r\n              } catch (e) {\r\n                alert(e)\r\n              }\r\n            }\r\n          }\r\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\r\n            upf.status =\r\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\r\n            upf.completion = 0\r\n          }\r\n        }\r\n        upf.ajax.send(upf.formdata)\r\n        this.uploadableFiles.push(upf)\r\n      }\r\n    },\r\n\r\n    deleteSelected() {\r\n      this.$emit('deleted', this.selectedPhoto)\r\n      this.pane = 'gallery'\r\n    },\r\n\r\n    renameSelected() {\r\n      if (this.renameQuery.length <= 0)\r\n        return;\r\n\r\n      this.$emit('renamed', this.selectedPhoto, this.renameQuery)\r\n    },\r\n\r\n    doDelayedSearch() {\r\n      let p = this\r\n\r\n      if (this.timer) {\r\n        clearTimeout(this.timer)\r\n        this.timer = null\r\n      }\r\n\r\n      if (p.query.length > 0) p.searchResult = 'Searching...'\r\n      else p.searchResult = ''\r\n\r\n      this.timer = setTimeout(() => {\r\n        p.$emit('searched', p.query)\r\n      }, this.searchDelay)\r\n    },\r\n\r\n    // This is an experimental function that enables\r\n    // lazy-loading.\r\n    enableLazyLoading() {\r\n      let images = document.querySelectorAll('.mg-photo')\r\n\r\n      const config = {\r\n        root: null,\r\n        rootMargin: '0px 0px 50px 0px',\r\n      }\r\n\r\n      // check if intersection observer is supported via browser\r\n      if (!('IntersectionObserver' in window)) {\r\n        // if not, just load all immediately\r\n        Array.from(images).forEach(function (image) {\r\n          console.log('IntersectionObserver unsupported loading')\r\n          if (!image.src) image.src = image.dataset.src\r\n        })\r\n      } else {\r\n        let observer = new IntersectionObserver(function (entries) {\r\n          entries.forEach((image) => {\r\n            // Are we in viewport?\r\n            if (image.isIntersecting) {\r\n              // console.log('Loading: ' + image.target.dataset.src)\r\n              // console.log(image.target.src)\r\n              image.target.src = image.target.dataset.src\r\n              observer.unobserve(image.target)\r\n            }\r\n          })\r\n        }, config)\r\n\r\n        images.forEach((image) => {\r\n          if (!image.src) {\r\n            observer.observe(image)\r\n          }\r\n        })\r\n      }\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style>\r\n@media only screen and (min-width: 640px) {\r\n  .thumbnail {\r\n    height: 300px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 768px) {\r\n  .thumbnail {\r\n    height: 250px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 1024px) {\r\n  .thumbnail {\r\n    height: 200px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 1280px) {\r\n  .thumbnail {\r\n    height: 120px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n.mg-photo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
     };
     /* scoped */
diff --git a/dist/vue-image-browser.umd.js b/dist/vue-image-browser.umd.js
index 0e7daca..10909bb 100644
--- a/dist/vue-image-browser.umd.js
+++ b/dist/vue-image-browser.umd.js
@@ -233,6 +233,27 @@
   //
   //
   //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
+  //
 
   var script = {
     name: 'vue-image-browser',
@@ -272,6 +293,11 @@
         default: false,
       },
 
+      allowRename: {
+        type: Boolean,
+        default: false,
+      },
+
       allowPhotoPane: {
         type: Boolean,
         default: false,
@@ -307,6 +333,7 @@
       return {
         message: null,
         query: '',
+        renameQuery: '',
         searchResult: null,
         pane: 'gallery',
         selectedPhoto: {},
@@ -343,12 +370,18 @@
           'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
         )
       },
+
+      isRenameDisabled: function isRenameDisabled() {
+        return this.selectedPhoto.name === this.renameQuery
+      },
     },
 
     methods: {
       select: function select(photo) {
         this.selectedPhoto = photo;
 
+        this.renameQuery = photo.name;
+
         this.allowPhotoPane && (this.pane = 'photo');
 
         this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
@@ -462,6 +495,13 @@
         this.pane = 'gallery';
       },
 
+      renameSelected: function renameSelected() {
+        if (this.renameQuery.length <= 0)
+          { return; }
+
+        this.$emit('renamed', this.selectedPhoto, this.renameQuery);
+      },
+
       doDelayedSearch: function doDelayedSearch() {
         var p = this;
 
@@ -518,132 +558,132 @@
     },
   };
 
-  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-      if (typeof shadowMode !== 'boolean') {
-          createInjectorSSR = createInjector;
-          createInjector = shadowMode;
-          shadowMode = false;
-      }
-      // Vue.extend constructor export interop.
-      var options = typeof script === 'function' ? script.options : script;
-      // render functions
-      if (template && template.render) {
-          options.render = template.render;
-          options.staticRenderFns = template.staticRenderFns;
-          options._compiled = true;
-          // functional template
-          if (isFunctionalTemplate) {
-              options.functional = true;
-          }
-      }
-      // scopedId
-      if (scopeId) {
-          options._scopeId = scopeId;
-      }
-      var hook;
-      if (moduleIdentifier) {
-          // server build
-          hook = function (context) {
-              // 2.3 injection
-              context =
-                  context || // cached call
-                      (this.$vnode && this.$vnode.ssrContext) || // stateful
-                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-              // 2.2 with runInNewContext: true
-              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                  context = __VUE_SSR_CONTEXT__;
-              }
-              // inject component styles
-              if (style) {
-                  style.call(this, createInjectorSSR(context));
-              }
-              // register component module identifier for async chunk inference
-              if (context && context._registeredComponents) {
-                  context._registeredComponents.add(moduleIdentifier);
-              }
-          };
-          // used by ssr in case component is cached and beforeCreate
-          // never gets called
-          options._ssrRegister = hook;
-      }
-      else if (style) {
-          hook = shadowMode
-              ? function (context) {
-                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-              }
-              : function (context) {
-                  style.call(this, createInjector(context));
-              };
-      }
-      if (hook) {
-          if (options.functional) {
-              // register for functional component in vue file
-              var originalRender = options.render;
-              options.render = function renderWithStyleInjection(h, context) {
-                  hook.call(context);
-                  return originalRender(h, context);
-              };
-          }
-          else {
-              // inject component registration as beforeCreate hook
-              var existing = options.beforeCreate;
-              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-          }
-      }
-      return script;
+  function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+          createInjectorSSR = createInjector;
+          createInjector = shadowMode;
+          shadowMode = false;
+      }
+      // Vue.extend constructor export interop.
+      var options = typeof script === 'function' ? script.options : script;
+      // render functions
+      if (template && template.render) {
+          options.render = template.render;
+          options.staticRenderFns = template.staticRenderFns;
+          options._compiled = true;
+          // functional template
+          if (isFunctionalTemplate) {
+              options.functional = true;
+          }
+      }
+      // scopedId
+      if (scopeId) {
+          options._scopeId = scopeId;
+      }
+      var hook;
+      if (moduleIdentifier) {
+          // server build
+          hook = function (context) {
+              // 2.3 injection
+              context =
+                  context || // cached call
+                      (this.$vnode && this.$vnode.ssrContext) || // stateful
+                      (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+              // 2.2 with runInNewContext: true
+              if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                  context = __VUE_SSR_CONTEXT__;
+              }
+              // inject component styles
+              if (style) {
+                  style.call(this, createInjectorSSR(context));
+              }
+              // register component module identifier for async chunk inference
+              if (context && context._registeredComponents) {
+                  context._registeredComponents.add(moduleIdentifier);
+              }
+          };
+          // used by ssr in case component is cached and beforeCreate
+          // never gets called
+          options._ssrRegister = hook;
+      }
+      else if (style) {
+          hook = shadowMode
+              ? function (context) {
+                  style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+              }
+              : function (context) {
+                  style.call(this, createInjector(context));
+              };
+      }
+      if (hook) {
+          if (options.functional) {
+              // register for functional component in vue file
+              var originalRender = options.render;
+              options.render = function renderWithStyleInjection(h, context) {
+                  hook.call(context);
+                  return originalRender(h, context);
+              };
+          }
+          else {
+              // inject component registration as beforeCreate hook
+              var existing = options.beforeCreate;
+              options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+          }
+      }
+      return script;
   }
 
-  var isOldIE = typeof navigator !== 'undefined' &&
-      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-  function createInjector(context) {
-      return function (id, style) { return addStyle(id, style); };
-  }
-  var HEAD;
-  var styles = {};
-  function addStyle(id, css) {
-      var group = isOldIE ? css.media || 'default' : id;
-      var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-      if (!style.ids.has(id)) {
-          style.ids.add(id);
-          var code = css.source;
-          if (css.map) {
-              // https://developer.chrome.com/devtools/docs/javascript-debugging
-              // this makes source maps inside style tags work properly in Chrome
-              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-              // http://stackoverflow.com/a/26603875
-              code +=
-                  '\n/*# sourceMappingURL=data:application/json;base64,' +
-                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                      ' */';
-          }
-          if (!style.element) {
-              style.element = document.createElement('style');
-              style.element.type = 'text/css';
-              if (css.media)
-                  { style.element.setAttribute('media', css.media); }
-              if (HEAD === undefined) {
-                  HEAD = document.head || document.getElementsByTagName('head')[0];
-              }
-              HEAD.appendChild(style.element);
-          }
-          if ('styleSheet' in style.element) {
-              style.styles.push(code);
-              style.element.styleSheet.cssText = style.styles
-                  .filter(Boolean)
-                  .join('\n');
-          }
-          else {
-              var index = style.ids.size - 1;
-              var textNode = document.createTextNode(code);
-              var nodes = style.element.childNodes;
-              if (nodes[index])
-                  { style.element.removeChild(nodes[index]); }
-              if (nodes.length)
-                  { style.element.insertBefore(textNode, nodes[index]); }
-              else
-                  { style.element.appendChild(textNode); }
-          }
-      }
+  var isOldIE = typeof navigator !== 'undefined' &&
+      /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+  function createInjector(context) {
+      return function (id, style) { return addStyle(id, style); };
+  }
+  var HEAD;
+  var styles = {};
+  function addStyle(id, css) {
+      var group = isOldIE ? css.media || 'default' : id;
+      var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+      if (!style.ids.has(id)) {
+          style.ids.add(id);
+          var code = css.source;
+          if (css.map) {
+              // https://developer.chrome.com/devtools/docs/javascript-debugging
+              // this makes source maps inside style tags work properly in Chrome
+              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+              // http://stackoverflow.com/a/26603875
+              code +=
+                  '\n/*# sourceMappingURL=data:application/json;base64,' +
+                      btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                      ' */';
+          }
+          if (!style.element) {
+              style.element = document.createElement('style');
+              style.element.type = 'text/css';
+              if (css.media)
+                  { style.element.setAttribute('media', css.media); }
+              if (HEAD === undefined) {
+                  HEAD = document.head || document.getElementsByTagName('head')[0];
+              }
+              HEAD.appendChild(style.element);
+          }
+          if ('styleSheet' in style.element) {
+              style.styles.push(code);
+              style.element.styleSheet.cssText = style.styles
+                  .filter(Boolean)
+                  .join('\n');
+          }
+          else {
+              var index = style.ids.size - 1;
+              var textNode = document.createTextNode(code);
+              var nodes = style.element.childNodes;
+              if (nodes[index])
+                  { style.element.removeChild(nodes[index]); }
+              if (nodes.length)
+                  { style.element.insertBefore(textNode, nodes[index]); }
+              else
+                  { style.element.appendChild(textNode); }
+          }
+      }
   }
 
   /* script */
@@ -927,21 +967,79 @@
                 0
               ),
               _vm._v(" "),
-              _vm.allowDelete
-                ? _c(
-                    "button",
-                    {
-                      staticClass:
-                        "text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
-                      on: {
-                        click: function($event) {
-                          return _vm.deleteSelected()
-                        }
-                      }
-                    },
-                    [_vm._v("\n        Delete\n      ")]
-                  )
-                : _vm._e()
+              _c(
+                "div",
+                {
+                  staticClass:
+                    "w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap"
+                },
+                [
+                  _c("div", { staticClass: "flex-none px-3" }, [
+                    _vm.allowDelete
+                      ? _c(
+                          "button",
+                          {
+                            staticClass:
+                              "text-red-500 border px-4 text-sm py-2 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
+                            on: {
+                              click: function($event) {
+                                return _vm.deleteSelected()
+                              }
+                            }
+                          },
+                          [_vm._v("\n            Delete\n          ")]
+                        )
+                      : _vm._e()
+                  ]),
+                  _vm._v(" "),
+                  _vm.allowRename
+                    ? _c("div", { staticClass: "flex-grow flex px-3" }, [
+                        _c("input", {
+                          directives: [
+                            {
+                              name: "model",
+                              rawName: "v-model",
+                              value: _vm.renameQuery,
+                              expression: "renameQuery"
+                            }
+                          ],
+                          staticClass:
+                            "p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none",
+                          attrs: { type: "text" },
+                          domProps: { value: _vm.renameQuery },
+                          on: {
+                            input: function($event) {
+                              if ($event.target.composing) {
+                                return
+                              }
+                              _vm.renameQuery = $event.target.value;
+                            }
+                          }
+                        }),
+                        _vm._v(" "),
+                        _c("div", { staticClass: "flex relative" }, [
+                          _c(
+                            "button",
+                            {
+                              staticClass:
+                                "text-blue-500 px-4 text-sm py-1 hover:border hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-r-lg border-r border-t border-b border-gray-300 cursor-pointer",
+                              class: _vm.isRenameDisabled
+                                ? "opacity-50 cursor-not-allowed"
+                                : "",
+                              attrs: { disabled: _vm.isRenameDisabled },
+                              on: {
+                                click: function($event) {
+                                  return _vm.renameSelected()
+                                }
+                              }
+                            },
+                            [_vm._v("\n              Rename\n            ")]
+                          )
+                        ])
+                      ])
+                    : _vm._e()
+                ]
+              )
             ])
           ])
         : _vm._e(),
@@ -1153,7 +1251,7 @@
     /* style */
     var __vue_inject_styles__ = function (inject) {
       if (!inject) { return }
-      inject("data-v-5b2da7ca_0", { source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\n    height: 300px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\n    height: 250px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\n    height: 200px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\n    height: 120px;\n    overflow: hidden;\n}\n}\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n", map: {"version":3,"sources":["/Users/akash/code/vue-image-browser/src/vue-image-browser.vue"],"names":[],"mappings":";AAggBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA","file":"vue-image-browser.vue","sourcesContent":["<template>\n  <div class=\"w-full\">\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\n      id=\"top-panel\"\n    >\n      <div class=\"flex-grow flex\">\n        <input\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\n          type=\"text\"\n          v-model=\"query\"\n          @keyup=\"doDelayedSearch\"\n          placeholder=\"search...\"\n        />\n        <div\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\n        >\n          <span\n            v-if=\"searchResult\"\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\n            v-text=\"searchResult\"\n          ></span>\n        </div>\n      </div>\n      <div class=\"flex-none\" v-if=\"allowUpload\">\n        <button\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\n          title=\"Upload Image\"\n          @click=\"pane = 'upload'\"\n        >\n          Add Image\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\n    >\n      <div\n        v-for=\"photo in images\"\n        :key=\"photo.id\"\n        :class=\"imagesPerRow\"\n        @click=\"select(photo)\"\n      >\n        <div\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\n        >\n          <div class=\"w-full flex items-center justify-center thumbnail\">\n            <img\n              v-bind:data-src=\"photo.url\"\n              :title=\"photo.name\"\n              class=\"mg-photo\"\n            />\n          </div>\n          <div\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\n          >\n            <span class=\"truncate\">{{ photo.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'photo'\"\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\n    >\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\n        >\n          <polygon\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n          />\n        </svg>\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\n      </button>\n\n      <div class=\"flex items-center justify-between\">\n        <button\n          @click=\"copy\"\n          v-if=\"allowCopy\"\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\n        >\n          {{ copyLinkText }}\n        </button>\n        <button\n          @click=\"choose\"\n          v-if=\"allowChoose\"\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\n        >\n          {{ chooseBtnText }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\n      <div class=\"w-full postcard\">\n        <img\n          :src=\"selectedPhoto.url\"\n          :title=\"selectedPhoto.name\"\n          class=\"mx-auto shadow-lg mg-photo\"\n        />\n      </div>\n\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\n        <table class=\"w-full mt-4 table-auto\">\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\n              {{ pk.toUpperCase() }}\n            </td>\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\n          </tr>\n        </table>\n\n        <button\n          @click=\"deleteSelected()\"\n          v-if=\"allowDelete\"\n          class=\"text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'upload'\"\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\n    >\n      <div class=\"flex justify-between\">\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\n          >\n            <polygon\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n            />\n          </svg>\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\n            Back to Gallery\n          </p>\n        </button>\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\n          <div class=\"w-full flex bg-transparent\">\n            <label\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\n            >\n              <svg\n                class=\"w-8 h-8 mr-4\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\n                />\n              </svg>\n              <p class=\"text-base leading-normal\">\n                Upload\n                <span class=\"hidden sm:inline\">From Local Computer</span>\n              </p>\n              <input\n                id=\"files\"\n                type=\"file\"\n                name=\"files\"\n                multiple\n                class=\"hidden\"\n                @change=\"uploadFiles\"\n              />\n            </label>\n          </div>\n        </form>\n      </div>\n      <div\n        id=\"file-list-display\"\n        class=\"w-full my-4\"\n        v-if=\"uploadableFiles.length > 0\"\n      >\n        <table class=\"w-full my-2 text-sm\">\n          <thead>\n            <tr class=\"bg-white text-left\">\n              <th class=\"p-2 font-light hidden md:block\">#</th>\n              <th class=\"p-2 font-light\">File Name</th>\n              <th class=\"p-2 font-light\">Status</th>\n              <th class=\"p-2 font-light\">Progress</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              class=\"p-2 border-b\"\n              v-for=\"(f, index) in uploadableFiles\"\n              v-bind:key=\"index\"\n            >\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\n              <td>\n                <span v-text=\"f.status\"></span>\n              </td>\n              <td>\n                <progress\n                  id=\"progressBar\"\n                  :value=\"f.completion\"\n                  max=\"100\"\n                  class=\"my-2 w-full\"\n                ></progress>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <div\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\n      id=\"message\"\n      v-if=\"message\"\n    >\n      <span v-text=\"message\"></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'vue-image-browser',\n\n  props: {\n    images: {\n      type: Array,\n      default: () => [],\n    },\n\n    imageProperties: {\n      type: Object,\n    },\n\n    allowUpload: {\n      type: Boolean,\n      default: false,\n    },\n\n    saveUrl: {\n      type: String,\n      default: '/api/photos',\n    },\n\n    saveRequestHeaders: {\n      type: Object,\n      default: () => {},\n    },\n\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n\n    allowDelete: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowPhotoPane: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowChoose: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowCopy: {\n      type: Boolean,\n      default: true,\n    },\n\n    captionable: {\n      type: Boolean,\n      default: false,\n    },\n\n    enableLazyLoad: {\n      type: Boolean,\n      default: true,\n    },\n\n    maxImagesPerRow: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  data: function () {\n    return {\n      message: null,\n      query: '',\n      searchResult: null,\n      pane: 'gallery',\n      selectedPhoto: {},\n      uploadableFiles: [],\n      copyLinkText: 'Copy Link',\n      chooseBtnText: 'Choose',\n    }\n  },\n\n  created() {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  updated: function () {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  computed: {\n    imagesPerRow() {\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\n\n      return (\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\n      )\n    },\n  },\n\n  methods: {\n    select(photo) {\n      this.selectedPhoto = photo\n\n      this.allowPhotoPane && (this.pane = 'photo')\n\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('selected', this.selectedPhoto)\n    },\n\n    choose: function () {\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('chosen', this.selectedPhoto)\n\n      this.pane = 'gallery'\n    },\n\n    copy() {\n      let p = this\n\n      if (navigator.clipboard) {\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\n          p.copyLinkText = 'Link Copied!'\n        })\n      }\n    },\n\n    getCaption() {\n      // remove file name extensions\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\n\n      // remove special characters with space\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\n\n      // uppercase first letter of each word\n      caption = caption\n        .toLowerCase()\n        .split(' ')\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\n        .join(' ')\n\n      return prompt('Enter an caption for this image', caption)\n    },\n\n    uploadFiles: function () {\n      let files = document.getElementById('files').files,\n        p = this\n\n      for (let i = 0; i < files.length; i++) {\n        let upf = {\n          name: files[i].name,\n          formdata: new FormData(),\n          ajax: new XMLHttpRequest(),\n          status: 'Not Started',\n          completion: 0,\n        }\n\n        upf.formdata.append('image', files[i])\n        upf.formdata.append('name', files[i].name)\n\n        upf.ajax.upload.onprogress = function (e) {\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\n          upf.completion = Math.round((e.loaded / e.total) * 100)\n        }\n        upf.ajax.upload.onload = function (e) {\n          upf.status = 'Complete'\n          upf.completion = 100\n        }\n        upf.ajax.upload.onerror = function (e) {\n          upf.status = 'Error uploading the file'\n          upf.completion = 0\n        }\n        // ajax.upload.addEventListener('abort', abortHandler, false);\n\n        upf.ajax.open('POST', p.saveUrl)\n\n        let header_keys = Object.keys(p.saveRequestHeaders)\n        for (let i = 0; i < header_keys.length; i++) {\n          let header = header_keys[i]\n          let val = p.saveRequestHeaders[header]\n          upf.ajax.setRequestHeader(header, val)\n        }\n\n        upf.ajax.onreadystatechange = function () {\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\n            let response = upf.ajax.responseText\n            if (response) {\n              try {\n                let media = JSON.parse(response)\n                p.$emit('saved', media)\n              } catch (e) {\n                alert(e)\n              }\n            }\n          }\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\n            upf.status =\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\n            upf.completion = 0\n          }\n        }\n        upf.ajax.send(upf.formdata)\n        this.uploadableFiles.push(upf)\n      }\n    },\n\n    deleteSelected() {\n      this.$emit('deleted', this.selectedPhoto)\n      this.pane = 'gallery'\n    },\n\n    doDelayedSearch() {\n      let p = this\n\n      if (this.timer) {\n        clearTimeout(this.timer)\n        this.timer = null\n      }\n\n      if (p.query.length > 0) p.searchResult = 'Searching...'\n      else p.searchResult = ''\n\n      this.timer = setTimeout(() => {\n        p.$emit('searched', p.query)\n      }, this.searchDelay)\n    },\n\n    // This is an experimental function that enables\n    // lazy-loading.\n    enableLazyLoading() {\n      let images = document.querySelectorAll('.mg-photo')\n\n      const config = {\n        root: null,\n        rootMargin: '0px 0px 50px 0px',\n      }\n\n      // check if intersection observer is supported via browser\n      if (!('IntersectionObserver' in window)) {\n        // if not, just load all immediately\n        Array.from(images).forEach(function (image) {\n          console.log('IntersectionObserver unsupported loading')\n          if (!image.src) image.src = image.dataset.src\n        })\n      } else {\n        let observer = new IntersectionObserver(function (entries) {\n          entries.forEach((image) => {\n            // Are we in viewport?\n            if (image.isIntersecting) {\n              // console.log('Loading: ' + image.target.dataset.src)\n              // console.log(image.target.src)\n              image.target.src = image.target.dataset.src\n              observer.unobserve(image.target)\n            }\n          })\n        }, config)\n\n        images.forEach((image) => {\n          if (!image.src) {\n            observer.observe(image)\n          }\n        })\n      }\n    },\n  },\n}\n</script>\n\n<style>\n@media only screen and (min-width: 640px) {\n  .thumbnail {\n    height: 300px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 768px) {\n  .thumbnail {\n    height: 250px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1024px) {\n  .thumbnail {\n    height: 200px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .thumbnail {\n    height: 120px;\n    overflow: hidden;\n  }\n}\n\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n</style>\n"]}, media: undefined });
+      inject("data-v-962f8ec2_0", { source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\r\n    height: 300px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\r\n    height: 250px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\r\n    height: 200px;\r\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\r\n    height: 120px;\r\n    overflow: hidden;\n}\n}\n.mg-photo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\n}\r\n", map: {"version":3,"sources":["C:\\laragon\\www\\vue-image-browser\\src\\vue-image-browser.vue"],"names":[],"mappings":";AAwiBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA","file":"vue-image-browser.vue","sourcesContent":["<template>\r\n  <div class=\"w-full\">\r\n    <div\r\n      v-show=\"pane === 'gallery'\"\r\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\r\n      id=\"top-panel\"\r\n    >\r\n      <div class=\"flex-grow flex\">\r\n        <input\r\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\r\n          type=\"text\"\r\n          v-model=\"query\"\r\n          @keyup=\"doDelayedSearch\"\r\n          placeholder=\"search...\"\r\n        />\r\n        <div\r\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\r\n        >\r\n          <span\r\n            v-if=\"searchResult\"\r\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\r\n            v-text=\"searchResult\"\r\n          ></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"flex-none\" v-if=\"allowUpload\">\r\n        <button\r\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\r\n          title=\"Upload Image\"\r\n          @click=\"pane = 'upload'\"\r\n        >\r\n          Add Image\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-show=\"pane === 'gallery'\"\r\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\r\n    >\r\n      <div\r\n        v-for=\"photo in images\"\r\n        :key=\"photo.id\"\r\n        :class=\"imagesPerRow\"\r\n        @click=\"select(photo)\"\r\n      >\r\n        <div\r\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\r\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\r\n        >\r\n          <div class=\"w-full flex items-center justify-center thumbnail\">\r\n            <img\r\n              v-bind:data-src=\"photo.url\"\r\n              :title=\"photo.name\"\r\n              class=\"mg-photo\"\r\n            />\r\n          </div>\r\n          <div\r\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\r\n          >\r\n            <span class=\"truncate\">{{ photo.name }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"pane === 'photo'\"\r\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\r\n    >\r\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          viewBox=\"0 0 20 20\"\r\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\r\n        >\r\n          <polygon\r\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\r\n          />\r\n        </svg>\r\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\r\n      </button>\r\n\r\n      <div class=\"flex items-center justify-between\">\r\n        <button\r\n          @click=\"copy\"\r\n          v-if=\"allowCopy\"\r\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\r\n        >\r\n          {{ copyLinkText }}\r\n        </button>\r\n        <button\r\n          @click=\"choose\"\r\n          v-if=\"allowChoose\"\r\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\r\n        >\r\n          {{ chooseBtnText }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\r\n      <div class=\"w-full postcard\">\r\n        <img\r\n          :src=\"selectedPhoto.url\"\r\n          :title=\"selectedPhoto.name\"\r\n          class=\"mx-auto shadow-lg mg-photo\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\r\n        <table class=\"w-full mt-4 table-auto\">\r\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\r\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\r\n              {{ pk.toUpperCase() }}\r\n            </td>\r\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\r\n          </tr>\r\n        </table>\r\n\r\n        <div class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\">\r\n          <div class=\"flex-none px-3\">\r\n            <button\r\n              @click=\"deleteSelected()\"\r\n              v-if=\"allowDelete\"\r\n              class=\"text-red-500 border px-4 text-sm py-2 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\r\n            >\r\n              Delete\r\n            </button>\r\n          </div>\r\n          <div class=\"flex-grow flex px-3\" v-if=\"allowRename\">\r\n            <input\r\n              class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\r\n              type=\"text\"\r\n              v-model=\"renameQuery\"\r\n            />\r\n            <div class=\"flex relative\">\r\n              <button \r\n                @click=\"renameSelected()\"\r\n                :disabled=\"isRenameDisabled\"\r\n                :class=\"isRenameDisabled ? 'opacity-50 cursor-not-allowed' : ''\"\r\n                class=\"text-blue-500 px-4 text-sm py-1 hover:border hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-r-lg border-r border-t border-b border-gray-300 cursor-pointer\">\r\n                Rename\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      v-if=\"pane === 'upload'\"\r\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\r\n    >\r\n      <div class=\"flex justify-between\">\r\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 20 20\"\r\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\r\n          >\r\n            <polygon\r\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\r\n            />\r\n          </svg>\r\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\r\n            Back to Gallery\r\n          </p>\r\n        </button>\r\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\r\n          <div class=\"w-full flex bg-transparent\">\r\n            <label\r\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\r\n            >\r\n              <svg\r\n                class=\"w-8 h-8 mr-4\"\r\n                fill=\"currentColor\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                viewBox=\"0 0 20 20\"\r\n              >\r\n                <path\r\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\r\n                />\r\n              </svg>\r\n              <p class=\"text-base leading-normal\">\r\n                Upload\r\n                <span class=\"hidden sm:inline\">From Local Computer</span>\r\n              </p>\r\n              <input\r\n                id=\"files\"\r\n                type=\"file\"\r\n                name=\"files\"\r\n                multiple\r\n                class=\"hidden\"\r\n                @change=\"uploadFiles\"\r\n              />\r\n            </label>\r\n          </div>\r\n        </form>\r\n      </div>\r\n      <div\r\n        id=\"file-list-display\"\r\n        class=\"w-full my-4\"\r\n        v-if=\"uploadableFiles.length > 0\"\r\n      >\r\n        <table class=\"w-full my-2 text-sm\">\r\n          <thead>\r\n            <tr class=\"bg-white text-left\">\r\n              <th class=\"p-2 font-light hidden md:block\">#</th>\r\n              <th class=\"p-2 font-light\">File Name</th>\r\n              <th class=\"p-2 font-light\">Status</th>\r\n              <th class=\"p-2 font-light\">Progress</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <tr\r\n              class=\"p-2 border-b\"\r\n              v-for=\"(f, index) in uploadableFiles\"\r\n              v-bind:key=\"index\"\r\n            >\r\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\r\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\r\n              <td>\r\n                <span v-text=\"f.status\"></span>\r\n              </td>\r\n              <td>\r\n                <progress\r\n                  id=\"progressBar\"\r\n                  :value=\"f.completion\"\r\n                  max=\"100\"\r\n                  class=\"my-2 w-full\"\r\n                ></progress>\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\r\n      id=\"message\"\r\n      v-if=\"message\"\r\n    >\r\n      <span v-text=\"message\"></span>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'vue-image-browser',\r\n\r\n  props: {\r\n    images: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n\r\n    imageProperties: {\r\n      type: Object,\r\n    },\r\n\r\n    allowUpload: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    saveUrl: {\r\n      type: String,\r\n      default: '/api/photos',\r\n    },\r\n\r\n    saveRequestHeaders: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n\r\n    searchDelay: {\r\n      type: Number,\r\n      default: 500,\r\n    },\r\n\r\n    allowDelete: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowRename: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowPhotoPane: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowChoose: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    allowCopy: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n\r\n    captionable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n\r\n    enableLazyLoad: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n\r\n    maxImagesPerRow: {\r\n      type: Number,\r\n      default: 5,\r\n    },\r\n  },\r\n\r\n  data: function () {\r\n    return {\r\n      message: null,\r\n      query: '',\r\n      renameQuery: '',\r\n      searchResult: null,\r\n      pane: 'gallery',\r\n      selectedPhoto: {},\r\n      uploadableFiles: [],\r\n      copyLinkText: 'Copy Link',\r\n      chooseBtnText: 'Choose',\r\n    }\r\n  },\r\n\r\n  created() {\r\n    this.$nextTick(function () {\r\n      if (this.enableLazyLoad) {\r\n        this.enableLazyLoading()\r\n      }\r\n    })\r\n  },\r\n\r\n  updated: function () {\r\n    this.$nextTick(function () {\r\n      if (this.enableLazyLoad) {\r\n        this.enableLazyLoading()\r\n      }\r\n    })\r\n  },\r\n\r\n  computed: {\r\n    imagesPerRow() {\r\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\r\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\r\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\r\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\r\n\r\n      return (\r\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\r\n      )\r\n    },\r\n\r\n    isRenameDisabled() {\r\n      return this.selectedPhoto.name === this.renameQuery\r\n    },\r\n  },\r\n\r\n  methods: {\r\n    select(photo) {\r\n      this.selectedPhoto = photo\r\n\r\n      this.renameQuery = photo.name\r\n\r\n      this.allowPhotoPane && (this.pane = 'photo')\r\n\r\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\r\n\r\n      this.$emit('selected', this.selectedPhoto)\r\n    },\r\n\r\n    choose: function () {\r\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\r\n\r\n      this.$emit('chosen', this.selectedPhoto)\r\n\r\n      this.pane = 'gallery'\r\n    },\r\n\r\n    copy() {\r\n      let p = this\r\n\r\n      if (navigator.clipboard) {\r\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\r\n          p.copyLinkText = 'Link Copied!'\r\n        })\r\n      }\r\n    },\r\n\r\n    getCaption() {\r\n      // remove file name extensions\r\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\r\n\r\n      // remove special characters with space\r\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\r\n\r\n      // uppercase first letter of each word\r\n      caption = caption\r\n        .toLowerCase()\r\n        .split(' ')\r\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\r\n        .join(' ')\r\n\r\n      return prompt('Enter an caption for this image', caption)\r\n    },\r\n\r\n    uploadFiles: function () {\r\n      let files = document.getElementById('files').files,\r\n        p = this\r\n\r\n      for (let i = 0; i < files.length; i++) {\r\n        let upf = {\r\n          name: files[i].name,\r\n          formdata: new FormData(),\r\n          ajax: new XMLHttpRequest(),\r\n          status: 'Not Started',\r\n          completion: 0,\r\n        }\r\n\r\n        upf.formdata.append('image', files[i])\r\n        upf.formdata.append('name', files[i].name)\r\n\r\n        upf.ajax.upload.onprogress = function (e) {\r\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\r\n          upf.completion = Math.round((e.loaded / e.total) * 100)\r\n        }\r\n        upf.ajax.upload.onload = function (e) {\r\n          upf.status = 'Complete'\r\n          upf.completion = 100\r\n        }\r\n        upf.ajax.upload.onerror = function (e) {\r\n          upf.status = 'Error uploading the file'\r\n          upf.completion = 0\r\n        }\r\n        // ajax.upload.addEventListener('abort', abortHandler, false);\r\n\r\n        upf.ajax.open('POST', p.saveUrl)\r\n\r\n        let header_keys = Object.keys(p.saveRequestHeaders)\r\n        for (let i = 0; i < header_keys.length; i++) {\r\n          let header = header_keys[i]\r\n          let val = p.saveRequestHeaders[header]\r\n          upf.ajax.setRequestHeader(header, val)\r\n        }\r\n\r\n        upf.ajax.onreadystatechange = function () {\r\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\r\n            let response = upf.ajax.responseText\r\n            if (response) {\r\n              try {\r\n                let media = JSON.parse(response)\r\n                p.$emit('saved', media)\r\n              } catch (e) {\r\n                alert(e)\r\n              }\r\n            }\r\n          }\r\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\r\n            upf.status =\r\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\r\n            upf.completion = 0\r\n          }\r\n        }\r\n        upf.ajax.send(upf.formdata)\r\n        this.uploadableFiles.push(upf)\r\n      }\r\n    },\r\n\r\n    deleteSelected() {\r\n      this.$emit('deleted', this.selectedPhoto)\r\n      this.pane = 'gallery'\r\n    },\r\n\r\n    renameSelected() {\r\n      if (this.renameQuery.length <= 0)\r\n        return;\r\n\r\n      this.$emit('renamed', this.selectedPhoto, this.renameQuery)\r\n    },\r\n\r\n    doDelayedSearch() {\r\n      let p = this\r\n\r\n      if (this.timer) {\r\n        clearTimeout(this.timer)\r\n        this.timer = null\r\n      }\r\n\r\n      if (p.query.length > 0) p.searchResult = 'Searching...'\r\n      else p.searchResult = ''\r\n\r\n      this.timer = setTimeout(() => {\r\n        p.$emit('searched', p.query)\r\n      }, this.searchDelay)\r\n    },\r\n\r\n    // This is an experimental function that enables\r\n    // lazy-loading.\r\n    enableLazyLoading() {\r\n      let images = document.querySelectorAll('.mg-photo')\r\n\r\n      const config = {\r\n        root: null,\r\n        rootMargin: '0px 0px 50px 0px',\r\n      }\r\n\r\n      // check if intersection observer is supported via browser\r\n      if (!('IntersectionObserver' in window)) {\r\n        // if not, just load all immediately\r\n        Array.from(images).forEach(function (image) {\r\n          console.log('IntersectionObserver unsupported loading')\r\n          if (!image.src) image.src = image.dataset.src\r\n        })\r\n      } else {\r\n        let observer = new IntersectionObserver(function (entries) {\r\n          entries.forEach((image) => {\r\n            // Are we in viewport?\r\n            if (image.isIntersecting) {\r\n              // console.log('Loading: ' + image.target.dataset.src)\r\n              // console.log(image.target.src)\r\n              image.target.src = image.target.dataset.src\r\n              observer.unobserve(image.target)\r\n            }\r\n          })\r\n        }, config)\r\n\r\n        images.forEach((image) => {\r\n          if (!image.src) {\r\n            observer.observe(image)\r\n          }\r\n        })\r\n      }\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style>\r\n@media only screen and (min-width: 640px) {\r\n  .thumbnail {\r\n    height: 300px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 768px) {\r\n  .thumbnail {\r\n    height: 250px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 1024px) {\r\n  .thumbnail {\r\n    height: 200px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n@media only screen and (min-width: 1280px) {\r\n  .thumbnail {\r\n    height: 120px;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n.mg-photo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n</style>\r\n"]}, media: undefined });
 
     };
     /* scoped */
diff --git a/package-lock.json b/package-lock.json
index c83982b..1f57945 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@akashmitra/vue-image-browser",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 594511d..47ba175 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@akashmitra/vue-image-browser",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A VueJS Image Browser Component with options to upload, browse, delete and select images",
   "main": "/dist/vue-image-browser.umd.js",
   "module": "dist/vue-image-browser.esm.js",
diff --git a/src/vue-image-browser.vue b/src/vue-image-browser.vue
index 3fede8a..25b1df4 100644
--- a/src/vue-image-browser.vue
+++ b/src/vue-image-browser.vue
@@ -118,13 +118,34 @@
           </tr>
         </table>
 
-        <button
-          @click="deleteSelected()"
-          v-if="allowDelete"
-          class="text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer"
-        >
-          Delete
-        </button>
+        <div class="w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap">
+          <div class="flex-none px-3">
+            <button
+              @click="deleteSelected()"
+              v-if="allowDelete"
+              class="text-red-500 border px-4 text-sm py-2 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer"
+            >
+              Delete
+            </button>
+          </div>
+          <div class="flex-grow flex px-3" v-if="allowRename">
+            <input
+              class="p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none"
+              type="text"
+              v-model="renameQuery"
+            />
+            <div class="flex relative">
+              <button 
+                @click="renameSelected()"
+                :disabled="isRenameDisabled"
+                :class="isRenameDisabled ? 'opacity-50 cursor-not-allowed' : ''"
+                class="text-blue-500 px-4 text-sm py-1 hover:border hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-r-lg border-r border-t border-b border-gray-300 cursor-pointer">
+                Rename
+              </button>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>
 
@@ -266,6 +287,11 @@ export default {
       default: false,
     },
 
+    allowRename: {
+      type: Boolean,
+      default: false,
+    },
+
     allowPhotoPane: {
       type: Boolean,
       default: false,
@@ -301,6 +327,7 @@ export default {
     return {
       message: null,
       query: '',
+      renameQuery: '',
       searchResult: null,
       pane: 'gallery',
       selectedPhoto: {},
@@ -337,12 +364,18 @@ export default {
         'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
       )
     },
+
+    isRenameDisabled() {
+      return this.selectedPhoto.name === this.renameQuery
+    },
   },
 
   methods: {
     select(photo) {
       this.selectedPhoto = photo
 
+      this.renameQuery = photo.name
+
       this.allowPhotoPane && (this.pane = 'photo')
 
       this.captionable && (this.selectedPhoto['caption'] = this.getCaption())
@@ -452,6 +485,13 @@ export default {
       this.pane = 'gallery'
     },
 
+    renameSelected() {
+      if (this.renameQuery.length <= 0)
+        return;
+
+      this.$emit('renamed', this.selectedPhoto, this.renameQuery)
+    },
+
     doDelayedSearch() {
       let p = this