Jump to content
louisstephens

Saving Image from Ajax POST to page

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. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

You have officially saved my sanity flydev! Thank you so much. I had stared at/fiddled with this all day yesterday to no avail. 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By jom
      Hi everyone
      It seems that I don't fully understand the wireTempPath() function and I need some help.
      I use wireTempPath() to create a new location in assets/cache/WireTempDir and than copy a pdf from the assets/files/page folder to the new folder. I want the file to be accessible only for a limited time, that's why I use wireTempPath.
      The file seems to be copied to the right location, but gets deleted right afterwards, according to 
      As mentioned in the topic above, 
      $wireTempDir->setRemove(false); prevents the file to be deleted. But I like the file to be automatically deleted after a few days. So, how can I do that?
      My code so far (everything works, but the automatic removal of the tempDir folder):
      //generate and show download link $folder = time(); // timestamp as temporary folder $maxAge = (int) $settings->options_downloadlink_valid_hours * 3600; //tempDir wants maxAge as seconds $options = array( 'maxAge' => $maxAge ); $wireTempDir = wireTempDir($folder, $options); $wireTempDir->setRemove(false); $src_file = $page->ebook_download->filename; // Create a new directory in ProcessWire's cache dir if(wire('files')->mkdir($wireTempDir, $recursive = true)) { if(wire('files')->copy($src_file, $wireTempDir)){ //get subdirs from tempDir: $pos = strpos($wireTempDir, "WireTempDir"); $subdir = substr($wireTempDir, $pos, 100); $out .= "<p><a href='" . wire('pages')->get('template=passthrough')->httpUrl . "?file=" . $subdir . $page->ebook_download->basename . "' target='_blank'>$page->title</a></p>"; } } I appreciate any ideas - thanks!
      Oliver
    • By VeiJari
      Hello forum, this is my first security related post, so I'm a bit of a newbie.
      I understand that when I have direct front-input from user I should sanitize the input, but how about when I use a secret key for showing a API for a third-party supplier? Should I sanitize the input->get() key?
      I've tested this issue and I tried ?key=<?php echo $page->field; ?> And without adding any sanitization it comes back: /?key=<?php%20echo%20$page->field;%20?>
      So can I rely on this, or should I still use $sanitizer just in case?
       
      Thanks for the help!
    • By EyeDentify
      I have been experimenting with the new $page->meta() method and find it useful.

      Once i figured out that the data i "save" with it is tied to the page where i called the method from.

      So this is not obvious at least not for me in the documentation:
      https://processwire.com/api/ref/page/meta/
       
      So i just wanted to share that revelation with the community so you don´t get as confused as i was.

      Happy Coding Everyone.
    • By louisstephens
      Going through my long quest to get better with ajax and utilizing the api, I have hit yet another roadblock. I currently have a form with an image field (thanks to flydev for getting that sorted), "title" text input, and a select field set to multiple. In my ajax call, I added in:
      tags = $("#select-tags").val(); form_data.append('tags', tags); $.ajax({ type: 'POST', data: form_data, contentType: false, processData: false, url: '/ajax/upload-preview/', success: function(data) { console.log("Woo"); }, error: function(xhr, ajaxOptions, thrownError) { alert(xhr.responseText); } }); And in the ajax template: 
      $tags = $sanitizer->text($_POST['tags']); $image = $sanitizer->text($_POST['image']); $p = new Page(); $p->template = "preview"; $p->parent = $pages->get("/previews/"); $p->name = $title; $p->title = $title; $p->tags = $tags; $p->save(); If I select a "tag" from the select input and submit, it does indeed add it to the Page Reference field in the backend. However, this does not work with an array being passed to it of multiple options.

      So it does appear that my ajax call is trying to submit multiple options, but I am really just unsure how to get these two added in. I saw in other forums posts of add($page) and even add(array()). Do I need to handle this js array differently or do  I need to foreach through the $tags to add it like:
      foreach($tags as $tag) { $p->tags->add($tag); $p->save(); } I tried this approach, but apparently I am still missing something.
       
      Edit:
      I was doing some tweaking, and I know I can split the js array out like:
      for (i = 0, len = tags.length; i < len; i++) { console.log(tags[i]); } However, I am not sure then how to handle the POST in php if I were to split it out.
    • By louisstephens
      This might be a completely dumb question, but I cant seem to wrap my head around it. I have a page reference field that allows users to select "Tags". In the front end I would like to use the titles as class names for a single item. ie:
      <?php $previews = $pages->find("template=preview"); ?> <?php foreach($previews as $preview): ?> <div class="tagOne TagTwo tagThree"> <!-- use another foreach to output--> <img src="<?=$preview->preview_image->url; ?>" /> </div> <?php endforeach; ?> I am little stumped as I know I need a foreach loop to produce each tag title, but how do I insert them all into one corresponding div class with spaces?
      Whelp, that was the easiest thing, but my brain just didnt "get it". Just put the foreach in the "class" inside of the overall foreach. Ugh 😓
×
×
  • Create New...