Jump to content

Need help with Basic WireUpload sent as FormData (ajax)


erkan
 Share

Recommended Posts

Hi !

I trying to send a "Participant form" that should be a bit dynamic. 

Very simplified the form looks like this

Club info

Participant NAME etc

[ + add one more ]

Photo of receipt

[submit]

My problem is how to use wireupload with data sent by JavaScript.

I get as far as the upload path... but at $u = new WireUpload(XXX);

I'm totally in the dark which info the xxx should bee when sent as JavaScript. ? 

My goal is to populate the field $item->f_receipt with the photo.

(Right now im working locally... hope that don't cause problem)

var_dump($_FILES); looks like this so im sending something to my process page:

array(1) { ["f_receipt"]=> array(5) { ["name"]=> string(22) "121010-111847AM_m7.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(36) "/Applications/MAMP/tmp/php/phppJGcSh" ["error"]=> int(0) ["size"]=> int(50846) }}
 

I have been reading around at the forum for two nights but im to novice to get it. 

Copying code from

http://processwire.com/talk/topic/1809-image-upload-via-wireupload/

http://processwire.com/talk/topic/3105-create-pages-with-file-upload-field-via-api/page-3

this is my code:

All tips in the right direction will very welcome.

function addPage($ordernumber, $name, $enamn, $gender, $weight, $cardnumber, $club, $trainer, $epost, $telefon, $message, $receipt,$_parent ){
    
    $item = new Page(); // create new page object
    $item -> template = 'competition_form_person'; // set template
    $item -> parent = $_parent;
    $p -> name = uniqid($name . '_' . $enamn);
    $item -> title = $_REQUEST['f_ordernumber'] .'_' . $name . '_' . $enamn . '_' . $weight;
    
    
    $item -> save();
    $item -> f_ordernumber                 = $ordernumber;
    $item -> f_name                     = $name;
    $item -> f_ename                     = $enamn;
    $item -> f_gender                     = $gender;
    $item -> f_weight                     = $weight;
    $item -> f_kampsportskort             = $cardnumber;
    $item -> f_club                        = $club;
    $item -> f_trainer                    = $trainer;
    $item -> f_epost                    = $epost;
    $item -> f_telefon                    = $telefon;
    $item -> f_message                    = $message;
    $item -> save();
    
    
    $upload_path = $page->config->paths->root . 'tmp_uploads/';
    
    echo '$upload_path---------------------------->' . $upload_path;  
    
      // RC: create temp path if it isn't there already
    
      if(!is_dir($upload_path)) {
        if(!wireMkdir($upload_path)) throw new WireException("No upload path"); 
      }
    
    
    if(empty($_FILES[$req]['name'][0])){
        $errors[$req] = "Select files to upload.";
    }
    
    
    
    // setup new wire upload
    
    $u = new WireUpload($receipt);/// $receipt['name']   $_FILES
    $u->setMaxFiles(1);
    $u->setOverwrite(false);
    $u->setDestinationPath($upload_path);
    $u->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif'));
    
    foreach($u->execute() as $filename) $item->f_receipt -> add($filename);
    
    $item -> save();
}
 

The JS sending info 

oData = new FormData(document.forms.namedItem("form_competition"));
        var receipt = document.getElementById('f_receipt');
        var file = receipt.files[0];
               
        oData.append('f_ordernumber', postJSON.f_ordernumber);
        oData.append('f_trainer', postJSON.f_trainer);
        oData.append('f_epost', postJSON.f_epost);
        oData.append('f_telefon', postJSON.f_telefon);
        oData.append('f_receipt', file);
        oData.append('f_message', postJSON.f_message);
        oData.append('fighters', JSON.stringify(postJSON.fighters));

        /*make the ajax call*/
        $.ajax({
            url: "/slagskeppet_test/ProcessWire-master/call_competition_form/",
            type: "POST",                
            data: oData,
            contentType: false,
            processData: false,                
            success: function(msg){
                alert(msg);
            },
            error: function() {
                alert("failure");
            }
        });
 
 

/Erik

Link to comment
Share on other sites

Problem solved from this tread:

http://processwire.com/talk/topic/206-renaming-uploaded-files-from-tmp-name/

Didn't figure out how to reference WireUpload(???) to the input field at the form page. Im posting to another page with js.

So this made the trix for me with a ugly name on the file. But i was desperate. : )

$page -> image->add($_FILES['dummy_img']['tmp_name']);
 

Would love to know a more beautiful solution though...

Link to comment
Share on other sites

There have been some good threads in the past getting into WireUpload usage, though not sure any of them were ajax specific. But it'd be worth browsing through some of these just in case. ProcessWire's InputfieldFile.module also uses WireUpload with AJAX so that might be good to look at as well. Using $_FILES[tmp_name] probably is not ideal because that's just the temporary PHP name and not the actual filename. Also, your code above is taking values from $_REQUEST without sanitizing them. In that particular case, I'd recommend pulling from $_POST (or better yet $input->post) rather than $_REQUEST, and running them through the $sanitizer->text(); function before populating to the page's title. Also, make sure you are validating the files that get uploaded, especially if only using $_FILES. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...