-
lgedson
Newbie
-
Posts: 2
Threads: 2
Joined: May 2021
Reputation:
-1
05-25-2021, 12:07 AM
(This post was last modified: 05-28-2021, 11:50 PM by lgedson.
Edit Reason: Spam link removed
)
I have used Cropme jquery plugin to resize, crop and do other functionalities on an uploaded image. I want to save the cropped image in the database of my website Jazz Daily internet package. But when I try to store the image it uploads the image which was uploaded in ***SPAM LINK REMOVED***. Below is the config js.
Code: new Vue({
el: "#app",
data: {
options: {},
position: {},
defaultOptions: {
container: {
width: '100%',
height: 400
},
viewport: {
width: 200,
height: 200,
type: 'square',
border: {
width: 2,
enable: true,
color: '#fff'
}
},
zoom: {
enable: true,
mouseWheel: true,
slider: true
},
rotation: {
slider: true,
enable: true,
position: 'left'
},
transformOrigin: 'image',
},
cropme: {},
el: {}
},
watch: {
options: {
handler: function(val) {
this.cropme.reload(val)
},
deep: true
}
},
created:function() {
this.options = JSON.parse(JSON.stringify(this.defaultOptions))
},
mounted:function() {
this.init()
},
methods: {
init:function() {
this.el = document.getElementById('cropme')
this.cropme = new Cropme(this.el, this.options)
this.cropme.bind({
url: 'images/download.jpg',
})
},
getPosition:function() {
this.position = this.cropme.position()
$('#cropmePosition').modal()
},
crop:function() {
let img = document.getElementById('cropme-result')
let imgInputField = document.getElementById('addFoodImage')
let imgPreview = document.getElementById('foodImagePreview')
this.cropme.crop({
width: 600
}).then(function(res) {
img.src = res
imgInputField.src = res
imgPreview.src = res
// $('#cropmeModal').modal()
})
},
reset:function() {
this.options = JSON.parse(JSON.stringify(this.defaultOptions))
this.cropme.destroy()
this.init()
}
}
})
Code: $.ajax({
url: BASE_URL + "food/addFood",
type: 'post',
processData: false,
contentType: false,
data: formData,
success: function (data) {
$('#overlay').css('display','none');
var res = JSON.parse(data);
if(res.code == 0){
toastr.error(res.message);
}
else{
toastr.success(res.message);
setTimeout(function(){ location.reload(); }, 1000);
}
}
});
Code: <input type="file" class="form-control-file position-absolute" accept="image/*" id="addFoodImage" name="addFoodImage" data-msg-accept="Bitte lade ein Bild mit einem gültigen Dateiformat hoch (jpg, png, tiff).">
When the image is previewed then I am changing the value of input file type.
Please help me with this. How can I pass the image from img tag in ajax request or set the new cropped image in the file input?
-
paliz
Member
-
Posts: 236
Threads: 19
Joined: Oct 2020
Reputation:
1
look at create and upadetre function how crop file in ci 4
PHP Code: <?php
namespace CoreCommon\Controllers;
use CoreCommon\Entities\ContactMediaEntity;
use CoreCommon\Libraries\CustomFileSystem;
use CoreCommon\Libraries\UrlQueryParam;
use CodeIgniter\HTTP\ResponseInterface;
use CoreCommon\Models\ContactMediaModal;
class ContactMedia extends ApiController
{
/**
* index function
* @method : GET
*/
public function index()
{
$contactModel = new ContactMediaModal();
$parameterDataInput = new UrlQueryParam();
$parameterDataInput->initParameters();
if ($parameterDataInput->getExact()) {
$result = $contactModel->where($parameterDataInput->getExactExplode('key'), $parameterDataInput->getExactExplode('value'))
->orderBy($parameterDataInput->getSortExplode('key'), $parameterDataInput->getSortExplode('value'))
->paginate(10, 'default', $parameterDataInput->getPage());
} else if ($parameterDataInput->getExcept()) {
$result = $contactModel->where($parameterDataInput->getExceptExplode('key') . ' !=', $parameterDataInput->getExceptExplode('value'))
->orderBy($parameterDataInput->getSortExplode('key'), $parameterDataInput->getSortExplode('value'))
->paginate(10, 'default', $parameterDataInput->getPage());
} else {
$result = $contactModel->like($parameterDataInput->getFilterExplode('key'), $parameterDataInput->getFilterExplode('value'))
->orderBy($parameterDataInput->getSortExplode('key'), $parameterDataInput->getSortExplode('value'))
->paginate(10, 'default', $parameterDataInput->getPage());
}
return $this->respond([
'data' => $result,
'pager' => $contactModel->pager->getDetails()
], ResponseInterface::HTTP_OK, lang('Common.api.receive'));
}
/**
* show function
* @method : GET with params ID
*/
public function show($id = null)
{
$contactModel = new ContactMediaModal();
return $this->respond([
'data' => $contactModel->where('id', $id)->paginate(1, 'default'),
'pager' => $contactModel->pager->getDetails()
], ResponseInterface::HTTP_OK, lang('Common.api.receive'));
}
/**
* create function
* @method : POST
*/
public function create()
{
$contactMediaModel = new ContactMediaModal();
$customConfig = new \CoreCommon\Config\CoreCommonConfig();
$imageService = \CodeIgniter\Config\Services::image();
$contactMediaEntity = new ContactMediaEntity();
if ($this->request->getPost()) {
$rules = [
'image' => 'uploaded[image]|max_size[image,4096]|ext_in[image,png,jpg,gif,webp]',
'contact_id' => 'required'
];
if (!$this->validate($rules)) {
return $this->respond([
'error' => $this->validator->getErrors(),
'success' => false
], ResponseInterface::HTTP_NOT_ACCEPTABLE, lang('Common.api.validation'));
}
$contactMediaEntity->contact_id = $this->request->getPost('contact_id');
if (isset($_FILES['image'])) {
foreach ($this->request->getFileMultiple('image') as $avatar) {
$avatar->move($customConfig->uploadDirectory . '/contact', time() . '.' . $avatar->getClientExtension());
$contactMediaEntity->path = $avatar->getName();
$contactMediaEntity->editPath();
$imageService->withFile(ROOTPATH . $contactMediaEntity->path)
->withResource()
->save(ROOTPATH . $contactMediaEntity->path, 90);
if (!$contactMediaModel->save($contactMediaEntity)) {
return $this->respond([
'error' => $contactMediaModel->errors(),
'success' => false,
], ResponseInterface::HTTP_BAD_REQUEST, lang('Common.api.reject'));
}
}
}
return $this->respond([
'data' => ''
], ResponseInterface::HTTP_CREATED, lang('Common.api.save'));
}
}
/**
* update function
* @method : PUT or PATCH
*/
public function update($id = null)
{
$contactMediaModel = new ContactMediaModal();
$customConfig = new \CoreCommon\Config\CoreCommonConfig();
$imageService = \CodeIgniter\Config\Services::image();
$handy = new CustomFileSystem();
$contactMediaEntity = new ContactMediaEntity();
$conMedia = null;
if ($this->request->getPost()) {
$rules = [
'image' => 'uploaded[image]|max_size[image,4096]|ext_in[image,png,jpg,gif,webp]',
];
if (!$this->validate($rules)) {
return $this->respond([
'error' => $this->validator->getErrors(),
'success' => false,
], ResponseInterface::HTTP_NOT_ACCEPTABLE, lang('Common.api.validation') );
}
$conMedia = $contactMediaModel->where('id', $id)->first();
if (is_null($conMedia)) {
return $this->respond([
'error' => $this->validator->getErrors(),
'success' => false
], ResponseInterface::HTTP_NOT_FOUND, lang('Common.api.exist'));
}
$contactMediaEntity->contact_id = $conMedia->contact_id;
if (isset($_FILES['image'])) {
foreach ($this->request->getFileMultiple('image') as $avatar) {
$avatar->move($customConfig->uploadDirectory . '/contact', time() . '.' . $avatar->getClientExtension());
$contactMediaEntity->id = $id;
$contactMediaEntity->path = $avatar->getName();
$contactMediaEntity->editPath();
$imageService->withFile(ROOTPATH . $contactMediaEntity->path)
->withResource()
->save(ROOTPATH . $contactMediaEntity->path, 90);
if (!$contactMediaModel->save($contactMediaEntity)) {
return $this->respond([
'error' => $contactMediaModel->errors(),
'success' => false,
], ResponseInterface::HTTP_BAD_REQUEST, lang('Common.api.reject'));
}
}
}
$handy->removeSingleFile(ROOTPATH . $conMedia->path);
return $this->respond([
'data' => array(['id' => $id,
'contact_id' => $conMedia->contact_id,
'path' => $contactMediaEntity->path])]
, ResponseInterface::HTTP_OK, lang('Common.api.update'));
}
}
/**
* edit function
* @method : DELETE with params ID
*/
public function delete($id = null)
{
$contactFileModel = new ContactMediaModal();
$handy = new CustomFileSystem();
$id = ($id == 0 ? 0 : $id);
if ($id == 0) {
$isExist = $contactFileModel->where(['contact_id' => $this->request->getGet('foreignKey')])->findAll();
$target = array('contact_id' => $this->request->getGet('foreignKey'));
} else {
$isExist = $contactFileModel->where(['id' => $id])->findAll();
$target = array('id' => $id);
}
if ($isExist) {
$contactFileModel->where($target)->delete();
foreach ($isExist as $path) {
$handy->removeSingleFile(ROOTPATH . $path->path);
}
}
return $this->respond([
], ResponseInterface::HTTP_OK, lang('Common.api.remove'));
}
}
Enlightenment Is Freedom
|
