Jump to content

How to ajax upload multiple files at once, where each file => new page in frontend?


Recommended Posts

I know how to create pages with the API. I need help with the form itself. Here's what I'm working with so far, hacked together from examples found in this forum:


$upload_path = $config->uploadTmpDir;

$out = '';

// create a new form field (also field wrapper)
$form = $modules->get("InputfieldForm");
$form->action = "./";
$form->method = "post";

// create file field
$field = $modules->get("InputfieldFile");
$field->label = "Audio File";
$field->description = "Upload your track(s)";
$field->destinationPath = $upload_path;
$field->extensions = "mp3";
$field->maxFiles = 10;
$field->maxFilesize = 2*1024*1024; // 5mb
$field->required = 1;
$form->append($field); // append the field

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");

// form was submitted so we process the form
if($input->post->submit) {

    // user submitted the form, process it and check for errors

    if($form->getErrors()) {
        // the form is processed and populated
        // but contains errors
        $out .= $form->render();
    } else {

        // do with the form what you like, create and save it as page
        // or send emails. to get the values you can use
        // $email = $form->get("email")->value;
        // $name = $form->get("name")->value;
        // $pass = $form->get("pass")->value;
        // to sanitize input
        // $name = $sanitizer->text($input->post->name);
        // $email = $sanitizer->email($form->get("email")->value);

        $out .= "<p>You submission was completed! Thanks for your time.";

} else {
    // render out form without processing
    $out .= $form->render();

$content .= $out;

That outputs the form but I can't drag & drop or input more than one file, and when I submit it says "Missing required value".

I need to at least create one or more pages from the form submission, i.e., one per file uploaded. If possible I'd like to be able to set the title and description for each file/page as well.

Link to comment
Share on other sites

You need to include a bunch of admin JS and CSS files. If you are determined to do this, take a look at /wire/modules/Process/ProcessPageEdit/ProcessPageEdit.module, especially the AJAX save bit.

But I would recommend using another upload script, like http://getuikit.com/docs/upload.html to build this instead of trying to reverse-engineer the whole back end. 

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

  • Create New...