Problems with WireUpload

[3fingers]

Hello all,

today I've got a problem with a form submission, specifically with images uploads.

Before strarting this thread I've read and followed this topics:

http://processwire.com/talk/topic/126-anybody-did-user-registrationlogin/

http://processwire.com/talk/topic/3105-adding-file-upload-field-to-form-via-api/

And here is my code:

https://gist.github.com/anonymous/5517109

The form subscription worked correctly until I've integrated the WireUpload function, that seems to cause me some problems...infact if i comment out this count() check in the code...

if(!count($files)) {
$u->error("Sorry, but you need to add a photo!");
return false; 
}

... the form data get recieved (everything but the images..) and the newpage created.

So it seems that the image upload never runs.

I also tried to override PHP's upload_temp_dir with 

 $config->uploadTmpDir = dirname(__FILE__) . '/assets/uploads/';

in site/config.php and use that folder as my temporary one, but no luck there too...

I want to notice that my console didn't recieve any errors when I submit the form, everything seems to work but it's not

I'm on a local server (Wamp on Windows) and in my php.ini file file uploads and temporary directory are set like this:

; Whether to allow HTTP file uploads.
; http://php.net/file-uploads
file_uploads = On

; Temporary directory for HTTP uploaded files (will use system default if not
; specified).
; http://php.net/upload-tmp-dir
upload_tmp_dir = "c:/wamp/tmp"

Any advices from you guys?

Thanks.

[Soma]

Taking your code just as is (commenting out the page creation/saving) the upload works for me. 

I'm not sure where it's failing for you. Does the uploads folder really get created and is writable? Is upload and post max size enough for the file you trying to upload? If the file is too big it won't do anything and just fail silently is possible.

Also noticed some things in your code.

I am not sure why you have two files for form and php ? And in the form action just "./"? I've put both scripts in one file form.php in the root and changed the include of index.php and the action to action="";

You also have 

if(!count($files)) {
        $u->error("Sorry, but you need to add a photo!");
        return false;
    }

The $u->error(...) will never show up as you're not using the PW way of creating the form with InputfieldForm. So you would need to handle the errors yourself.

Something like this:

$errors = array();
if(!count($files)) {
    $errors['upload'] = "Sorry, but you need to add a photo!";
}

Then check before creating and saving page:

if(empty($errors)){
    //... do stuff
}

Also you have those return false; return true; in the code... Those will prevent the code from going futher and you won't have a chance to output the form again and show some errors. Just stick with a way to create a errors array and fill in, then before the form output you check for errors and ouptut them.

[Wanze]

You could check if the files are sent to the server, somwhere on top of your script:

print_r($_FILES); //Shouldn't be empty

Check your php settings for UPLOAD_MAX_FILESIZE, MAX_POST_SIZE

edit: Soma wins

[3fingers]

I'm on mobile right now, I'm going to check your suggestions in an hour or so. In the meantime thanks!

[3fingers]

Ok, I took some time to test your suggestion but with no luck...I'm going to answer to you point by point:

@Soma :

• The upload folder path gets created correctly, I checked the permissions and create/write/execute/modify are there.
• In the php.ini the "upload_max_filesize" is set at 2M and "post_max_size" is 8M. Enough for the file sizes I'm trying to upload (mostly jpg of 100k or so).
• I have two separated files because of jquery validation script I'm using ( you can check it here : https://gist.github.com/anonymous/5517761 ) , since - as l long as I understand- I cannot run ajax post requests inside the site/ folder of PW. This also explains the "./" action of the form (could also be "").
• I've also tried to wrap errors inside an array as you suggest, and than if no errors continue to run the script, that infact never runs, since no images are uploaded.

Here ( https://gist.github.com/anonymous/5517845 ) is the updated code.

My head is burning....

[Soma]

Ok, but now that's a completely different story using validate and post the form using AJAX and form.serialize...

This might be of interest http://stackoverflow.com/questions/4545081/how-do-to-file-upload-using-jquery-serialization

Still your error handling isn't going to work. You'll have to return some readable error handling like json encoded php array, then read the data on success in the ajax function.

...
// if errors return them to the js ajax request
if(count($errors) {
    $errors['error'] = true;
    echo json_encode($errors);
}

This will return something like this:

{"error":true,"upload":"no upload"}

then in the js

...
success: function(data) {
     if(data.errors){
       // do something to show the errors in data returned by php script
       $('ul#errors').append($("<li>"+data.upload+"</li>"));
     else {
       // no error occured
     }
},
...

[Wanze]

Have you tried this?

print_r($_FILES); //Shouldn't be empty

Edit:

You can't upload files with ajax in some browsers, thats a browser security restriction.

There exists a fallback-solution with a hidden iframe makes it work in every browser.

Check out this plugin and FAQ: http://malsup.com/jquery/form/#file-upload

[Soma]

Also wanted to add that you don't sanitize values or check them except the email (but you're not validating it in php), so anyone can inject something directly submitting to the submit.php...

// Send all form submissions through ProcessWire sanitization
$email = $sanitizer->email($input->post->email);
$username = $input->post->username;
$password = $input->post->password;
$provincia = $input->post->provincia;
$genere = $input->post->genere;
$orientamento = $input->post->orientamento;
$annuncio = $input->post->annuncio;
 

Validation just with jquery.validate isn't sufficient to make a secure form. And it just get a little (lot) more complicated.. 

Also you're not having a CSRF attack prevention with your form.

[3fingers]

Ok @Wanze and @Soma I'm going to dig more on the problems and as soon as I find a solution I will post it here....such a sad story that I can't upload files via ajax without a kind of hack by the way...

What's the best way to prevent a CSRF attack to my form (after I'm going to add sanitizer to every $input) ?

I'm going to check google by myself anyway

THANKS.

[Soma]

You can generate name, value and validate CSRF in PW like this

$csrf_name = $session->CSRF->getTokenName();
$csrf_value = $session->CSRF->getTokenValue();

echo "<input type='hidden' name='$csrf_name' value='$csrf_value'/>";
 

And validate it with

if($session->CSRF->validate()){
   // valid
} 

[3fingers]

Habemus papam!

I've used the plugin that Wanze indicate me along with jquery validation and then sanitizing my input fields as Soma suggested.

I'm on php validation now, I'm going to dig into the forum to find the right solution to make my form a bit safer to play with

Thanks guys, you rock!