can't upload file with ngx uploader
can't upload file with ngx uploader
I want to upload a file with ngx-uploader.I dont know how to set the data that i want to sent to backend
backend.php
public function add_icon() {
$retval = array();
$icon = '';
$FILE_DIR = './images/';
if($_POST || $_FILES) {
if(!empty($_FILES['icon']['name'])) {
$icon = $_FILES['icon']['name'];
}
$should_save = true;
$guid = rand();
if($icon != '') {
$type = strtolower($_FILES['icon']['name']);
$extArray = array(".jpg",".jpeg",".gif",".png");
if (!in_array(strtolower(strrchr($type, ".")), $extArray)) {
$retval['message'] = 'Invalid file format.';
$should_save = false;
}
if($should_save) {
$ext=$this->getExtension($_FILES['icon']['name']);
$icon = time().'icon'.$guid.'.'.$ext;
$icon = $this->uploadFile($_FILES['icon'], $FILE_DIR, $icon);
}
}
$retval['status'] = '1';
$retval['message'] = 'file uploaded';
$retval['filename'] = $icon;
} else {
$retval['status'] = '0';
$retval['message'] = 'nothing was posted';
}
header('Content-Type: application/json');
echo json_encode($retval, JSON_UNESCAPED_UNICODE);
}
Backend code will work if i upload file via postman .
fileupload.ts
onUploadOutput(output: UploadOutput): void {
console.log(output);
if (output.type === 'allAddedToQueue') {
const event: UploadInput = {
type: 'uploadAll',
url: 'http://localhost/ezyrental/index.php/Ws/add_icon',
method: 'POST',
data: { foo: 'bar' }
};
this.uploadInput.emit(event);
} else if (
output.type === 'addedToQueue' &&
typeof output.file !== 'undefined'
) {
// add file to array when added
this.files.push(output.file);
} else if (
output.type === 'uploading' &&
typeof output.file !== 'undefined'
) {
// update current data in files array for uploading file
const index = this.files.findIndex(
file => typeof output.file !== 'undefined' && file.id === output.file.id
);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter(
(file: UploadFile) => file !== output.file
);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
this.dragOver = false;
} else if (output.type === 'drop') {
this.dragOver = false;
}
}
The front end part returned success message but no files were uploaded,I think the problem is to sending the data in incorrect format ,maybe that's why webservice is working via postman.How to format the data with ngxuploader
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
first of all, test that your file is receiving on backend or not. print file in php.
– Ashish
Jun 29 at 10:36