I have few images in my storage folder(laravel), I want to view them in my React data table. Apparently it only displays the path name of the image.
First you have create symbolic link
php aritsan storage:link
this will create shortcut storage folder in public folder
so you can access url
https:://urdomain/storage/filename
Here i assume your images of files exist in storage/app/public.If your files contain in any subfolder then it should be
https:://urdomain/storage/subfoldername/filename.extension
ref:https://laravel.com/docs/8.x/filesystem#the-public-disk
Also in reactjs if you are getting json response like this
{
"id": 23532,
"name": "john",
"image": "images/image.jpeg",
},
then you might need to append baseurl
<img src="https:://urdomain/storage/{image}" alt='image' width='100%'/>
Also you refer this answer :
Image not showing from Django rest api in Reactjs
Related
What I want to do is let a user save an image and when they're accessing their accounts I want the image to display.
What I'm currently doing is I'm saving the images in public folder
Store the path to the database
Path: css\img\myPic.jpg
Display the image
<img class="border" src='esc($empInfo['img'])' style="height: 200px; width: 200px">
But since this is a public folder I can't save personal pictures in this folder
I also tried saving the path to writable\uploads\myPic.jpg but no luck
If you look for a manual or a concept , you can also try this:
You must have some folder where you store all personal images
When user needs it, copy the file into Public folder with a random generated 32 character name (GUID type) but with the original extension.
Then feed it to the user in the view.
Once displayed after the view is called you can delete the image from that folder.
As of the the moment. the solution that I got is "copying" the file(in my case it is an image file)from writable/uploads to public using Publish Library.
$publisher = new Publisher(WRITEPATH . 'uploads', FCPATH. 'img/');
$publisher->addPaths([
'img/myPic.jpg',
]);
$publisher->copy(true); // `true` to enable overwrite
Source Path: WRITEPATH . 'uploads'
Destination Path: FCPATH. 'img/'
Source File: img/myPic.jpg
Now you can ref the image in img tags.
Next step should be replacing/deleting the image after use, because this is not gonna be different when you upload the image at public folder. Will try to update if I found a solution
Source: https://codeigniter.com/user_guide/libraries/publisher.html
PS. Feel free to correct me :) I am also new to web developing in general
Part2: I added this to my function. what it does is after copying the image to the public folder I then rename to 'myPic.jpg'. this will solve my previous problem "replacing/deleting the image after use".
$renameFile = rename(FCPATH. 'img/'.$fileName, FCPATH . 'img/'. 'myPic.jpg');
if($renameFile){
return true;
}
else{
return false;
}
I have a problem, when I click to go to the /analytics page on my site, adblockers block the analytics.json file that's being requested by Next.js as they think it's an analytics tracker (it's not, it's a page listing analytics products).
Is there a way to rename the route files Next.js uses when navigating to server-side rendered pages on the client-side?
I want to either obfuscate the names so they're not machine readable, or have a way to rename them all.
Any help appreciated.
With thanks to #gaston-flores I've managed to get something working.
In my instance /analytics is a dynamic page for a category, so I moved my pages/[category]/index.tsx file to pages/[category]/category.tsx and added the following rewrite:
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: "/:category",
destination: "/:category/category",
},
];
},
};
This now gets the category.json file rather than analytics.json, which passes the adblockers checks and renders as expected.
Note that due to having a dynamic file name in the pages/[category] directory (pages/[category]/[product].tsx), I had to move that to pages/[category]/product/[product].tsx as I was seeing the /analytics page redirected to /analytics/category for some reason without this tweak.
I am currently making an app that generates Itineraries and I am able to convert the html to pdf using PDFjs using something like this:
var doc = new jsPDF();
doc.fromHTML(html);
doc.save("YourItinerary.pdf");
How should I proceed about making a shareable link to this pdf on client-side preferably using an API such as Google Drive?
Getting the shareable link would be to get the webViewLink which you can try by passing webViewLink as parameter in the 'fields' property in Files.get. This returns a link you can open in any browser. However, you also have to deal with permissions.
To make the webViewLink (your shareable link) work for anyone you can use in Permissions.create:
{
"role": "writer",
"type": "anyone",
}
To make the webViewLink available to certain users only you'll have a request body like:
{
"role": "writer",
"type": "user",
"emailAddress": "someuser#gmail.com"
}
I'm thinking about using DreamFactory as API. I'm fresh in serversice-logic. I want to store an image on the filesystem and the path of the stored file into a database. I won't store the image as blob inside the database, because their will be many other images following. Can anybody please point me into the right direction?
First post the image to the filesystem using:
post /files/{file_path}
And after that:
post /mysql/_table/{table_name} createRecords() - Create one or more records
But how to pass the path to the database?
One way would be to use server-side scripting (V8Js in this case) on the POST to /files/{file_path}. Go to the Admin application, Scripts tab, and work your way through the events to the following path...
Process Event Scripts > files > files.{file_path} > [POST] files.{file_path} > files.{file_path}.post.post_process
Try the following script...
// event.resource is the {file_path} part,
// including any folders from root, i.e. my/path/file.txt
var_dump(event.resource);
// Create a record that you want to post to a table,
// using the "todo" table for example, setting "name" to the file path
// "mysql" is my db service name
var record = {"resource": [ {"name": event.resource, "complete": false } ] };
var result = platform.api.post('mysql/_table/todo', record);
var_dump(result);
// result contains a resource array with the id of the record created
// like {"resource": [ {"id": 5} ] }
This should be fairly simple though it is completely stumping me.
I have a backend Laravel installation running on localhost:8000
I have a front end Angular app running on localhost:9001.
I have some 'static' images I have included in my seed data (eg.
'1', 'user.png'), these images are being rendered perfectly in my front end (they are also served from the exact place my image uploads are going).
The URL I am currently serving images from is http://localhost:8000/images/{filename}
I can upload images from the front to the back end and they appear in the DB and the image is being put in the filesystem, I'm populating the correct URL in my front end (as evidenced by the previous URL).
My uploaded images are not being shown.
In my logs I am getting:
[2015-01-20 18:13:49] local.ERROR: NotFoundHttpException Route: http://localhost:8000/images/j249ae747ce28c317e02f1fb6d0a10c3.jpg [] []
[2015-01-20 18:13:49] local.ERROR: exception 'Symfony\Component\HttpKernel\Exception\NotFoundHttpException'
I tried a method in my routes file, but couldnt see why, when I am already serving some images already?
I have also set all permissions to 755 on my /images folder.
Any ideas?
I'm not sure I follow every bit of multi-system interaction you have going on, but I'd drop back to first HTTP principles.
Try accessing the image URL directly.
http://localhost:8000/images/j249ae747ce28c317e02f1fb6d0a10c3.jpg
If the error in your browser (or your logs, if you're not developing with debug set to true) is
local.ERROR: NotFoundHttpException Route: http://localhost:8000/images/j249ae747ce28c317e02f1fb6d0a10c3.jpg
This means your web server couldn't find a file at images/j249ae747ce28c317e02f1fb6d0a10c3.jpg, and handed the request to Laravel. This means you need to figure out why your webserver can't see the file.
Assuming you're serving index.php from the public folder
Do you have a public/images/j249ae747ce28c317e02f1fb6d0a10c3.jpg file?
Are you sure? Copy and paste the path into terminal and to a ls public/images/j249ae747ce28c317e02f1fb6d0a10c3.jpg to make sure your brain isn't missing some subtle case issue
Are any errors showing up in your web server's logs (not Laravel's)
Can you create a text/html file in the images folder and serve it? If not, then you may not be pointing your web server at the folder you think you are.
Something like
http://localhost:8000/images/test.txt
http://localhost:8000/images/test.html
Some first principles debugging like that should point you in the right direction.
rm public/storage
php artisan optimize:clear
php artisan storage:link
This worked for me.
The problem is you haven't generated a url for your uploaded image
Try accessing your url like this
http://localhost:8000/storage/images/j249ae747ce28c317e02f1fb6d0a10c3.jpg
To generate the above url
Add this method \Storage::disk('public')->url(); method in your controller.This method accesses the public disk array which is found in Config\filesystems.php and it generates a url in the following format
http://localhost:8000/storage/images/j249ae747ce28c317e02f1fb6d0a10c3.jpg
For example the method below stores the image in the image folder and generates the url of the image path.
public function uploadImage(Request $request)
{
$request->validate(['image'=>'file|image|max:5000']);
$imageProfile = new ImageProfile();
if($request->hasFile('image') && $request->file('image')->isValid())
{
$image = $request->file('image')->store('images');
$imageProfile->image_profile_url = \Storage::disk('public')->url($image);
$imageProfile->save()
}
return response()->json($imageProfile,200);
}
The code returns a Json response below
{
"id": 13,
"image_profile_url ": "http://127.0.0.1:8000/storage/images/cxlogqdI8aodERsmw74nmEx7BkxkWrnyJLMH7sFj.jpeg",
"updated_at": "2020-01-13 16:27:37",
"created_at": "2020-01-13 16:27:37",
}
Try to copy the url and test it in postman.
Visit the link to learn more about Laravel file storage
Laravel File Storage
Hope it helps.
laravel 8
Controler function
public function store(Request $request)
{
$this->validate($request, [
'site_title' => 'required',
'logo_image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$input['logo_image'] = time().'.'.$request->logo_image->getClientOriginalExtension();
$request->logo_image->move(public_path('images'), $input['logo_image']);
$input['site_title'] = $request->site_title;
//dd($input);
Site_settings::create($input);
return back()->with('success','Image Uploaded successfully.');
}
blade view
<td>
<img src="{{ url('/images/').'/'.$site_settings->logo_image ?? '' }}" alt="" width="250px" height="auto">
</td>