Merge pull request #2 from py-package/dev

Dev
py-package · Oct 8, 2022 · e16b1f9 · e16b1f9
2 parents 9764ead + c50fe47
commit e16b1f9
Showing 14 changed files with 496 additions and 29 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022, John Doe
+Copyright (c) 2022, Yubaraj Shrestha
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
diff --git a/README.md b/README.md
@@ -1,17 +1,17 @@
 # filemanager
 
 <p align="center">
-    <img src="https://banners.beyondco.de/filemanager.png?theme=light&packageManager=pip+install&packageName=masonite-filemanager&pattern=topography&style=style_1&description=File management solution for Masonite&md=1&showWatermark=1&fontSize=100px&images=https%3A%2F%2Fgblobscdn.gitbook.com%2Fspaces%2F-L9uc-9XAlqhXkBwrLMA%2Favatar.png">
+<img src="https://banners.beyondco.de/Masonite%20Filemanager.png?theme=light&packageManager=pip+install&packageName=masonite-filemanager&pattern=charlieBrown&style=style_2&description=File+management+solution+for+Masonite&md=1&showWatermark=1&fontSize=100px&images=adjustments&widths=50&heights=50">
 </p>
 
 <p align="center">
 
-  <img alt="GitHub Workflow Status" src="https://github.com/yubarajshrestha/masonite-filemanager/actions/workflows/python-package.yml/badge.svg">
+  <img alt="GitHub Workflow Status" src="https://github.com/py-package/masonite-filemanager/actions/workflows/python-package.yml/badge.svg">
   <img alt="PyPI" src="https://img.shields.io/pypi/v/masonite-filemanager">
   <img src="https://img.shields.io/badge/python-3.7+-blue.svg" alt="Python Version">
-  <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/yubarajshrestha/masonite-filemanager">
-  <img alt="License" src="https://img.shields.io/github/license/yubarajshrestha/masonite-filemanager">
-  <a href="https://github.com/yubarajshrestha/masonite-filemanager/stargazers"><img alt="star" src="https://img.shields.io/github/stars/yubarajshrestha/masonite-filemanager" /></a>
+  <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/py-package/masonite-filemanager">
+  <img alt="License" src="https://img.shields.io/github/license/py-package/masonite-filemanager">
+  <a href="https://github.com/py-package/masonite-filemanager/stargazers"><img alt="star" src="https://img.shields.io/github/stars/py-package/masonite-filemanager" /></a>
   <a href="https://github.com/psf/black"><img alt="Code style: black" src="https://img.shields.io/badge/code%20style-black-000000.svg"></a>
 </p>
 
@@ -25,13 +25,14 @@ A simple yet powerful file management solution for your masonite application.
 - [x] Upload Files
 - [x] Preview Files
 - [x] Rename Files/Folders
-- [x] Delete Files
+- [x] Delete Files/Folders
 - [x] Download Files
 - [ ] Move Files
 - [ ] Protect Routes
 - [ ] FileManager FormField
 - [ ] Image Editing
 - [ ] Third Party Driver Support (S3, DigitalOcean Space, etc)
+- [x] File Picker (Form)
 
 ## Installation
 
@@ -82,13 +83,30 @@ Once finishing configurations, you can access the file manager by using the foll
 
 `http://localhost:8000/filemanager`
 
-## Contributing
-
-Please read the [Contributing Documentation](CONTRIBUTING.md) here.
-
-## Maintainers
-
-- [Yubaraj Shrestha](https://www.github.com/yubarajshrestha)
+If you want to use file picker then all you have to do is include then follow the following guidelines:
+
+1. Add style in the header of your base template:
+   ```html
+   <link href="/filemanager-assets/picker.css" rel="stylesheet" />
+   ```
+2. Add script before the `</body>` tag of your base template:
+   ```html
+   <script src="/filemanager-assets/picker.js"></script>
+   ```
+3. Finally, in your form you can use selector in your form in the following way:
+   ```html
+   <div class="file-picker">
+     <input type="hidden" name="j-sukai" />
+   </div>
+   ```
+   or, if you want file-preview:
+   ```html
+   <div class="file-picker has-preview">
+     <input type="hidden" name="j-sukai" />
+   </div>
+   ```
+
+The design of the file-picker is very basic so you might want to customize with your own design by modifying the stylesheet which resides in `storage/vendor/filemanager` directory.
 
 ## License
 

diff --git a/setup.py b/setup.py
@@ -8,7 +8,7 @@
     # Versions should comply with PEP440.  For a discussion on single-sourcing
     # the version across setup.py and the project code, see
     # https://packaging.python.org/en/latest/single_source_version.html
-    version="0.0.3",
+    version="0.0.4",
     packages=[
         "filemanager",
         "filemanager.config",
@@ -25,10 +25,10 @@
     long_description=long_description,
     long_description_content_type="text/markdown",
     # The project's main homepage.
-    url="https://github.com/yubarajshrestha/masonite-filemanager",
+    url="https://github.com/py-package/masonite-filemanager",
     # Author details
     author="Yubaraj Shrestha",
-    author_email="companion.krish@outlook.com",
+    author_email="yubaraj@pypackage.com",
     # Choose your license
     license="MIT license",
     # If your package should include things you specify in your MANIFEST.in file

diff --git a/src/filemanager/controllers/filemanager_controller.py b/src/filemanager/controllers/filemanager_controller.py
@@ -83,13 +83,17 @@ def delete_file(self):
             self.manager.provider().delete_file(path)
             return self.response.json(
                 {
-                    "message": "Folder deleted...",
+                    "message": "File deleted...",
                 }
             )
         except Exception as e:
             print(e)
+
         return self.response.json(
             {
-                "message": "Folder doesn't exists!",
+                "message": "File doesn't exists!",
             }
         )
+
+    def picker(self, view: View):
+        return view.render("filemanager:picker", {})
diff --git a/src/filemanager/drivers/local_driver.py b/src/filemanager/drivers/local_driver.py
@@ -82,6 +82,17 @@ def delete_folder(self, path) -> bool:
             print(e)
         return False
 
+    def delete_file(self, path) -> bool:
+        """Delete a file in the filemanager directory"""
+
+        try:
+            if os.path.exists(path):
+                os.unlink(path)
+                return True
+        except Exception as e:
+            print(e)
+        return False
+
     def all_files(self):
         data = {
             "folders": [],

diff --git a/src/filemanager/resources/picker.css b/src/filemanager/resources/picker.css
@@ -0,0 +1,34 @@
+.file-picker {
+    min-width: 32px;
+    padding: 8px;
+    border: 1px dotted black;
+    border-radius: 4px;
+    position: relative;
+    min-height: 16px;
+}
+
+.file-picker .preview {
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    position: absolute;
+}
+
+.file-picker .close {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    z-index: 2;
+    background: white;
+    padding: 0;
+    margin: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    justify-content: center;
+    line-height: 0.9;
+    border-radius: 100%;
+    cursor: pointer;
+}
diff --git a/src/filemanager/resources/picker.js b/src/filemanager/resources/picker.js
@@ -0,0 +1,61 @@
+(() => {
+    let index = 0;
+    const FilePickers = document.querySelectorAll(".file-picker");
+
+    window.fmanager = function (element, callback) {
+        if (!element) return;
+        window.open('/filemanager/picker', 'File Picker',
+            'height=400,width=1200,toolbar=no,directories=no,status=no, linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
+
+        if (!window.SetUrl) {
+            window.SetUrl = function (url) {
+                callback(url, element);
+            }
+        }
+    }
+
+    const SelectorTemplate = `
+        <span class="picker">
+          Select File
+        </span>
+      `;
+
+    const PreviewTemplate = `
+        <span class="preview">
+          <img src="IMAGE_URL">
+        </span>
+        <span class="close">x</span>
+      `;
+
+    const SetPreview = (file) => {
+        if (FilePickers[index].classList.contains('has-preview')) {
+            const close = FilePickers[index].querySelector('.close')
+            if (close) close.remove()
+            const preview = FilePickers[index].querySelector('.preview')
+            if (preview) preview.remove()
+            const PreviewElement = PreviewTemplate.replace("IMAGE_URL", file)
+            FilePickers[index].insertAdjacentHTML("beforeend", PreviewElement);
+        }
+    }
+
+    const PickFile = () => {
+        fmanager(FilePickers[index], function (file, target) {
+            FilePickers[index].querySelector('input').value = file;
+            SetPreview(file);
+        });
+    }
+
+    FilePickers.forEach(function (fp, i) {
+        fp.insertAdjacentHTML("beforeend", SelectorTemplate)
+        fp.addEventListener('click', function (e) {
+            index = i;
+            if (e.target.classList.contains('close')) {
+                FilePickers[index].querySelector('.close').remove()
+                FilePickers[index].querySelector('.preview').remove()
+                FilePickers[index].querySelector('input').value = '';
+            } else {
+                PickFile(FilePickers[index])
+            }
+        })
+    })
+})();
diff --git a/src/filemanager/routes/route.py b/src/filemanager/routes/route.py
@@ -12,5 +12,6 @@
         Route.post("/filemanager/create-folder", FileManagerController.create_folder),
         Route.post("/filemanager/delete-folder", FileManagerController.delete_folder),
         Route.post("/filemanager/delete-file", FileManagerController.delete_file),
+        Route.get("/filemanager/picker", FileManagerController.picker),
     ]
 )