how to use Jcrop with Laravel - laravel

I have watched this https://www.youtube.com/watch?v=aflTCbGdzDc tutorial for using jcrop, but it is for Php, when I'm using it with Laravel, the program stops at Validation, says image filed is required, like I haven't chosen an image, but I do have ! , and I'm seeing the image in the box . Note: when I push the upload button in crop modal, I get this error :
POST http://localhost:8000/server/ctrl.php?fileapi155837244028211 404 (Not Found) , it seems i need to set a post rout , but how ? i don't know . does anyone know how we should work with jcrop in laravel ?
here is my code :
<link href="{{asset('crop-userpic\style.css')}}" rel="stylesheet"/>
<link href="{{asset('crop-userpic\jcrop\jquery.jcrop.min.css')}}" rel="stylesheet"/>
<form method="post" action="{{route('testing')}}" enctype="multipart/form-data">
#csrf
<div class="container">
<div id="userpic" class="userpic">
<div class="js-preview userpic__preview"></div>
<div class="btn btn-success js-fileapi-wrapper">
<div class="js-browse">
<span class="btn-txt">انتخاب عکس</span>
<input type="file" name="image" id="image">
</div>
<div class="js-upload" style="display: none;">
<div class="progress progress-success">
<div class="js-progress bar"></div>
</div>
<span class="btn-txt">در حال بارگذاری</span>
</div>
</div>
</div>
</div>
<div id="popup" class="popup" style="display: none">
<div class="popup__body">
<div class="js-img"></div>
</div>
<div style="margin: 0 0 5px;text-align: center">
<div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
</div>
</div>
<input type="submit" name="submit" value="sumbit" />
</form>
<script src="{{asset('crop-userpic\jquery.min.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.easing.min.js')}}"></script>
<script>
var FileAPI = {
debug: true,
media: true,
staticPath: '{{asset('crop-userpic\FileAPI')}}'
};
</script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.min.js')}}"></script>
<script src="{{asset('crop-userpic\FileAPI\FileAPI.exif.js')}}"></script>
<script src="{{asset('crop-userpic\jquery.Fileapi.js')}}"></script>
<script src="{{asset('crop-userpic\jcrop\jquery.Jcrop.min.js')}}"></script>
<script src="{{asset('crop-userpic\statics\jquery.modal.js')}}"></script>
<script src="{{asset('crop-userpic\script.js')}}"></script>
and this is the image : https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E
as you can see the image is in the box , but when i push submit , i get the validation error image field is required , like i don't have an image at all
please help me . i don't know what to do . and i love this Jcrop .

Related

Socket.io __dirname is not defined when trying to load on localhost

I'm trying to build a basic chat function for a site and am following along with this tutorial...
(https://www.youtube.com/watch?v=tHbCkikFfDE&list=WL&index=4)... but socket.io doesn't seem to be loading on the page. I used the most recent CDN. I have a feeling my file path is off but I'm not quite sure how to repair it. I'm new, be gentle.
<html>
<head>
<title>IO Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul id="users" class="list-group"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message">
</textarea>
<br />
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
})
})
</script>
</body>
</html>

Why does vuejs router not working with laravel

I work on Laravel + Vuejs. Something has just happened, since then my script as copied hereunder doesn't work, chrome doesn't detect any vuejs script.
Astonishingly, the same script works well if I copy it into backup directory & run PHP artisan instance from there. Need advise. Actually problem seems with routerview which could not activate due to unknown problem. did i wrongly uninstall something which need to reinstall again ? because seems router doesn't work
kash.blade.php: - Main script
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')}}">
<link href="{{asset('backend/vendor/fontawesome-free/css/all.min.css')}}"
rel="stylesheet" type="text/css">
<link href="{{asset('backend/vendor/bootstrap/css/bootstrap.min.css')}}"
rel="stylesheet" type="text/css">
</head>
<body id="page-top">
<div id="app">
<div id="wrapper">
<div class="container-fluid" id="container-wrapper">
<router-view></router-view>
</div>
</div>
</div>
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('backend/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('backend/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('backend/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
</body>
</html>
route.js: - where I describe the component route as to where login.vue lies
let login = require('./components/auth/login.vue').default;
export const routes = [
{ path: '/', component: login, name:'/' },
]
Login.vue: - Just a simple vue script with two text boxes.
<template>
<div>
<div class="container-login">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" #submit.prevent="login">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail"
placeholder="Enter Email Address" v-model="form.email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword"
placeholder="Password" v-model="form.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
<hr>
</form>
<hr>
<div class="text-center">
</div>
</div>
</template>
<script type="text/javascript">
export default {
data(){
return {
form:{
email: null,
password: null
}
}
},
methods:{
}
}
</script>

Avoid sidenav refresh and change only the content div Laravel

I'm trying to avoid the sidenav to refresh each time I choose a category and only change the content section of the page. Can anyone help? TIA
Here's what I have so far
<body>
#include('layouts.header')
<main>
<div class="container" style="background-color: white; height: 100%;">
<div class="row">
<div class="col-md-2" id="verticalNav">
#include('layouts.verticalNav')
</div>
<div class="col-md-8 text-center" id="content">
#yield('content')
</div>
<div class="col-md-2 text-center">
<h5>ADBANNERS!</h5>
</div>
</div>
</div>
</main>
#include('layouts.footer')
and here's my script
<script>
$("#verticalNav").click(function(event){
event.preventDefault();
$('#content').load($(this).attr('href'));
});
</script>
the problem here is when I put # sidenav wont even click

i recently used JCrop in my laravel project , but although i choose a photo and its loaded , i get validation error image is requred

I followed this https://www.youtube.com/watch?v=aflTCbGdzDc tutorial, and I managed to include Jcrop in my laravel project, everything is working fine. I click on choose image, I crop the image, and the image is shown in the jcrop image box. but when I submit the form. I get the error in my validation that says, image is required ( i wrote a validation for my image file). why am I getting this error ??? the image is showing in that box. what am I doing wrong ? or is there a problem with JCrop ?!! please help me.
This is the image when I upload :
https://drive.google.com/open?id=1qgEmA9RlKy_eilZohCLajGmnVfqWSB9E
This is the image when I submit and I get the error : https://drive.google.com/open?id=1gSCurwZ50TF_nMZZcWnJ4keBsJmcQKEh
Template Code:
<form method="post" action="{{route('userRegister')}}" enctype="multipart/form-data">
#csrf
<div class="col-md-6 alert alert-danger {{!empty($errors->all()) ? 'show' : 'hide'}}">
<ul style="text-align: right;" dir="rtl">
#foreach($errors->all() as $error)
<li>{{$error}}</li>
#endforeach
</ul>
</div>
<div class="row col-md-12" dir="rtl">
<div class="input-group col-md-4">
<div class="container" dir="ltr">
<div id="userpic" class="userpic">
<div class="js-preview userpic__preview"></div>
<div class="btn btn-success js-fileapi-wrapper">
<div class="js-browse">
<span class="btn-txt">انتخاب عکس</span>
<input type="file" name="filedata" id="filedata" >
</div>
<div class="js-upload" style="display: none;">
<div class="progress progress-success"><div class="js-progress bar"></div></div>
<span class="btn-txt">در حال بارگذاری</span>
</div>
</div>
</div>
</div>
<div id="popup" class="popup" style="display: none">
<div class="popup__body"><div class="js-img"></div></div>
<div style="margin: 0 0 5px;text-align: center">
<div class="js-upload btn btn_browse btn_browse_small">بارگذاری</div>
</div>
</div>
</div>
</div>
Validation Code:
public function rules()
{
return [
'filedata' => 'required|max:1024',
];
}
public function messages()
{
return [
'filedata.max' => 'سایز تصویر نمیتواند بیش از 2 مگابایت باشد',
'filedata.required' => 'وارد کردن تصویر الزامی است',
];
}
I get this error in my console :
POST http://localhost:8000/server/ctrl.php?fileapi155834626282411 404 (Not Found) FileAPI.min.js:2
After talking to you in the comments, it would appear your getting 404 errors on the FileAPI javascript files.
You were using the following configuration for your FileAPI:
var FileAPI = { debug:true, media:true, staticPath:'{{asset('crop-userpic\FileAPI')}}' };
This was setting your staticPath to the /resources/assets/crop-userpic/FileAPI directory, which placed them outside of the webroot of your website.
You need to set the staticPath to the location of the FileAPI javascript files within your public directory so they can be accessed by jcrop.
Example Usage
<!-- include jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- Set FileAPI settings -->
<script>
window.FileAPI = {
debug: false,
media: true,
staticPath: '/js/jquery.fileapi/FileAPI/'
};
</script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.min.js"></script>
<script src="/js/jquery.fileapi/FileAPI/FileAPI.exif.js"></script>
<script src="/js/jquery.fileapi/jquery.fileapi.min.js"></script>
<script src="/js/jcrop/jquery.Jcrop.min.js"></script>
In the above example staticPath is the path to the files FileAPI.min.js and FileAPI.exif.js.
You should make sure you have those files accessible from within the /public/js/jquery.fileapi/FileAPI/.

My bootstrap modal doesn't appears in laravel

I'm trying to create a bootstrap modal in laravel to edit sa post, the problem is that when I click the button or anchor the modal doesn't appears and in some cases it appears but then quickly it disappears I don't know where is the problem I'm new to laravel and I think the problem is with the links ...
app2.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
</head>
<body>
<div style="color: white; padding-left: 50px; padding-top: 5px; font-size: 20px; background-color: grey; width: 100%; height: 50px; text-align: left;" >Brand</div>
<div class="container">
#yield('content')
</div>
<!--<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!--<script type="text/javascript" src="{{asset('js/app.js')}}"></script>-->
<script type="text/javascript" src="{{asset('js/jquery-3.1.1.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.js')}}"></script>
<script type="text/javascript" src="{{asset('js/app_new.js')}}"></script>
</body>
</html>
dashboard.blade.php
#extends('layouts.app2')
#section('title')
dashboard
#endsection
#section('content')
<h1>Dashboard</h1><br>
<div class="row">
<div class="col-md-6 col-md-offset-6">
<div>
<form action="{{url('/post')}}" method="post">
{{csrf_field()}}
<div class="form-group">
<textarea class="form-control" name="body" id="" cols="50" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<!--<input type="hidden" value="{{Session::token()}}" name="_token">-->
</form>
</div>
</div>
</div><br><br>
#foreach($posts as $post)
<div class="row">
<div class="col-md-6 col-md-offset-6">
<h3>{{$post->body}}</h3>
<p>posted by {{$post->User->name}} on {{$post->created_at->diffForHumans()}}</p>
Edit | Delete | Like | Dislike
</div>
</div>
<br>
#endforeach
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endsection
app_new.js
$('#edit').click(function(){
$('#edit-modal').modal();
});
Use preventDefault() when you click on link.
$('#edit').click(function(e){
e.preventDefault();
$('#edit-modal').modal();
});
And add id='edit-modal' for your div with modal class.
try this
Edit
where #modalEdit is id of modal tag like
<div class="modal" tabindex="-1" role="dialog" id="#modalEdit">
This is one way to call a modal using jquery please try
$('#myModal').modal('show');

Resources