Laravel Livewire image upload verification on edit form problem - php

I have a product page with an image upload form built with Livewire. when i revisit the page to update information, the page will only submit if I also pass through a new image even if I update other fields. I want it to keep the current uploaded image if the image form isn't touched, allow me to update other fields without a new image upload, and upload and replace the image url when that section is updated.
I have tried all sorts of validator modifiers - nullable, sometimes, and a few if statements and i can't seem to figure it out.
Here is my upload function in my Livewire Component:
public function updateProductVariant($id)
{
$productVariant = ProductVariant::find($id);
$validated = $this->validate([
'img_url'=>'sometimes|image',
'available_end_date'=>'required',
'available_start_date'=>'required',
'notes'=>'required',
]);
$img_url = $productVariant->img_url;
if($validated['img_url'] != "")
{
$name = $productVariant->id . '.' . $validated['img_url']->extension();
$this->img_url->storeAs('public', $name);
$img_url = "/storage/$name";
}
$categories = ['Dough', 'Merch' , 'Packaging' , 'Supplies' , 'Kits' ,
'Featured' , 'Upcoming' , 'Clearance'];
foreach($categories as $category) {
if($this->$category) {
ProductCategory::updateOrCreate(['category_name'=>$category , 'product_variant_id'=>$id],[]);
} else {
ProductCategory::where('category_name' , $category)->where('product_variant_id' , $id)->delete();
}
}
ProductVariant::updateorCreate(
['id' => $id],
[
'img_url' => $img_url,
'available_end_date' => $validated['available_end_date'],
'available_start_date' => $validated['available_start_date'],
'notes' => $validated['notes'],
]);
session()->flash('message', 'Product successfully updated');
$this->resetFields();
$this->emit('gotoTop');
return redirect("corporate/cookies");
}
And my relevant blade section:
<!--/form-group-->
<div class="mb-3">
<input class="form-control form-control-lg" type="file" id="img_url" name="img_url" wire:model="img_url">
<br>
#if($img_url && !is_string($img_url))
<div style="text-align: center;"> <img src="{{$img_url->temporaryUrl()}}" alt="" class="img-fluid rounded-3" style="max-width: 50%;"></div>
#endif
<div style="text-align: center;"> <img src="{{ $img_url }}" alt="" class="img-fluid rounded-3" style="max-width: 50%;"></div>
</div>
<!--/extra-->
<br>
<div class="d-grid mb-">
<button type="submit" class="btn btn-lg btn-block btn-primary" wire:click.prevent="updateProductVariant({{$item_id}})">Update</button>
</div>

Related

How to edit image in Laravel 5.7?

I inserted the image in my database, now I am trying to edit the images and the edited image should be deleted from my folder and a new image should be updated there. Could you please help me where I am mistaking?
Here is my Controller.php file
public function edit($slider)
{
$property=Property::all();
$slider = Slider::find($slider);
$data = ['property'=>$property, 'slider'=>$slider];
return view('admin.slider.edit', $data);
}
public function update(Request $r, $id)
{
$slider=Slider::find($id);
if( $r->hasFile('slider_thumb')){
$thums = $r->slider_thumb;
$slider_thumb = uniqid($chr).'.'.$thums->getClientOriginalExtension();
$img = Image::make($thums->getRealPath());
$img->resize(204, 107, function ($constraint) {
$constraint->aspectRatio();
});
$thumbPath = public_path().'/slider_img/'.$slider_thumb;
if (file_exists($thumbPath)) {
$this->removeImage($thumbPath);
}
$img->save($thumbPath);
$optimizerChain = OptimizerChainFactory::create();
$optimizerChain->optimize($thumbPath);
$slider_thumbimg = $slider_thumb;
}else{
$slider_thumb = NULL;
}
$slider->property_id = $r->property_id;
$slider->slider_image=$slider_imageimg;
$slider->save();
return redirect('/admin/slider');
}
}
here is my HTML file
<form class="form-horizontal" method="POST" action="{{ route('slider.update',['id'=>$slider->id]) }}" enctype="multipart/form-data">
#csrf
#method('PUT')
#if($slider->slider_image == NULL or $slider->slider_image == '')
<img src="{{asset('images/no-image-found.jpg')}}" style="width: 100px; height: 100px;">
#else
<img src="{{ asset('slider_img/'.$slider->slider_image) }}" style="width: 100px; height: 80px;">
#endif
<input type="file" name="slider_image" value="{{ $slider->slider_image }}">
<div class="form-group">
<div class="col-sm-12 text-right">
<button type="submit" class="btn btn-info">
<i class="fa fa-check"></i> Save
</button>
</div>
</div>
</form>
You did not use Laravel standards. you need to refer to laravel filesystem document to upload file. then you need to check request file exist. if request has new file; you should remove old file and upload new file. in else you should not remove old file.
follow below code:
public function store(PostRequest $request,string $slug = null)
{
$postData = $request->all();
//upload and set thumbnail of post, if exist
if($request->file("thumbnail")){
$image = new Images();
$thumbnailName = $image->uploadFile($request,"thumbnail",config("upload_image_path.post-thumbnail"));
$postData["thumbnail"] = $thumbnailName;
}
$post = $this->postService->save($postData,$slug);

Image is not displaying although saving in DB and folder Laravel

Image is not displaying however it is saving in db and folder.
I could not get it where is the problem
apperance.blade.php
<div id="bgimage" class="hovercover text-center">
<img class="img-responsive" src="img/{{$image->image ?? ''}}" style="margin-top: {{$image->position ?? ''}}">
<div class="hover-div">
<form id="hoverform" action="{{url('/employee-appearance')}}" enctype="multipart/form-data" method="post">
{{ csrf_field() }}
<label class="custom-file-upload" title="Change Cover Image" for="file-upload"> <i class="fa fa-file-image-o"></i> Change Cover </label>
<input id="file-upload" name="file" type="file">
</form>
</div>
</div>
<div id="adjimage" class="hovercover1 text-center" style="display: none;">
</div>
imageProcessController
public function upload()
{
$image=DB::table('images')->latest('image','position')->first();
return view('user.employeeforms.appearance',compact('image')) ;
}
public function postupload(Request $request)
{
$file = $request->file('file');
$rules = array('file' => 'required|mimes:png,gif,jpeg,jpg');
$validator = Validator::make(array('file'=> $file), $rules);
if($validator->passes()) {
$image = $file->move( 'img', sprintf('%s-%s.%s', time(), "abc", explode('/', $file->getMimeType())[1]));
$img = new Image;
$img->image = $image->getFilename();
$img->save();
}
}
There may be possibilities that it could be.
But the most likely one is that the symlink has not been set yet!?
php artisan storage:link
If you have already set it, look in the storage/app order where the files are. If they are under storage/app/img then you have to change the link like this:
<img src="img/{{$image->image ?? ''}}"
should be:
<img src="{{ asset('storage/img/' . $image->image ?? "placeholder.jpg" ) }}">

Laravel how to upload an image to a database and show it in view

So i was making a form that consists of three field, the title, thumbnail, and textarea(with texteditor) and it seems that it upload the image just fine since i notice that there is images that i had uploaded in my /public/image folder after i submit the form, but when i check the database the thumbnail field showed not the name of the file in the /public/image folder like 20190713125534.jpg but
C:\xampp\tmp\phpC18A.tmp
im confused i thought it doesn't upload the image at all, but as i explained earlier it does, so my question is how do i change the value of thumbnail field with the filename and how do i show the image in my view ?
this is my Blogcontroller.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Blog;
use Validator,Redirect,Response,File;
class BlogController extends Controller
{
public function index()
{
$blogs = Blog::get();
return view('post.post_textarea',[
'blogs' => $blogs
]);
}
public function store(Request $request)
{
Blog::create([
'name' => $request->name,
'message' => $request->message,
'thumbnail' => $request->thumbnail,
]);
if ($files = $request->file('thumbnail')) {
$destinationPath = 'public/image/'; // upload path
$profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
$files->move($destinationPath, $profileImage);
$insert['thumbnail'] = "$profileImage";
}
return redirect()->back();
}
public function getFullPost($blog_id) {
$blogs = Blog::where('id', '=', $blog_id)->get();
return view('post.read')->with(compact('blogs'));
}
}
this is my view for the form
<form enctype="multipart/form-data" method="POST">
{{csrf_field()}}
<div class="form-group">
<h4 style="color: black;" >Judul</h4>
<br>
<input type="text" class="form-control" name="name">
</div>
<div class="form-group">
<h4 style="color: black;" >Thumbnail</h4>
<br>
<input type="file" name="thumbnail">
</div>
<div class="form-group">
<h4 style="color: black;" >Isi</h4>
<br>
<textarea class="form-control" name="message" id="" rows="10"></textarea>
</div>
<div class="form-group">
<button class="pull-right site-btn" type="submit" >Upload<img src="../public/asset/img/icons/double-arrow.png" alt="#"/></button>
</div>
</form>
and this is my view to display the data from database
#foreach ($blogs as $blog)
<div class="blog-item">
<div class="blog-thumb">
<img src="asset/img/blog/1.jpg" alt=""> ->this is where i was supposed to fetch the image
</div>
<div class="blog-text text-box text-white">
<div class="top-meta">{{ Carbon\Carbon::parse($blog->created_at)->format('d-m-Y') }} / di Rakitan</div>
<h3>{{ $blog->name }}</h3>
<p>{!! \Illuminate\Support\Str::words($blog->message, 30, '...') !!}</p>
Lanjutkan Baca <img src="asset/img/icons/double-arrow.png" alt="#"/>
</div>
</div>
#endforeach
try to add this in controller
$blog = new Blog;
$blog->name = $request->name;
$blog->message = $request->message;
if($request->hasFile('thumbnail')) {
$file = Input::file('thumbnail');
//getting timestamp
$timestamp = str_replace([' ', ':'], '-', Carbon::now()->toDateTimeString());
$name = $timestamp. '-' .$file->getClientOriginalName();
$file->move(public_path().'/images/', $name);
$blog->thumbnail = url('/images/' . $name);
}
$blog->save();
return back();
than in your view
#foreach ($blogs as $blog)
<div class="blog-item">
<div class="blog-thumb">
<img src="{{ $blog->thumbnail }}" alt=""> ->this is where i was supposed to fetch the image
</div>
<div class="blog-text text-box text-white">
<div class="top-meta">{{ Carbon\Carbon::parse($blog->created_at)->format('d-m-Y') }} / di Rakitan</div>
<h3>{{ $blog->name }}</h3>
<p>{!! \Illuminate\Support\Str::words($blog->message, 30, '...') !!}</p>
Lanjutkan Baca <img src="asset/img/icons/double-arrow.png" alt="#"/>
</div>
</div>
#endforeach
The problem with your code, I think in your store function, you did not save it correctly. Please see my code below to save link of your thumbnail into db.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Blog;
class BlogController extends Controller{
//some your function goes here
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$blog = new Blog;
$blog->name = $request->input('name');
$blog->message = $request->input('message');
$file = $request->file('your_thumbnail');
//make sure yo have image folder inside your public
$destination_path = 'image/';
$profileImage = date("Ymd").".".$file->getClientOriginalName();
$file->move($destination_path, $profileImage);
//save the link of thumbnail into myslq database
$blog->thumbnail = $destination_path . $profileImage;
$blog->save();
return redirect()->back();
}
}

How to display a new image right away after successfully uploaded?

I implemented a logo upload system. It would take effect right away. It require me to refresh the page to see the effect. I'm wondering how do I stop that.
IMG
<img id="userLogo" src="/images/account/operator/logo.png" alt="" class="thumbnail img-responsive">
Form
{!! Form::open(array('url' => '/profile/logo/update', 'class' => 'form-horizontal', 'role' =>'form','id' => 'editLogo','files'=>true)) !!}
<input name="logo_path" type="file"> <br><br>
<button class="btn btn-success btn-sm mr5" type="file"><i class="fa fa-user"></i> Update Logo</button>
{{ csrf_field() }}
{!! Form::close();!!}
Controller
public function updateLogo(){
$inputs = Input::all();
$logo_path = array('logo_path' => Input::file('logo_path'));
$rule = ['logo_path' => 'max:100|mimes:jpeg,bmp,png'];
$id = Auth::user()->account_id;
$type = Auth::user()->account_type;
$validator = Validator::make($logo_path, $rule );
if ( $validator->fails()) {
return Redirect::to('/profile/')->withErrors($validator)->withInput();
} else {
$old_logo_path = public_path().'/images/account/operator/logo.png';
$delete = File::delete($old_logo_path);
if (Input::hasFile('logo_path'))
{
$file = Input::file('logo_path');
$destinationPath = public_path().'/images/account/operator/';
$uploadSuccess = $file->move($destinationPath, 'logo.png');
}
return Redirect::to('/profile/')
->with('success','Your company logo was updated succesfully!');
}
}
Result
My file got saved to the place I want them to be.
But when the old logo is still showing on the page
unless, I refresh the page, then, I'll see my new one.
Any hints / suggestions on this will be much appreciated !
This is because the image is cached in browser, and since you are updating an image with same name browser shows the already cached image. hence the better and effective solution is to have a unique file name every time you upload an image or you can append a querystring to the image path every time you serve an image.
<img id="userLogo" src="/images/account/operator/logo.png?q=<?php echo microtime(); ?>" alt="" class="thumbnail img-responsive">

How do I delete and update a photo in Laravel 4?

In my application, a user can upload an image for their profile photo. How do I update a users photo and the delete the previously uploaded photo? This is what I have so far in the upload controller:
Photos Model
class Photos extends Eloquent {
protected $table = 'photos';
protected $fillable = array('user_id', 'location');
public function user (){
return $this->belongsTo('User');
}
}
user model
public function photos()
{
return $this->hasOne('photos');
}
Upload Controller
class UploadController extends \BaseController {
public function postUpload (){
$id = Auth::user()->id;
$input = Input::all();
$rules = array(
'photo' => 'required|image|max:500'
);
$validator = Validator::make($input, $rules);
if($validator->fails()){
return Redirect::to('user/profile/'.$id.'/edit')->withErrors($validator);
}
$extension = Input::file('photo')->getClientOriginalExtension();
$directory = public_path('/var/chroot/home/content/59/11581559/html/beta') . '/uploads/'.sha1($id);
$filename = sha1($id.time()).".{$extension}";
$upload_success = Input::file('photo')->move($directory, $filename);
Image::make(Input::file('photo')->getRealPath())->resize(300, 200)->save('foo.jpg');
if($upload_success){
$photo = new Photos(array(
'location' => URL::to('/uploads/'.sha1($id).'/'.$filename)
));
$photo->user_id = $id;
$photo->save();
Session::flash('success_photo', 'You have Successfully uploaded your profile photo!');
return Redirect::to('user/profile/'.$id.'/edit');
}
else{
Session::flash('status_error', 'An Error has occurred while uploading your photo. Please try again!');
}
return Redirect::to('user/profile/'.$id.'/edit');
}
}
View
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">
#if(Session::has('status_error'))
<div class="alert alert-error">
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>
{{ implode('', $errors->all('<li class="error"><b>:status_error</b></li>')) }}
</div>
#endif
<span class="glyphicon glyphicon-exclamation-sign"></span> Upload a Photo
</div>
<div class="panel-body text-center">
#if($user->photos)
<img width="190" height="119" class="img-responsive img-thumbnail" src="{{$user->photos->location }}" alt="">
#endif
<div class="clearfix"></div>
<div class="btn-group mtop-20">
<button type="button" class="btn btn-primary" onclick="$('#upload_modal').modal({backdrop:'static'});">
<span class="glyphicon glyphicon-upload"></span>
</button>
</div>
</div>
<?php echo View::make('modals.photo-upload') ?>
</div><!-- end panel-default -->
</div><!-- col 3-->
Let's talk about what you're doing and work from there.
Uploading a Photo
- In your controller, you're uploading a photo.
- If the upload succeeds, you're storing the location of the photo on your server as well as the ID of the user to whom the photo belongs.
Updating a Photo
- In your controller, you're uploading a photo.
- If the upload succeeds, you're going to:
Get the location of the current file in the database.
$this->photo->where('user_id' , '=' , $the_user_id_in_question)
->get(array('location'));
Delete the file at that location using the delete() function in the FileSystem class (found here: https://github.com/laravel/framework/blob/master/src/Illuminate/Filesystem/Filesystem.php)
Update the user's photo location with the new one:
$this->photo->where('user_id' , '=' , $the_user_id_in_question)
->update('location' => $the_new_upload_location);
I hope that's what you're looking for. Cheers!

Categories