I'm building a small Angular application, in which the user should be able to view a collection of locally saved videos and save the collection in order to rewatch these videos at a later point in time. The paths of the videos are saved in a JSON-File, which means I only have access to the string of a path like this:
C:\My Videos\UploadedVideo.mp4
Passing this path to the src of a video-HTML-element doesn't allow me to play it though. I've seen workarounds where a input-element is used and the file is passed to the video-element, but this doesn't work in my case as I have the file path and don't want the user to reselect the videos over and over again.
You're not able to use your system path in browser.
You have two options:
Add your videos to your Assets folder in Angular
Put video online (eg: create Bucket on Amazon S3 for this kind of files and access it via the bucket link).
Related
I've built an online photo tagging tool that has a low-res mirror of what is on my local laptop. I'd like to find an easy way to display the high-res version of a given image from my local file system.
Currently I have to get the image name from the web tool, paste it into Lightroom's search system and view that way. I'd like to be able to pull up the high res version, either in the browser or another local app, with a single click.
Options I've investigated:
HTML5 File API/FileReader()/fetch()
These cause even more friction than going to Lightroom, as the user has to select files via the OS file selector and the image directory structure is complex.
Configure local web server to host disk-based images
I've looked at hosting the local image directory with a simple web service, but would need to configure HTTPS to prevent cross-zone violations, and that's more client-side config than I'd prefer.
Any solution that would allow me to reference a local file path directly would work, but modern browsers have (rightly) eliminated most direct paths to local file access.
I'm wondering if there is a way to ask an app on the client side to open the file, in the way that browsers will prompt you for permission to open Zoom and join a meeting, or open a link in the client OS app store. If I could find some way to tell Lightroom to open the specific image without having to copy/paste file names, etc.
I have an application which is build in react and electron. It is used to capture images and videos from webcam.
Now I want to add a functionality to store those images and videos into the folder or into local db of chrome and also I want to reload those images and video when application restart.
How can I achieve this task ?
I have images and video as in variables in frontend so I can do the localdb stuff but how can I achieve file based storage?
how you can do is, you can store photos or videos on a local storage folder like app data and then just access it using the path. you can store videos in app data as app.getPath('').it's simple as that. let me know if you haven't done yet
I am able to use the HTML5 Download attribute to specify a file for download to the user's declared downloads folder, but what I would like to do is allow for users to create a "portal" that specifies a directory that future files can be downloaded to.
The wording is confusing so I'll use an example:
User will be using the site to exchange source code with a coworker. However, whenever the using downloads his coworker's source code, it always defaults to his Browser designated "downloads" folder. Is it possible to have the User be able to specify on the website that he wants it downloaded to a specific directory? Namely, his workspace for whatever project he is collaborating on.
Hopefully, this is descriptive enough. I really can't find any tools for this online.
Its not possible as the download location is controller by the browser.
If you want to know more give the page a read Download A File At Different Location Using HTML5
I have created a webapp using JSP,Html and Javascript which currently runs on my localhost using apache webserver. I want to display the files and folders and of a directory in local computer. I also want to create a download link or view link of those so that when anyone click on it it will be viewed in new tab or become downloadable as it happens in any ftp server. I know similar type of question has
been asked but none of them worked for me.
To create the download link I used
Download
this does not work as it is not in my webapp path and download attribute also does not work in internet explorer.
I'm not sure why you are exposing your local drive contents on the web but here's an option:
On the page that should display the files, in java code, list all
folders and files then for each file/folder show a link to some page
(for example "navigateLocalDrive" that sends the path of the clicked
file/folder like this:
Download
Now in that jsp, check if the GET variable is a path for a file or a directory,
if its a file, just send it back in the response, if its a
directory, list all files/folders and do the same as in step 1
Please note:
How I encoded the file path in the href in order to work properly.
The Access permissions for the webserver should allow write/read to that path (I'm already doing it on my Tomcat server on local host with the default setup no change needed)
For your reference, here are some helpers for this task:
How to list contents of a server directory using JSP?
Downloading file from JSP/Java
I am not sure if this is possible. In general the access rights are limited to the src and webContent Folder (for your html coding mentioned above for sure) . This is also reasonable, because you do not want to access or change data on your Computer in general, because after local development you want to deploy your web application to a server.
To make a test copy some file to the webContent and you will be able to download it. Within your Java coding you can use some IO package like java.io.File to navigate over folders and files. However keep in mind, that you will get some exceptions like
java.io.FileNotFoundException: C:\WeatherExports\export.txt (Access is denied)
if you want to access files outside the server.
I am building a meteor app, that allows user to upload images. The images upload are stored in "/tmp/images/" directory in my local system.
How can I display the images from the above directory.
So far, I have seen displaying images only from "public" directory in meteor. But if I start adding images uploaded by the user in "public", then everytime the user uploads the image, the server will get refreshed.
So I would basically want to display images from "/tmp/images/" rather.
Any idea?
You should also look at CollectionFS. This will let you use different storage adapters as your needs evolve without changing your code. It's a very well done and robust package.
I would advise you to store your images using gridFS:
you will be able to store files bigger than 16Mb.
the files will not "touch" your server, they are directly piped into your database.
you can handle them afterwards like a collection, so you can allow/deny access to it as you see fit.
The only place designed in meteor to store static assets is the public folder. You shouldn't try to put these elsewhere.
If you want to give a try to gridFS, you can use the file-collection package. It is quick and easy to setup.
Alternatively, as advised by #Marius Darila, you can use Nginx to serve static content
As answered by #Michel Floyd, you can also use collectionFS, but, to quote the file-collection package author:
Here's the difference in a nutshell: collectionFS is a Ferrari, and
file-collection is a Fiat.
They do approximately the same thing using some of the same
technologies, but reflect different design priorities. file-collection
is much simpler and somewhat less flexible; but if it meets your needs
you'll find it has a lot fewer moving parts and may be significantly
more efficient to work with and use.
There is no other way to fetch images from another directories outside the project folder. That is the reason Meteor has built "public" directory for us. The path "/" itself indicates the beginning of project folder. Well if you are storing images in locations like amazon s3, then simply hitting the url in the tag fetch the image.
So the bottom line is either u put ur images in public folder or store images in some outside location which can be fetched by simply hitting the image url.
And don't worry about refresh, it does not happen so in production mode. This only happens in development mode.