Hi, i have an ajax mehtod to upload a photo in laravel, its working well but i can't position the margin, it tried to make it inside the img attr but its pre-filed with a cropped image before uploading a photo !
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Image One <span class="tx-danger">*</span></label>
<label class="custom-file">
<input type="file" id="file" class="custom-file-input mt-200" name="image_one" onchange="readURL(this);" required="">
<span class="custom-file-control"></span>
<img src="#" id="one" style="margin-top: 40px;">
</label>
</div>
</div><!-- col-4 -->
= the method
<script type="text/javascript">
function readURL(input){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#one')
.attr('src', e.target.result)
.width(90)
.height(90);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
= i can change the width and height but i tried to apply after the width and height, margin but its not working, i appreciate your help !
@zool cant you just add height and width within a stylesheet rather than trying to apply it dynamically?
#one img {
width: 90px;
height: 90px;
}
should do it.
Can you post a link to your FileReader class as i'm not sure how your reader.onload method is supposed to work.
Hey @automica , thanks for your support !
i made a stylesheet and it can read the file, the problem is i have a cropped image by default, its like when alt="" shows if no photo found, however as soon as i upload a photo, it disappear, this ajax method is may be be not happy with a custom css, i wonder if there is a way to margin inside it,
here is linke to my create.blade.php file, i can put the whole project link if needed, thanks a lot https://www.fromsmash.com/A38MJvbkE6-ct
@zool i'm on my work pc which wont let me see many external links (financial services firewalls, eh).
there much be a bit more going on with your ajax, as you'll have an accompanying method in your controller to crop and save the image.
is the FileReader() class something you have written or is it an external library? if so can you post a link to that
Hey @automica , thanks for your help ! No worries i understand.
I only implemented a function which shows immediately the photos that i select , which should be saved with products, i send three images, to the ProductController, i could successfully saved them in db, i have no problem saving,deleting, and even seeing the photos that i select with ajax method when i'm about to save a new product, however they are not positioned well and need a margin, and if i apply a margin, there is alternate text for an image. It would be much easier for you if i could attach a photo, but this Q&A forum does not support that i guess.
here is my create.blade.php
@extends('admin.admin_layouts')
@section('admin_content')
<!-- ########## START: MAIN PANEL ########## -->
<div class="sl-mainpanel">
<nav class="breadcrumb sl-breadcrumb">
<a class="breadcrumb-item" href="index.html">Starlight</a>
<span class="breadcrumb-item active">Product Section</span>
</nav>
<div class="sl-pagebody">
<div class="card pd-20 pd-sm-40">
<h6 class="card-body-title">Product New ADD
<a href="{{ route('products')}}" class="btn btn-success btn-sm pull-right"> All Product</a>
</h6>
<p class="mg-b-20 mg-sm-b-30">New Prodcut Add From</p>
<form method="post" action="{{ route('products.store')}}" enctype="multipart/form-data">
@csrf
<div class="form-layout">
<div class="row mg-b-25">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label">Product Name: <span class="tx-danger">*</span></label>
<input class="form-control" type="text" name="product_name" placeholder="Enter Product Name">
@error('product_name')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label">Product Code: <span class="tx-danger">*</span></label>
<input class="form-control" type="text" name="product_code" placeholder="Enter Product Code">
@error('product_code')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label">Quantity: <span class="tx-danger">*</span></label>
<input class="form-control" type="text" name="product_quantity" placeholder="product quantity">
@error('product_quantity')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label">Discount Price: <span class="tx-danger">*</span></label>
<input class="form-control" type="text" name="discount_price" placeholder="Discount Price">
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group mg-b-10-force">
<label class="form-control-label">Category: <span class="tx-danger">*</span></label>
<select class="form-control select2" data-placeholder="Choose category" name="category_id" id="category">
<option label="Choose Category"></option>
@foreach($category as $row)
<option value="{{ $row->id }}">{{ $row->category_name }}</option>
@endforeach
</select>
@error('category_id')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group mg-b-10-force">
<label class="form-control-label">Sub Category: <span class="tx-danger">*</span></label>
<select class="form-control select2" data-placeholder="Choose subcategory" name="subcategory_id" id="subcategory_id">
</select>
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group mg-b-10-force">
<label class="form-control-label">Brand: <span class="tx-danger">*</span></label>
<select class="form-control select2" data-placeholder="Choose brand" name="brand_id">
<option label="Choose Brand"></option>
@foreach($brand as $br)
<option value="{{ $br->id }}">{{ $br->brand_name }}</option>
@endforeach
</select>
@error('brand_id')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Product Size: <span class="tx-danger">*</span></label>
<input class="form-control" type="text" name="product_size" id="size" data-role="tagsinput" >
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Product Color: <span class="tx-danger">*</span></label>
<input class="form-control" type="text" name="product_color" id="color" data-role="tagsinput" >
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Selling Price: <span class="tx-danger">*</span></label>
<input class="form-control" type="text" name="selling_price" placeholder="Selling Price" >
@error('selling_price')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-12">
<div class="form-group">
<label class="form-control-label">Product Details: <span class="tx-danger">*</span></label>
<textarea class="form-control" id="summernote" name="product_details">
</textarea>
@error('product_details')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-12">
<div class="form-group">
<label class="form-control-label">Video Link: <span class="tx-danger">*</span></label>
<input class="form-control" name="video_link" placeholder="Video Link" >
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Image One <span class="tx-danger">*</span></label>
<label class="custom-file">
<input type="file" id="file" class="custom-file-input mt-200" name="image_one" onchange="readURL(this);" required="">
<span class="custom-file-control"></span>
<img src="#" id="one">
</label>
@error('image_one')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Image Two <span class="tx-danger">*</span></label>
<label class="custom-file">
<input type="file" id="file" class="custom-file-input" name="image_two" onchange="readURL2(this);" required="">
<span class="custom-file-control"></span>
<img src="#" id="two">
</label>
@error('image_two')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Image Three <span class="tx-danger">*</span></label>
<label class="custom-file">
<input type="file" id="file" class="custom-file-input" name="image_three" onchange="readURL3(this);" required="">
<span class="custom-file-control"></span>
<img src="#" id="three">
</label>
@error('image_three')
<span class="text-danger">{{$message}}</span>
@enderror
</div>
</div><!-- col-4 -->
</div><!-- row -->
<hr>
<br><br>
<div class="row">
<div class="col-lg-4">
<label class="ckbox">
<input type="checkbox" name="main_slider" value="1">
<span>Main Slider</span>
</label>
</div> <!-- col-4 -->
<div class="col-lg-4">
<label class="ckbox">
<input type="checkbox" name="hot_deal" value="1">
<span>Hot Deal</span>
</label>
</div> <!-- col-4 -->
<div class="col-lg-4">
<label class="ckbox">
<input type="checkbox" name="best_rated" value="1">
<span>Best Rated</span>
</label>
</div> <!-- col-4 -->
<div class="col-lg-4">
<label class="ckbox">
<input type="checkbox" name="trend" value="1">
<span>Trend Product </span>
</label>
</div> <!-- col-4 -->
<div class="col-lg-4">
<label class="ckbox">
<input type="checkbox" name="mid_slider" value="1">
<span>Mid Slider</span>
</label>
</div> <!-- col-4 -->
<div class="col-lg-4">
<label class="ckbox">
<input type="checkbox" name="hot_new" value="1">
<span>Hot New </span>
</label>
</div> <!-- col-4 -->
{{-- by default = 1
<div class="col-lg-4">
<label class="ckbox">
<input type="checkbox" name="status" value="1">
<span>Status</span>
</label>
</div> <!-- col-4 -->
--}}
</div><!-- end row -->
<br><br>
<div class="form-layout-footer">
<button class="btn btn-info mg-r-5">Submit Form</button>
<button class="btn btn-secondary">Cancel</button>
</div><!-- form-layout-footer -->
</div><!-- form-layout -->
</form>
</div><!-- card -->
</div><!-- row -->
</div><!-- sl-mainpanel -->
<!-- ########## END: MAIN PANEL ########## -->
<!-- Bootstrap multi input tags js -->
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>--}}
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript">
$('select[name="category_id"]').on('change',function(){
var category_id = $(this).val();
if (category_id) {
$.ajax({
url: "{{url('/admin/subcategory/')}}/" + category_id,
type:"GET",
dataType:"json",
success:function(data) {
if(data){
console.log(data);
var d = $('select[name="subcategory_id"]').empty();
$.each(data, function(key, value){
$('#subcategory_id').append('<option value="'+ value.id + '">' + value.subcategory_name + '</option>');
});
}else{
alert('No Data Found');
}
},
});
}
});
</script>
===ajax showing photos methods
<script type="text/javascript">
function readURL(input){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#one')
.attr('src', e.target.result)
.width(90)
.height(90);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<script type="text/javascript">
function readURL2(input){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#two')
.attr('src', e.target.result)
.width(90)
.height(90)
.margin(40, 0);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<script type="text/javascript">
function readURL3(input){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#three')
.attr('src', e.target.result)
.width(80)
.height(80);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
@endsection
= in controller
public function storeProduct(ProductRequest $request){
$data = [];
$data['product_name'] = $request->product_name;
$data['product_code'] = $request->product_code;
$data['product_quantity'] = $request->product_quantity;
$data['discount_price'] = $request->discount_price;
$data['category_id'] = $request->category_id;
$data['subcategory_id'] = $request->subcategory_id;
$data['brand_id'] = $request->brand_id;
$data['product_size'] = $request->product_size;
$data['product_color'] = $request->product_color;
$data['selling_price'] = $request->selling_price;
$data['product_details'] = $request->product_details;
$data['video_link'] = $request->video_link;
$data['main_slider'] = $request->main_slider;
$data['hot_deal'] = $request->hot_deal;
$data['best_rated'] = $request->best_rated;
$data['trend'] = $request->trend;
$data['mid_slider'] = $request->mid_slider;
$data['hot_new'] = $request->hot_new;
//$data['buyone_getone'] = $request->buyone_getone;
$data['status'] = 1;
$img_one = $request->image_one; //SAVING IMAGES USING INTERVENT IMAGE THAT I INSTALLED
$image_two = $request->image_one;;
$image_three = $request->image_one;
if($img_one && $image_two && $image_three){
$image_one_name = hexdec(uniqid()).'.'. $img_one->getClientOriginalExtension();
Image::make($img_one)->resize(300,300)->save('public/media/products/' . $image_one_name);
$data['image_one'] = '/public/media/products/' . $image_one_name;
$image_two_name = hexdec(uniqid()).'.'. $image_two->getClientOriginalExtension();
Image::make($image_two)->resize(300,300)->save('public/media/products/' . $image_two_name);
$data['image_two'] = '/public/media/products/' . $image_two_name;
$image_three_name = hexdec(uniqid()).'.'. $image_three->getClientOriginalExtension();
Image::make($image_three)->resize(300,300)->save('public/media/products/' . $image_three_name);
$data['image_three'] = '/public/media/products/' . $image_three_name;
$product = Product::insert($data);
if(!$product){
$notification=array(
'messege'=>'Could not be Added !',
'alert-type'=>'error'
);
return Redirect()->back()->with($notification);
}
$notification=array(
'messege'=>'New Product Added Successfully!',
'alert-type'=>'success'
);
return Redirect()->route('products')->with($notification);
}
}
@zool so if you want a margin, just css the margin:
.custom-file-control img {
width: 90px;
height: 90px;
margin: 20px;
}
Have you looked at DropZone, https://laraveldaily.com/multiple-file-upload-with-dropzone-js-and-laravel-medialibrary-package/
@jlrdw +1 for Dropzone.
@zool if it helps you, show this post as answered to help others.
Hey @jlrdw , thanks i just did :)
Please or to participate in this conversation.