Jump to content

Saving Image from Ajax POST to page


louisstephens
 Share

Recommended Posts

I have been messing around with creating pages from ajax requests, and it has gone swimmingly thus far. However, I am really struggling with creating a page and saving an image via ajax. 

The form:

<form action="./" role="form" method="post" enctype="multipart/form-data">
	<div>
		<input type="text" id="preview" name="preview" placeholder="Image Title">
	</div>

    <div>
		<input type="file" id="preview-name" name="preview-name">
	</div>

    <div>
		<select id="select-tags" name="select-tags">
        <?php $tags = $pages->find("template=tag"); ?>
        	<option value="">Select Your Tags</option>
            	<?php foreach ($tags as $tag) : ?>
                        <option value="<?= $tag->name; ?>"><?= $tag->name; ?></option>
                <?php endforeach; ?>
		</select>
	</div>
	
	<div>
    	<button type="button" id="submit-preview" name="submit" class="">Upload Images</button>
	</div>
</form>

 

The ajax in my home template:

$('#submit-preview').click(function(e) {
            e.preventDefault();
            title = $("#preview").val();
            image = $("input[name=preview-name]");
            console.log(title);
            console.log(image);
            data = {
                title: title,
                image: image //not sure if this is actually needed
            };

            $.ajax({
                type: 'POST',
                data: data,
                url: '/development/upload-preview/',
                success: function(data) {
                    console.log("Woo");


                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.responseText);

                }
            });
        });

And finally in my ajax template:

$imagePath = $config->paths->assets . "files/pdfs/"; //was from an older iteration

    $title = $sanitizer->text($_POST['title']);
    $image = $sanitizer->text($_POST['image']);

    $p = new Page();
    $p->template = "preview";
    $p->parent = $pages->get("/previews/");
    $p->name = $title;
    $p->title = $title;
    $p->save();
    $p->setOutputFormatting(false);

    $u = new WireUpload('preview_image');
    $u->setMaxFiles(1);
    $u->setOverwrite(false);
    $u->setDestinationPath($p->preview_image->path());

    $u->setValidExtensions(array('jpg', 'jpeg', 'gif', 'png', 'pdf'));
    foreach($u->execute() as $filename) { $p->preview_image->add($filename); }

    $p->save();

I can complete the file upload but just using a simple post to the same page and it it works well, but I was really trying to work out the ajax on this so I could utilize some modals for success on creation (and to keep my templates a little cleaner). When I do run the code I have, a new/blank folder is created under assets, and a new page is created with the correct title entered. However, no image is being processed. I do get a 200 status in my console. I have searched google for help, but everything seems to be slightly off from my needs. If anyone could help point me in the right direction I would greatly appreciate it. 

Link to comment
Share on other sites

14 hours ago, louisstephens said:

When I do run the code I have, a new/blank folder is created under assets, and a new page is created with the correct title entered.

Hi Louis,

 

1- In the form, change the name of the input :

<!-- from -->
<input type="file" id="preview-name" name="preview-name">

<!-- to -->
<input type="file" id="preview_name" name="preview_name">

 

2- In your JS code, use FormData() and add the contentType prop to the $.ajax call (that's the key here) :

$('#submit-preview').click(function(e) {
    e.preventDefault();
    title = $("#preview").val();
    image = $('input[name=preview_name]').prop('files')[0]; // modified
    form_data = new FormData(); // added
    form_data.append('preview_name', image); // added
    form_data.append('title', title); // added
    console.log(title);
    console.log(image);
    
    $.ajax({
        type: 'POST',
        data: form_data,
        url: '/development/upload-preview/',
        contentType : false, // added
        processData : false, // added
        success: function(data) {
            console.log("Woo");
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
});

 

3- The ajax template file look good.

 

The main reason that WireUpload doesn't work here, is because it couldn't  find the right field name (form input name) :

$u = new WireUpload('preview_image');


 

 

 

 

  • Like 4
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Saleena Jhon
      Hello There, I have saw a post that was covering event-calendar with php, ajax and js. That was showing a monthly overview when I click on a "month" button or when I switch the month. And show the events on one particular date when I pick a day. Also, most events are kind of exhibitions and so they have a start date and an end date much later, and occur on each day in-between as well. So on the template I put two date picking fileds date_start and date_end. Is there an elegant way to select the events using the API? If yes, kindly help me out.
      Thanks in Advance
      Regards: 
       
    • By Liam88
      Hi,
      I'm really struggling with this as it's something not in my wheelhouse. I'm creating a blog style page (a grid of cards) which has attributes.
      I have a snip of javascript which grabs values from checkboxes which are put into a value like the below:
      ?content=static_video&channel=facebook-ads_instagram-ads
      document.querySelector("form").onsubmit=ev=>{ ev.preventDefault(); let o={}; ev.target.querySelectorAll("[name]:checked").forEach(el=>{ (o[el.name]=o[el.name]||[]).push(el.value)}) console.log(location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&") ); document.location.href = location.pathname+"?"+ Object.entries(o).map(([v,f])=> v+"="+f.join("_")).join("&"); } As I'm currently refeshing the page on button click with those values the end result includes the location but can easily remove this.
      I then use this value in "input->get" to get the values which I then append to a find() rule. See code below:
      $selector = "template='adbank_pages',sort=published,include=all,status!=hidden"; // Get the channel and content inputs $channel = $input->get->channel; $content = $input->get->content; if($channel){ // Grab the channel string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $chanArray = explode("_", $channel); $chan = $channel = str_replace('_', '|', $channel); $selector = $selector .= ",ab_channels=$chan"; } if($content){ // Grab the content string, explode into an array for checkbox checking and then replace _ with | to create or rules in the selector. $contArray = explode("_", $content); $cont = $content = str_replace('_', '|', $content); $selector = $selector .= ",ab_content=$cont"; } if($input->get){ // If a valid input result $all = $pages->find($selector); } }else{ // If no input show them all $all = $page->children("template='adbank_pages',sort=-published,include=all,status!=hidden"); } $items = $all->find("limit=12"); // Limit the output and use pagination As mentioned above I currently refresh the page to adjust the $selector filter within the $all with a fallback $all if there are no results.
      I know I need to use AJAX to filter the content without refresh but I am really struggling with the set up. I have read multiple posts including the original by Ryan but still confused.
      If anyone can direct/help on this it would be appreciated.
      Thank you
    • By opalepatrick
      I am working on my first Process Module. I am creating forms. Fairly straightforward. However, I really can't work out how to create multiple fieldsets?
      $fieldset = $this->modules->get('InputfieldFieldset'); $fieldset->label = 'Customer Source'; $field = $this->modules->get('InputfieldPage'); $field->inputfield = 'InputfieldSelect'; $field->findPagesSelector = 'parent_id=1449, include=hidden'; $field->labelFieldName = 'yff-lead'; $field->name = 'yfflead'; $field->columnWidth = 16; $fieldset->add($field); $field = $this->modules->get('InputfieldPage'); $field->inputfield = 'InputfieldSelect'; $field->findPagesSelector = 'parent_id=1452, include=hidden'; $field->labelFieldName = 'customer-type'; $field->name = 'customertype'; $field->columnWidth = 16; $fieldset->add($field); //Rinse and Repeat $fieldset->label = 'Contacts'; $field = $this->modules->get('InputfieldPage'); $field->inputfield = 'InputfieldSelect'; $field->findPagesSelector = 'parent_id=1538, include=hidden'; $field->labelFieldName = 'salutation'; $field->name = 'salutation'; $field->columnWidth = 16; $fieldset->add($field); I can create the first fieldset (Customer Source) but then get into trouble as the second fieldset overwrites the first. I understand why, but trying to use the open and close fieldset routine has flummoxed me. Any help appreciated.
    • By VeiJari
      Hello forum, we're trying to use Processwire as our REST-API. We are having problems with our API login to Processwire from frontend. It gives us 403 error.
      We have installed ProcessWire to subdirectory (/api/*) and our frontend is static JS files at root ( / ). Apache access logs gives 404 to our POST-request, but browser devtools shows 403 for our POST /api/login request. 
      Processwire backend panel works. We also have a GET endpoint for the API that returns 200 with correct payload.  So we're wondering why does our GET works but POST doesn't?
      Does this have something to do with Processwire .htaccess, or is this because of our webhost? What should we check first? Any help would be appreciated.
    • By rjgamer
      Hi,
      is there a hook after the current (active) page got created? Or which method got called in the Page class after the Constructor of the current page got initialized?
      Thanks.
       
×
×
  • Create New...