Getting absolute path from webkitdirectory element - javascript

I am busy building a small gallery that is pulled from my local file system. I have an element that gets the directory:
<input type="file" webkitdirectory>
I then display all the images and videos in that directory on the page in a container.
At the moment for security reasons I only have access to the relative path so I had to add a hardcoded e:/downloads for it to find the files when I display them because the location of the file is on my desktop.
I want to extend this so I can choose a directory from anywhere on my local file system, but I need the aboslute path. Currently only IE gets me the absolute path, chrome returns a fakepath. I know how to get to the settings to allow local file system files to be included in IE, but I don't know how to enable it in Chrome. I would like to know if there is an option to allow this like in IE.
I have done searches around and most people say it is not possible, however I believe there must be a setting somewhere, I am hoping someone knows.
Here is my code just for kicks if you want to have a look:
https://jsfiddle.net/3mp1znx9/
Please note because it is hardcoded to e:/downloads you might want to change it to make it work for you.
You can open up the console and run the function called GetDirectory if you want to see the absolute path it tries to return. (you should also comment out the removal of the element after it has changed as well)
I hope my question was clear and not too long. Thank you.
Summary:
I want to access the absolute path of my local files from the element within Chrome. I can already do it in IE.

I finally found a solution to my own problem. It is nearly impossible to get the absolute path with Chrome, it only works with Internet Explorer.
So the solution is to use the temporary path.
URL.createObjectURL(e.target.files[0])
This is what was needed, I then use this as the src. I hope this will help someone else when they stumble upon this one day.

Related

How does the loading of an image with "?random=" attached work?

So, I wanted to avoid the cache to see images I'm uploading to this website I'm working on, which I access through localhost.
I hit a handy solution pretty quick:
Attaching to the end of image's path ?random= and a random number generated by Math.floor(). All this with the help of a script.
The HTML showed in the browser:
<img class="gallery_img" src="./uploads/4.jpg?random=172">
Awesome, it works beautifully.
Now, the thing that has been hard to find is an explanation of why and how this actually works.
I mean, 1) how the browser still finds the image in the server with this new path?
Or asked the other way around, 2) how the server handles this ?random=172 attachment and delivers the image asked before that?
If somebody could point me to the right direction I would be grateful.
Solution:
Have a look on what are query parameters.
And if you are dealing with the problem of avoiding the cache, have a look here:
Disable cache for some images
That is not part of the path, that is a query parameter.
And most of the times the server of images does not care about query parameters, at least not a literally random one, maybe it would support a query parameter called width or size and dynamically generate an image of the correct size. But random is most likely simply discarded and the image is served normally.

atom.io : Open Files via Clickable Links within Javascript Comments

Is there way, in Atom, to open files that are mentioned in comments?
When I edit a code file, there are often other code files of interest that I may want to also open while working on that file. Sometimes these reference files are miles away and require numerous steps of navigation to open them via the left-pane tree structure.
I was thinking, it would be nice if I could put relative file paths into javascript comments in a manner that atom would understand that if I click that path it should open that file in a new tab.
I suspect this isn't an original idea, so I'm hoping someone can direct me to a solution that enables this type of functionality or make me aware of how it is already enabled but I must use some syntax I'm not currently using.
I found open-project-file and it seems like a nice fit.
Update: I tested it and it works great! You just click on the relative path (whether it is located in code or comment) and by hitting ctrl-shift-o it immediately opens the file in a new tab within the atom editor.

changes in css and js in server, does not apply on website

I have changed some codes of css and js in server and used these commands:
kill -HUP <pid>
and also:
killall -HUP gunicorn
but changes didn't appear on website. I have deleted all caches on my browser
how should I apply changes in website?
First of all, try to open in a private window and clear cache. Then try to refresh with Shift+F5 which will ignore cached content.
If that doesn't work, I would suggest to use something like Inspect in Chrome and clicking on a console to show up any errors that could happen which couldn't render your changes.
HTML, CSS and JS are interpreted by your browser so you don't need to restart anything except deploying app.
If you have cleared all cache and still can't find the change on the Website, then there is a possibility that you may be referencing a different CSS.
Here is what to do.
1.Remove the CSS and JS files completely and see if the Website still loads fine, If it does then you know there is another CSS file somewhere.
2.Try making other changes on the CSS Document to see if it reflects,If it does reflect, then you know something is interfering with the changes, making it not appear on the website.
I solved the issue by using Filezilla on ubuntu. it let me to see what directories are in website, navigate through them more efficient and change codes

Issue displaying local image files via css class and/or img src attribute

I have some issues rising up displaying Image files from local filesystem.
And to say it before: yes i am aware of the security breach this is causing and there is no other way playing it different because my company has no file Server yet to serve these images in a proper way.
With that out of the way the scenario:
I have an angular app which should show me some Images on my page. I wrote a directive called Gallery to do so.
Into this gallery I am handing in the absolute paths to my Image files and just set the src attribute via javascript. I tested it with some random chosen files picked from Google and everything worked out well. Allthough my browser is throwing out error because of security the picutres were displayed.
But when i got the real data from my company collegue Things started getting nasty. The error still thrown in console but nothing was displayed. I checked first overwriting the img.onload listener finding out that the testimages are giving me the Output i put onto the listener, my real data images didn't.
Next I tried to set the background attribute and not the src one. My test images were displayed the real data ONLY if it is placed into the assets folder of my app. This got me quite confused because like mentioned above using my test images it doesn't matter where they are placed, they are displayed everytime.
I also tried changing file format from png to jpg but nothing happens.
Also scaling down the images (real data has big px solutions) didn't work either.
So my question is simple ...what am i doing wrong? Could it be possible that those real data images are not exported properly. But if that's the case, why do they work in the assets folder? Like mentioned security block is not possible because my test pictures a doing well.
Finally I found the bug which was responsible for the behaviour ... It was no wrong linking it was the IIS Express which was caching old links. #mrunion and #cloned links to filesystem are still working on IE and also in Edge just for devs which have no other choice then to do it that way
Cheers Max

jQuery 1.7.1 slider not working except on homepage

I have tried to place the slider on every page on this website: http://atripathi.com
It works on the homepage, but doesn't work on any of the other pages (About, Services, etc.)
I know it's probably an easy fix, but I can't get it at the moment.
Thank you for any help or suggestions!
Looks like the original suggestion above is correct. I'm seeing slider javascript includes at the top of your homepage that aren't on the other pages.
Generally, a good way of troubleshooting is to make copies of both pages, index-c.php and about-c.php perhaps, and start removing everything that isn't pertinent to the trouble you're having (other HTML, css includes, etc.) until you get down to only the slider on the page. Once you've done that, you might notice that the one page is slightly different than the other, making it work. You can copy back and forth until it does.
The other possibility is that there's a relative path problem somewhere, because your one page is inside a folder (though I'm guessing you have a .htaccess redirect to a root folder page)? So if all else fails, move the reduced about-c.php to the root folder and see if that then works. If so, you know it's a path problem.
Hope these suggestions help.
I see that jQuery is being included on all your pages but the cycle plugin is only included on the home page. You should be able to update your template(s) to fix this.

Categories

Resources