PDA

View Full Version : How to upload images using fileuploadfield



maecy
8 Sep 2013, 9:00 PM
Hi. This is my first post. I'm starting to learn how to use extjs.

I've been having a hard time uploading image and save it on the server.

I have the following codes for my view:


items: [{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Select image',
name: 'image-upload',
buttonText: 'Browse',
buttonConfig: {
iconCls: 'upload-icon'
}
},
{
xtype: 'button',
//action: 'submit',
text: 'Upload',
handler: function(){
var form = this.up('form').getForm();
form.submit({
url: 'uploadproc.php',
waitMsg: 'Loading data...',
success: function(fp, o) {
msg('Success', 'Processed file "' + o.result.file + '" on the server');
}
});

}
}



],

and this is my uploadproc.php


<?php

$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["image-upload"]["name"]);
$extension = end($temp);
if ((($_FILES["image-upload"]["type"] == "image/gif")
|| ($_FILES["image-upload"]["type"] == "image/jpeg")
|| ($_FILES["image-upload"]["type"] == "image/jpg")
|| ($_FILES["image-upload"]["type"] == "image/pjpeg")
|| ($_FILES["image-upload"]["type"] == "image/x-png")
|| ($_FILES["image-upload"]["type"] == "image/png"))
&& ($_FILES["image-upload"]["size"] < 20000)
&& in_array($extension, $allowedExts))
{
if ($_FILES["image-upload"]["error"] > 0)
{
echo "Return Code: " . $_FILES["image-upload"]["error"] . "<br>";
}
else
{
echo "Upload: " . $_FILES["image-upload"]["name"] . "<br>";
echo "Type: " . $_FILES["image-upload"]["type"] . "<br>";
echo "Size: " . ($_FILES["image-upload"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["image-upload"]["tmp_name"] . "<br>";


if (file_exists("upload/" . $_FILES["image-upload"]["name"]))
{
echo $_FILES["image-upload"]["name"] . " already exists. ";
}
else
{
move_uploaded_file($_FILES["image-upload"]["tmp_name"],
"upload/" . $_FILES["image-upload"]["name"]);
echo "Stored in: " . "upload/" . $_FILES["image-upload"]["name"];
}
}
}
else
{
echo "Invalid file";
}
?>

and I always get this error:

Uncaught Ext.JSON.decode(): You're trying to decode an invalid JSON String: Invalid file

If anyone could help me, it would be really great. Thank you!

evant
8 Sep 2013, 9:16 PM
There's an example of uploading an image, including the PHP code in the SDK download, under /examples/form/file-upload.html

maecy
8 Sep 2013, 9:48 PM
I had that as a guide. But I still get the error.

And I was really wondering where do I put the php file? I saved mine outside the js folder. Please help. Thanks.

Gary Schlosberg
10 Sep 2013, 9:14 AM
The file upload should return a valid JSON response. Yours PHP script doesn't seem to be.

As far as the PHP script, it seems cleaner to keep it out of your JS directory, but more important is that the filepath corresponds with what you have set in your form, and that the file is executable.

maecy
10 Sep 2013, 6:47 PM
I have a new question. Since I got the value from my fileuploadfield which is the original path of the image to be uploaded. Then, in my controller-events, I used the value of of the field as may param and sent it to my php file. So, I got the following code:


class UploadMedia extends BaseManager{ public function saveImageUpload($imagepath){ $form = $this->getUserData();
$allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_FILES['uploadfile']["name"]); $extension = end($temp); if ((($_FILES['uploadfile']["type"] == "image/gif") || ($_FILES['uploadfile']["type"] == "image/jpeg") || ($_FILES['uploadfile']["type"] == "image/jpg") || ($_FILES['uploadfile']["type"] == "image/pjpeg") || ($_FILES['uploadfile']["type"] == "image/x-png") || ($_FILES['uploadfile']["type"] == "image/png")) && ($_FILES['uploadfile']["size"] < 20000) && in_array($extension, $allowedExts)) { if ($_FILES['uploadfile']["error"] > 0) { echo "Return Code: " . $_FILES['uploadfile']["error"] . "<br>"; } else { echo "Upload: " . $_FILES[$imagepath]["name"] . "<br>"; echo "Type: " . $_FILES[$imagepath]["type"] . "<br>"; echo "Size: " . ($_FILES[$imagepath]["size"] / 1024) . " kB<br>"; echo "Temp file: " . $_FILES[$imagepath]["tmp_name"] . "<br>";


Am I right about this? I wasn't sure if I should do $_FILES['uploadfield'] = $imagepath(my param); or

$form['uploadfield'] = $imagepath;
$form['uploadfield']['name'];

Can anyone tell me what is the right code for this? Since I am only uploading the image on the server, I don't have any database for it yet.