I have 2 folders utalk and server, in my server folder I have a public folder in src folder to save images, that users upload. But I don't know how to get image src from that public folder to display in frontend.(public folder not actually contains image but mp3 instead)
There is not a lot of context provided. From what i gather, if the folder is public, the resources should be directly accessible. Something like http://backend/image/file.mp3.
Also i would recommend using any static file hosting solution for hosting the content file (mp3 in your case). Serving all that content from your http server is a call for performance bottlenecks.
Do add some more context if you are looking for a more specific solution
Related
I have a React app where I need to upload files (pdf files for example), and store them under distinctive folders,
What I need to know, is if there is a way to download or get download link for an entire folder X,
I tried with firebase, but it only offers to get link of a single file at a time, not full folder, does S3, or something else have this option?
Thanks.
I have an array of video paths that I want to play in REACT.
The issue is that the videos are outside of the public dir.
Any ideas on how to make this work?
If your link is a web URL, then you can use tag with href attribute to link your video on the web.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
Ok, so I guess the problem boils down to the following statement -
"You want to serve a few videos saved in a particular directory of your server so that your react application can play them".
Well, in that case, it is somehow like you want to make these videos publically available, so why don't you just move them to a public dir, or make the directory they are in a public one, you can use any web server like nginx to do that. see the following link Use nginx to serve static files from subdirectories of a given directory.
Please note that this solution will make your videos public. If you want only authenticated users to access your video, you should consider making a video streaming api on your server see this link for how to do this in nodejs https://dev.to/abdisalan_js/how-to-code-a-video-streaming-server-using-nodejs-2o0
I am trying to clean up project structure by moving 'Page' directory form root location to some internal folder's like client or frontend etc. Is there way to do it? and can I move css and images folder as well?
As far as the pages directory is concerned, it's not configurable yet but it has been discussed so the feature might be available some time in the future: https://github.com/zeit/next.js/pull/936
Images are usually best kept in the static folder, eg. /static/img/favicon.png, if you move your images somewhere you'll lose Next.js feature of automatically setting up static files serving under /static/*.
Regarding CSS however, you're free to move these files under any folder you want because you have to import them in your code yourself: https://github.com/zeit/next-plugins/tree/master/packages/next-css
I'm trying to retrieve a picture from my file system after a good storage,(instead of putting it in the database I copy it to the disc and i put the path to the db)
I had store the picture to c:\images\ folder and supposing that the name the complete path is c:\images\mypic.jpg
when I try to retrieve it a set the img src attribute to <img src="c:\images\mypic.jps"> by using some java code
in the browser console I found this error Not allowed to load local resource: file:///C://images//mypic.jpg
Question: how to fix these path problem ? where Should I store the pictures ? and from where should I retrieve them ?
sending tag <img src="c:\images\mypic.jpg"> would cause user browser to access image from his filesystem.
if you have to store images in folder located in c:\images i would suggest to create an servlet like images.jsp, that as a parameter takes name of a file, then sets servlet response content to an image/jpg and then loads bytes of image from server location and put it to a response.
But what you use to create your application? is it pure servlet? Spring? JSF?
Here you can find some info about, how to do it.
In Chrome, you are supposed to be able to allow this capability with a runtime flag --allow-file-access-from-files
However, it looks like there is a problem with current versions of Chrome (37, 38) where this doesn't work unless you also pass the runtime flag --disable-web-security
That's an unacceptable solution, except perhaps as a short-term workaround, but it has been identified as an issue:
https://code.google.com/p/chromium/issues/detail?id=379206
You have Two alternatives :
First one is to create a ServletImageLoader that would take as a parameter an identifier of your image (the path of the image or a hash) that you will use inside the Servlet to handle your image, and it will print to the response stream the loaded image from the server.
Second one is to create a folder inside your application's ROOT folder and just save the relative path to your images.
Many browsers have changed their security policies to no longer allow reading data directly from file shares or even local resources. You need to either place the files somewhere that your tomcat instance can serve them up and put a "regular" http url in the html you generate. This can be accomplished by either providing a servlet which reads and provides the file putting the file into a directory where tomcat will serve it up as "static" content.
The concept of http location and disk location is different. What you need to do is:
for uploaded file summer.jpg
move that under a known (to the application) location to disk, e.g c:\images\summer.jpg
insert into db record representing the image with text summer.jpg
to display it use plain <img src="images/summer.jpg" />
you need something (e.g apache) that will serve c:\images\ under your application's /images. If you cannot do this then in step #2 you need to save somewhere under your web root, e.g c:\my-applications\demo-app\build\images
This error means you can not directly load data from file system because there are security issues behind this. The only solution that I know is create a web service to serve load files.
Here is a simple expressjs solution if you just want to run this app locally and security is not a concern:
On your server.js or app.js file, add the following:
app.use('/local-files', express.static('/'));
That will serve your ENTIRE root directory under /local-files. Needless to say this is a really bad idea if you're planning to deploy this app anywhere other than your local machine.
Now, you can simply do:
<img src="/local-files/images/mypic.jps"/>
note: I'm running macOS. If you're using Windows you may have to search and remove 'C:\' from the path string
Do not use ABSOLUTE PATH to refer to the name of the image for example: C:/xamp/www/Archivos/images/templatemo_image_02_opt_20160401-1244.jpg. You must use the reference to its location within webserver. For example using ../../Archivos/images/templatemo_image_02_opt_20160401-1244.jpg depending on where your process is running.
I am currently saving uploaded images at /cakephp/uploads/ instead of doing it inside /cakephp/app/webroot/imgs/.
When i try to access the image by URL, with something like this:
http://myweb.com/cakephp/uploads/imageName.jpg
It shows a 404 error. I guess, due to the .htaccess, or more concretely, to the web.config file that i use under windows with ISS7.
Is there any way to access to them without modifying the web.config file?
Thanks.
it is my understanding that anything not placed in the webroot folder cannot be accessed directly via a url. To access files outside of the webroot, you can use Media Views.
I'd just put your uploads folder inside your APP folder, http://myweb.com/cakephp/app/uploads
then just adjust path to path => APP . 'uploads' . DS
It's not clear why you want to do this; if you want to just access the images like normal, place the uploads in to your img directory.
Typically you'd use this approach for serving files etc, allowing user authentication and so on.