I want to use filepond as my product editor.
How to load current images that is stored on the server? So visitor can decide wheter to change the current images or add a new image.
It's like this form:
=> https://stackoverflow.com/users/edit/{your_user_id}
prefill some data if it has been filled before, but shows nothing when its hasnt been filled before.
I'm mentioning this filepond:
=> https://github.com/pqina/filepond
This is my code on how I show a default image.
const inputElement = document.querySelector('#image');
const pond = FilePond.create(inputElement, options);
pond.setOptions({
allowImagePreview: true,
acceptedFileTypes: ['image/*'],
server: {
process: {
url: 'upload.php',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
},
revert: {
url: 'deleteTmpImage.php',
method: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'_method': 'DELETE',
},
},
load: (uniqueFileId, load) => {
fetch(uniqueFileId)
.then(res => res.blob())
.then(load);
},
},
files: [
{
source: 'https://www.example.com/default_image.jpg',
options: {
type: 'local',
}
},
]
});
Related
I have a admin login where the admin has to approve the student,I have used a toggle button for approval option, when clicked on the toggle button the value of status in database as to change from 1 to 0? How do I do this? Even if there are ways for it to work with normal buttons would also be helpful.Thank You.
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
fill_datatable();
function fill_datatable(collegeID = '') {
var table = $('.user_datatable1').DataTable({
order: [
[0, 'desc']
],
processing: true,
serverSide: true,
ajax: {
url: "{{ route('alumni.datatable1') }}",
data: {
collegeID: collegeID
}
},
columns: [{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'status',
name: 'status',
mRender: function(data) {
return '<input data-id="{{$colleges->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Approved" data-off="Pending" {{ $colleges->status ? "checked" : "" }}>'
}
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
}
});
</script>
<script>
$(function() {
$(".toggle-class").change (function() {
var status = $(this).prop("checked")== true ? 0 : 1;
var id = $(this).data("id");
$.ajax({
type: "GET",
dataType: "json",
url: "/changeStatus",
data: {"status": status, "id": id},
success: function(data) {
console.log("Success")
}
});
});
});
</script>
Route
Route::get('changeStatus', [AdminAuthController::class, 'changeStatus'])->name('changeStatus');
Controller
public function changeStatus(Request $request,$regno)
{
$colleges = College::find($regno);
$colleges->status = $request->status;
$colleges->save();
return back();
}
I have the following search box for getting data from backend:
<select class="form-control kt-select2" id="megaagent_rainmaker_select" name="param" multiple="multiple" style="width: 100%"></select>
This is my select2 javascript code:
var rainmakerSelect = function () {
// Private functions
var demos = function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
// multi select
$('#megaagent_rainmaker_select').select2({
language: "es",
placeholder: "Escriba y seleccione",
allowClear: true,
maximumSelectionLength: 1,
ajax: {
url: '/admin/megaagent/getrainmaker',
type: "get",
dataType: 'json',
delay: 150,
data: function (params) {
return {
_token: CSRF_TOKEN,
search: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
}
return {
init: function () {
demos();
}
};
}();
jQuery(document).ready(function () {
rainmakerSelect.init();
});
I get results returned and I can select one without problem.
After I select a value, I send update request to backend, this is my payload:
{
"_token": "bPl0hZJQxw5wAxNCqVOOKqrXXwkD5AZZOFPumrpC",
"mc_id": "11",
"megaagent_id": "16",
"megaagent_name": "David Cortada",
"megaagent_business_name": "bsame cambio",
"megaagent_uma_id": "umaid",
"megaagent_api_key": "apikey",
"param": "963",
"megaagent_phone_number": "phone",
"megaagent_email": "email",
"megaagent_address": "address",
"megaagent_facebook": "fb",
"megaagent_instagram": "inst",
"megaagent_twitter": "twi",
"megaagent_linkedin": "link",
"megaagent_image": "image",
"megaagent_status": "Activo"
}
What I want to achieve is to change param name to other on post request (example: "megaagent_rainmaker_id" = "963",.
I changed it in <select name="param"> but that breaks the search, no results are returned when I type in search box.
Does anyone knows the solution for this?
Regards
I have an article post service, which has an upload form with uppy.io
Everything works great, but I need to edit those articles and their linked images.
How can I prefill already uploaded images to the uppy.io DashBoard?
My actual code:
<div class="DashboardContainer"></div>
<!-- AJAX Uploading for Add Post -->
<script src="https://transloadit.edgly.net/releases/uppy/v1.8.0/uppy.min.js"></script>
<script src="https://transloadit.edgly.net/releases/uppy/locales/v1.11.0/es_ES.min.js"></script>
<script>
const uppy = Uppy.Core({
debug: true,
autoProceed: true,
restrictions: {
maxFileSize: 600000,
maxNumberOfFiles: 10,
minNumberOfFiles: 1,
allowedFileTypes: ['.jpg', '.jpeg', '.png', '.gif']
},
locale: Uppy.locales.es_ES
})
.use(Uppy.Dashboard, {
inline: true,
target: '.DashboardContainer',
replaceTargetContent: true,
showProgressDetails: true,
note: 'Sólo imágenes, hasta 10 fotos, de no más de 800kb',
height: 350,
width: '100%',
metaFields: [{
id: 'name',
name: 'Name',
placeholder: 'Nombre del fichero subido'
},
{
id: 'caption',
name: 'Caption',
placeholder: 'Describe la imagen que estás subiendo'
}
],
browserBackButtonClose: true,
plugins: ['Webcam']
})
.use(Uppy.XHRUpload, {
endpoint: "{{ route('save-image-ajax') }}",
formData: true,
fieldName: 'files[]',
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
},
})
uppy.on('upload-success', (file, response) => {
response.status // HTTP status code
response.body // extracted response data
// do something with file and response
$('<input>', {
type: 'hidden',
name: 'imageID[]',
value: response.body.imageID
}).appendTo("#add");
})
uppy.on('complete', result => {
console.log('successful files:', result.successful)
console.log('failed files:', result.failed)
})
</script>
The form works great for publishing an article, I just want to edit them, even the linked images.
You can prefill images from url (first converting the remote image into blob):
fetch({{your_image_url}})
.then((response) => response.blob())
.then((blob) => {
uppy.addFile({
name: "image.jpg",
type: blob.type,
data: blob
});
});
And then, set the state of the loaded images to "Completed" to avoid Uppy re upload them:
uppy.getFiles().forEach(file => {
uppy.setFileState(file.id, {
progress: { uploadComplete: true, uploadStarted: false }
})
})
Also, the property "autoProceed" must be false in the Uppy object configuration.
Source: https://github.com/transloadit/uppy/issues/1112#issuecomment-432339569
I am have an api like this:
(This is a wechat-miniprogram api.)
wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
},
fail(err) {
console.log(err)
},
complete(res) {
console.log(res.data)
}
})
However I want to use it like this:
(I want to use it like an observable.)
rxwx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
}).subscribe(
(res) => {
console.log(res.data)
},
(err) => {
console.log(err)
},
(res) => {
console.log(res.data)
}
)
I cannot transform wx.login with bindCallback or bindNodeCallback. Please help. Thanks in advance :D
Use Observable constructor instead
const request=new Observable(emitter=>{
wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success:emitter.next
fail:emitter.error
complete:emitter.complete
})
return ()=>{ //... clearn up logic here }
}
I have a select box and when each item is selected, a ajax request is sent.
but my code does not work. i'm get status 404 and this error is displayed in the console
exception: "Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException", file: "F:\\source\\boiler\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\RouteCollection.php", line: 179, …
my route :
Route::group(['namespace' => 'BuyCrypto' , 'prefix' => 'crypto'], function() {
Route::post('/calculateBuyAmount' , [BuyCryptoController::class , 'calculateAmount'])->name('calculate.amount');
});
ajax code :
$("select#user_select_crypto").change(function(e) {
$('#calculat_user_buy').block({
message: '<i class="icon-spinner4 spinner"></i>',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: 0,
backgroundColor: 'transparent'
}
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
e.preventDefault();
$.ajax({
url: "panel/crypto/calculateBuyAmount",
dataType: 'json',
data: {
user_select_crypto: $("input[name=user_select_crypto]").val(),
user_value_request: $("input[name=user_value_request]").val(),
},
success: function(result) {
console.log(result)
},
error: function(result) {
console.log(result)
},
});
});
what is problem?
this is because laravel not getting the full URL of your giving route. you have to give the correct route. for this, you can use your named route like below.
url: "{{ route('calculate.amount') }}",
or in case you are in a javascript file and can't use blade than just give URL with / slash. all is going to work. Its happen with a post request.
you can give URL like below
url: "/panel/crypto/calculateBuyAmount",
Updated
Now you facing methodNotAllowedException because now you sending a get request because you are not mentioning in ajax side you are doing a post request. by default ajax will send a get request. so you need to tell ajax use post method. like that type: "POST" like below
$.ajax({
url: "/panel/crypto/calculateBuyAmount",
dataType: 'json',
type : 'POST'
data: {
user_select_crypto: $("input[name=user_select_crypto]").val(),
user_value_request: $("input[name=user_value_request]").val(),
},
success: function(result) {
console.log(result)
},
error: function(result) {
console.log(result)
},
});
In this kind of situation, it is good to use named route as you give your route a name.
$.ajax({
url: "{{ route('calculate.amount') }}", // use your name route here
type : 'POST', // need to add your request type post
dataType: 'json',
data: {
user_select_crypto: $("input[name=user_select_crypto]").val(),
user_value_request: $("input[name=user_value_request]").val(),
},
success: function(result) {
console.log(result)
},
error: function(result) {
console.log(result)
},
});