How to bind folder path in to vuetify v-text-box? - javascript

How do I set or bind a folder path into a v-text-box filed? I don't want to select all the files inside the directory I only needed the folder path.
I tried this
<input type="file" webkitdirectory directory multiple>
but this is selecting all the files from the directory not returning the directory path?
Please help with this.

That's not what the webkitdirectory/directory attributes are for; they will load all the files inside that folder. Either way, there's no way to adchieve what you want cause browsers JS have no access to the File System.

Related

Upload a empty folder with js or jquery

hello there I am building a folder upload system with js and PHP
but I got an issue I'm not able to upload a folder that not contains any files
I use
<input type="file" id="picker" name="files" webkitdirectory multiple>
and for getting the file i use
$('input[type="file"]').on("change", function (e) {
let files = $(this).get(0).files;
console.log(files);
});
if a folder contains any file so I can easily access the folder using
files[i].webkitRelativePath
what is the problem
I'm just getting files that contain webkitRelativePath not getting the folders directly
so I'm not able to get any empty subfolders with this approach
can anyone tell me how to access folders directly without webkitRelativePath or anything else so I can handle empty subfolders

What's the proper location to store images in VueJS - public folder or assets folder?

I have been using Vue for a while now, and I noticed that I can store project images in either the assets folder or the public folder.
To access images from assets folder in Vue, one would do :src="require('#/assets/images/myimage.jpg')"
To access images from public folder in Vue, one would do :src="./static/images/myimage.jpg"
What's the proper location to store Vue project images?
What's the implication of using either?
How do they affect my project?
Based on the official vue documentation everything that is within the assets folder will be handled by Webpack while everything in the public folder is simply copied but doesn't go through Webpack: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
So if you want to take advantage of Webpacks optimization features during build (which you most certainly want) put them in assets.
I also put all my img's in the assets folder and only have the pwa related images and icons within the public folder.
All Stuff in the public folder gets straight up copied to your /dist usually. ex: favicon.ico ends up on your /dist folder with the name... favicon.ico.
The assets folder is usually where you would put your images/videos/fonts/svgs etc that you will import within vue files. These files end up on your /dist folder as a file with a hash name: (ex: 5j2i35j2o251hia.png).
Any assets from the /assets folder that you do not explicitly import will not end up in your /dist folder, as to not bloat your final file size.
Hope this helps..
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Different between both would be relative (eventually as require('image')) vs absolute paths. Usually absolute path will not be passed via webpack during the build. And if you optimize images of absolute path, nothing will happen.

change absolute path to relative using gulp

In my gulp workflow I have a task that uses npm browser-sync module to serve static files. One of the options of this module is able to set a base directory to let me call js/css/img files etc, and include it using an absolute path like this:
<img src="/imgs/label.png">
this feature let me call this file from any subdirectory I want
/public
---/imgs
------label.png
---/catalog
------list.html <--- here
---index.html <--- and here, this image called using the same path /imgs/label.png
this works fine. Otherwise, I have a task that builds the final compressed and minified version of static files. The problem is, that when gulp building a dist folder with that files that located in the public folder, in html files, there's still absolute path in attributes like href/src. I need to convert the absolute path into relative with keeping a folder structure. I mean that in index.html src has to be imgs/label.png, and in catalog/list.html the same src attribute has to be ../imgs/label.png. Question: is there any module that able to do this for me, or maybe there's some another way to do that, instead of replacing the paths with own hands? Any advice would be appreciated.

AngularJS - How to list the filenames from a given folder?

I have this folder/directory 'x' in the public folder of my application.
Now I have path name till the folder i.e., /path/to/dir/x , but I don't know the names of the files in this directory. Now I need to provide URL links to the files in the html a tag's href attribute.
How do I list the name of the files in this directory?
Angular is a client side library. Getting files from file directories is a backend capability.

How do I get App_Themes location in a html file using javascript

I am looking for a solution in javascript, where I can get the location to App_themes\Theme folder which contains theme files in asp.net. For example why this isn't so easy is because
when the virtual directory has been mapped directly to domain name then it would be domainname\App_Themes\themename\default.css but if virtual directory has been mapped to something else then how will I differentiate between the name and it could also be directory name?
If your app is in the same virtual directory as the theme file, then you can just use relative path.
If your app is in a different virtual directory, then no way to auto change the path when the virtual directory changed.

Categories