I'm using dynamic input generate function through that I try to upload multiple images upload I got code from the internet and I modified according to my requirement images uploading is working when I the name into the table that time only I'm getting issues.
I can't understand how to do that. Please help how to do that.
I attached my codes, UI, table screenshot.
Inserting Code
$Colorimages=array();
if($files=$request->file('Colorimages'))
{
foreach($files as $file)
{
$extension = $file->getClientOriginalExtension();
$filename = date('YmdHis').rand(1,9999).'.'.$extension;
$file->move(public_path("product_images/sub_images"), $filename);
$Colorimages[]=$filename;
}
}
if(count($request->prol_product_line_code)>0)
{
foreach ($request->prol_product_line_code as $prol=>$v)
{
$data2=array
(
'prol_product_code' => $request->prod_product_code,
'prol_product_line_code' => $request->prol_product_line_code[$prol],
'prol_printed' => $request->prod_printed,
'prol_color' => $request->prol_color[$prol],
'prol_image1' => $Colorimages[$prol],
'prol_image2' => $Colorimages[$prol],
'prol_image3' => $Colorimages[$prol],
);
product_line::insert($data2);
}
}
This is the way to upload multiple images in laravel.
Step 1: Create Routes(routes/web.php)
Route::get('image-view','ImageController#index');
Route::post('image-view','ImageController#store');
Step 2: Create ImageController File(app/Http/Controllers/appController.php)
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
public function index()
{
return view('image-view');
}
public function store(Request $request)
{
$imageName = request()->file->getClientOriginalName();
request()->file->move(public_path('upload'), $imageName);
return response()->json(['uploaded' => '/upload/'.$imageName]);
}
}
Step 3: Create Blade File(resources/views/index.blade.php)
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-12 col-11 main-section">
<h1 class="text-center text-danger">File Input Example</h1><br>
{!! csrf_field() !!}
<div class="form-group">
<div class="file-loading">
<input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: "/image-view",
uploadExtraData: function() {
return {
_token: $("input[name='_token']").val(),
};
},
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize:2000,
maxFilesNum: 10,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
Related
I am doing an Instagram clone project and I have encountered a tricky problem because, there is no error really, but the app is not functioning like its supposed to. Basically, I have added a functionality to instagram web application, where the user can add a post. Once the user uploads the image and caption, the create post page is supposed to redirect back to their profile. Which it does, perfectly. But the problem is, the uploaded posts are not displaying on the profile. Here is how my index.blade looks like
<div class="d-flex">
<div style="padding-right: 25px;"><strong>153</strong> posts</div>
<div style="padding-right: 25px;"><strong>2M</strong> followers</div>
<div style="padding-right: 25px;"><strong>300</strong> following</div>
</div>
<div><strong>{{$user->profile->title}}</strong></div>
<div>{{$user->profile->description}}</div>
<div>{{$user->profile->url}}</div>
</div>
<div class="row pt-5">
#foreach($user->posts as $post)
<div class="col-4>
<img src="storage/{{ $post->image }}" class="w-100">
</div>
#endforeach
</div>
</div>
My PostsController
class PostsController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function create()
{
return view('posts.create');
}
public function store(Request $request)
{
$data = $request->validate([
//'another =>'', Tells laravel to ignore all other fields
'caption'=>'required',
'image'=> 'required' ,
]);
if($request->hasfile('image'))
{
$data = $request->file('image');
$extension = $data->getClientOriginalExtension();
$filename = time().'.'.$extension;
$data->storeAs('uploads/public/', $filename);
}
$data = Auth::user()->posts()->create([
'caption'=>$request->caption,
'image'=>$request->image,
]);
$data = Auth::id();
return redirect()->route('Profile.show', [$data]);
//goes ahead and grabs the authenticated user
}
}
My routes
Route::get('/p/create', [App\Http\Controllers\PostsController::class, 'create'])->name('posts.create');
Route::post('/p', [App\Http\Controllers\PostsController::class, 'store']);
Route::get('/Profile/{user}', [App\Http\Controllers\ProfilesController::class, 'index'])->name('Profile.show');
I am trying to upload a image along with its details. but i can get the all details but only the image is not displaying in the browser. i used php laravel for backend api. The images are located in the Storage/app/apiDocs folder in backend laravel. the i write displayBooks function the get all the books in laravel. But in front end only image is not displaying. Here is a screenshot of output.
screenshot of inspect elements.
DisplayBooks.vue
<template>
<div class="bookdisplay-section">
<div class="book" v-for="book in books" :key="book.id">
<div class="image-section">
<div class="image-container">
<img v-bind:src="book.file" />
</div>
</div>
<div class="name-section">
{{book.name}}
</div>
<div class="author-section">
by {{book.author}}
</div>
<div class="price-section">
Rs. {{book.price}}<label>(2000)</label>
<button v-if="flag" type="submit" #click="handleSubmit();Togglebutton();">close</button>
</div>
<div class="rating">
<p>4.5<i class="fas fa-star"></i></p>
</div>
<div class="quantity">
<p>(20)</p>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default{
name: 'DisplayBooks',
data(){
return{
flag: true,
books: [{
id: 1,
file: 'display image',
name: 'Dont make me Think',
author : 'Joseph',
price : '1500',
},]
}
},
methods:{
Togglebutton(){
this.flag = !this.flag;
},
async handleSubmit(){
service.userDisplayBooks().then(response => {
this.books.push(...response.data);
})
},
}
}
</script>
<style lang="scss" scoped>
#import "#/Styles/DisplayBooks.scss";
</style>
FileController.php
<?php
namespace App\Http\Controllers;
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
// use Illuminate\Http\Request;
use App\Http\Resources\Books as BooksResource;
use App\Models\Books;
use App\Models\User;
use Illuminate\Contracts\Filesystem\Filesystem;
use League\Flysystem\AwsS3v3\AwsS3Adapter;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
class FileController extends Controller
{
public function displayBooks()
{
$books=Books::all();
return User::find($books->user_id=auth()->id())->books;
}
function upload(Request $request){
$book = new Books();
$book->price=$request->input('price');
$book->name=$request->input('name');
$book->quantity=$request->input('quantity');
$book->author=$request->input('author');
$book->description=$request->input('description');
$book->file=$request->file('file')->store('apiDocs');
$book->user_id = auth()->id();
$book->save();
return ["result"=>$book];
// return [$book];
}
public function updateBook(Request $request, $id)
{
$book = Books::find($id);
if($book->user_id==auth()->id()){
dd($request->all());
$book->price=$request->input('price');
$book->name=$request->input('name');
$book->quantity=$request->input('quantity');
$book->author=$request->input('author');
$book->description=$request->input('description');
// $book->file=$request->file('file')->store('apiDocs');
$book->save();
return[$book];
}
else
{
return response()->json([
'error' => ' Book is not available with this id'], 404);
}
}
Images will only be visible if the visibility of the file is set to public. The best practice here is to upload the image to the Public disk (https://laravel.com/docs/8.x/filesystem#the-public-disk). Make sure to create the symoblic link using php artisan storage:link.
This means you should change your upload function as well, to something like:
$request->file('file')->store('fileName', 'public');
In case this project will be made publicly available, consider adding Request validation to the store/update functions.
In Laravel 7, I am have a task management app. I can upload tasks (posts if it were a blog) and images. I have a multiple image upload working as expected. When it comes time to delete a task, the task deletes just fine but the images are left in the database and in the disk which is public into a folder called task-images. Being new to Laravel, I am struggling on how to go about this. I tried to change the settings in the filesystem.php (which I will post with the commented out code) but that didn't change the location as I had expected. In the end, I want to be able to delete the multiple images when I delete a post and also click delete on an individual image and delete that from both db and disk. I am using resource controller for all my task routes. I have no idea how to go about this and the tutorials that I have found don't really address my specific issue. Any help would be greatly appreciated. Thank you in advance.
Here is my task controller at TaskController.php
<?php
namespace App\Http\Controllers;
use App\Task;
use App\Image;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;
class TasksController extends Controller
{
public function index()
{
$tasks = Task::orderBy('created_at', 'desc')->paginate(10);
return view('/tasks')->with('tasks', $tasks);
}
public function create()
{
return view('tasks.create');
}
public function store(Request $request)
{
$this->validate($request, [
'task_name' => 'required',
'task_description' => 'required',
]);
// Create Task
$user = Auth::user();
$task = new Task();
$data = $request->all();
$task->user_id = $user->id;
$task = $user->task()->create($data);
if ($request->hasFile('images')) {
$files = $request->file('images');
foreach ($files as $file) {
$name = time() . '-' . $file->getClientOriginalName();
$name = str_replace(' ', '-', $name);
$file->move('task-images', $name);
$task->image()->create(['name' => $name]);
$images = new Image;
$images->name = $name;
}
}
$task->task_name = $request->input('task_name');
$task->task_description = $request->input('task_description');
$task->task_priority = $request->input('task_priority');
$task->task_assigned_by = $request->input('task_assigned_by');
$task->task_assigned_to = $request->input('task_assigned_to');
$task->task_to_be_completed_date = $request->input('task_to_be_completed_date');
$task->task_notes = $request->input('task_notes');
$task->task_status = $request->task_status;
$task->save();
return redirect('/home')->with('success', 'Task Created');
}
public function edit($id)
{
$task = Task::find($id);
return view('tasks.edit', ['task' => $task]);
}
public function update(Request $request, $id)
{
$this->validate($request, [
'task_name' => 'required',
'task_description' => 'required',
]);
$task = Task::find($id);
$task->task_name = $request->input('task_name');
$task->task_description = $request->input('task_description');
$task->task_priority = $request->input('task_priority');
$task->task_assigned_by = $request->input('task_assigned_by');
$task->task_assigned_to = $request->input('task_assigned_to');
$task->task_to_be_completed_date = $request->input('task_to_be_completed_date');
$task->task_notes = $request->input('task_notes');
$task->task_status = $request->input('task_status');
if ($request->hasFile('images')) {
$files = $request->file('images');
foreach ($files as $file) {
$name = time() . '-' . $file->getClientOriginalName();
$name = str_replace(' ', '-', $name);
$file->move('task-images', $name);
$task->image()->create(['name' => $name]);
}
}
$task->update();
return redirect('/home')->with('success', 'Task Updated');
}
public function show($id)
{
$task = Task::find($id);
return view('tasks.show')->with('task', $task);
}
public function destroy($id)
{
$task = Task::findOrFail($id);
// $image = '/task-images/' . $task->image;
Storage::delete($task->image);
$task->delete();
return redirect('home')->with('success', 'Task Deleted');
}
}
filesystem.php (just the disks section)
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app'),
// 'root' => public_path('task-images'),
],
...
in my individual show template, show.blade.php complete in case there is a code conflict.
#extends('layouts.master')
#section('content')
<div class="container">
Go Back
<div class="card p-3">
<div class="row">
<div class="col-md-4 col-sm-12">
<h3>Task</h3>
<p>{{ $task->task_name }}</p>
<h3>Assigned On:</h3>
<p>{{ $task->created_at->format('m/d/Y') }}</p>
<h3>Assigned To:</h3>
<p>{{ $task->task_assigned_to }}</p>
</div>
<div class="col-md-4 col-sm-12">
<h3>Task Description</h3>
<p>{{ $task->task_description }}</p>
<h3>Priority</h3>
<p>{{ $task->task_priority }}</p>
<h3>Status</h3>
<p>{{ $task->task_status }}</p>
</div>
<div class="col-md-4 col-sm-12">
<h3>Test Environment Date:</h3>
<p>{{ $task->task_to_be_completed_date }}</p>
<h3>Notes</h3>
<p>{{ $task->task_notes }}</p>
<h3>Action</h3>
<div style="display: inline;">
<a href="/tasks/{{$task->id}}/edit" class="btn btn-sm btn-primary mr-2">
<i class="fa fa-edit"></i> Edit
</a>
</div>
<form style="display: inline;" action="/tasks/{{ $task->id }}" method="POST" class="">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm ml-1 mr-1">
<i class="fa fa-trash"></i> Delete
</button>
</form>
</div>
<div class="col-md-12">
<h5>Images</h5>
<hr />
<div class="row">
#if($task->image->count()>0)
#for($i=0; $i < count($images = $task->image()->get()); $i++)
<div class="col-lg-4 col-md-6 col-sm-12">
<img class="w-50 mb-2" src="/task-images/{{ $images[$i]['name'] }}" alt="">
<form style="display: inline;" action="/tasks/{{ $task->name }}" method="POST" class="">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm ml-1 mr-1">
<i class="fa fa-trash"></i> Delete
</button>
</form>
</div>
#endfor
#else
<p>No images found</p>
#endif
</div>
<br />
</div>
</div>
</div>
</div>
<!--Modal Start-->
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img class="w-100" src="" alt="" />
</div>
</div>
</div>
</div>
<!--Modal End-->
#endsection
#section('scripts')
<script>
$(document).ready(function() {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function(event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});
</script>
#endsection
In my Task model, Task.php, I have:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Image;
class Task extends Model
{
protected $fillable = [
'task_name', 'task_priority', 'task_assigned_to', 'task_assigned_by', 'task_description', 'task_to_be_completed_date', 'task_status',
'task_notes'
];
public function user()
{
return $this->belongsTo(User::class);
}
public function image()
{
// return $this->hasMany('App\Image');
return $this->hasMany(Image::class);
}
}
and finally my Image Model Image.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Task;
class Image extends Model
{
protected $fillable = [
'task_id',
'name',
];
protected $uploads = '/task-images/';
public function getFileAttribute($image)
{
return $this->uploads . $image;
}
public function task()
{
// return $this->belongsTo('App\Task', 'task_id');
return $this->belongsTo(Task::class);
}
}
If I am missing something, please let me know so I can edit my question. Again, thank you in advance for helping me with this issue. I have been scratching my head all week on this one. Cheers.
Edit
After implementing boot functions in my model as suggested below, I received an error that an invalid argument was used for foreach. I ran a dd($task); and the following image shows the result.
Final Edit
The answer below worked for my situation. I did have to edit some things to finalize the resolution:
in Task.php I changed the foreach to the following.
foreach($task->image ?: [] as $image)
I had declared image and not image in my model and that was causing a problem. Adding the ternary operator also helped the code not throw any errors.
In my TasksController.php I changed both the update and create functions with the same ternary operator as follows:
if ($request->hasFile('images')) {
$files = $request->file('images');
foreach ($files ?: [] as $file) {
$name = time() . '-' . $file->getClientOriginalName();
$name = str_replace(' ', '-', $name);
$file->move('task-images', $name);
$task->image()->create(['name' => $name]);
}
}
I hope this helps anyone else having the same issue. Thanks to #GrumpyCrouton and #lagbox for their help in resolving this as well as #user3563950
Without them, I would still by stratching my head for another couple of weeks.
on your App\Image class, implement to boot function with the following;
use Illuminate\Support\Facades\Storage;
public static function boot() {
parent::boot();
self::deleting(function($image) {
Storage::delete(Storage::path($image->name));
});
}
Also implement the boot method in App\Task class
use Illuminate\Support\Facades\Storage;
public static function boot() {
parent::boot();
self::deleting(function($task) {
foreach($task->images as $image) {
$image->delete();
}
});
}
Now on your TaskController implement the destroy method as follows;
public function destroy($id)
{
$task = Task::findOrFail($id);
$task->delete();
return redirect('home')->with('success', 'Task Deleted');
}
As a bonus, learn Laravel model binding to ease the pain of finding an instance using findOrFail()
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();
}
}
I'm looking for solution to use dropzoneJs in laravel 5.5 while writing my products.
What I want to do is: upload my images and fill my product info then save all together just like WordPress/Joomla etc.
What do I have so far:
Images Table
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->increments('id');
$table->string('image');
$table->integer('product_id')->nullable()->unsigned();
$table->timestamps();
});
Schema::table('images', function($table) {
$table->foreign('product_id')->references('id')->on('products');
});
}
My form in Products create.blade.php
<div class="row">
<div class="col-md-12">
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload' ]) !!}
{{ csrf_field() }}
<div>
<h4 style="text-align: center;color:#428bca;">Drop images in this area <span class="glyphicon glyphicon-hand-down"></span></h4>
<!-- Input code below Not working yet -->
<input type="text" name="product_id" value="" hidden>
</div>
{!! Form::close() !!}
</div>
</div>
My JavaScript code:
<!-- drozone -->
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize: 5, //MB
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
My ImageController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Image;
use App\Product;
class ImageController extends Controller
{
public function dropzone()
{
return view('dropzone-view');
}
public function dropzoneStore(Request $request)
{
$image = $request->file('file');
$imageName = time().$image->getClientOriginalName();
$image->move(public_path('images'),$imageName);
return response()->json(['success'=>$imageName]);
}
}
And my routes:
Route::get('dropzone', 'ImageController#dropzone');
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'ImageController#dropzoneStore']);
Any Idea On That?