Jump to content
phil_s

Image Drag & Drop not working for me (2.4)

Recommended Posts

Hey folks,

I am building a new site with PW 2.4 and ran into a strange problem:

- Image upload via drag and drop is not working (no color change, no upload starting)

- Image reordering via drag is not working

- I can't delete images

Image Field is set to no limit, and resize w/h to 1600, I kept everything else on the default value.

When I edit the post with said image field, Jquery UI gives me this error: TypeError: i[1] is undefined

Strangely enough, moving categories and posts in the site tree, and dragging field in the templates works fine, and there is no error..

Some more specs:

- The server I'm on uses virtual document root, so uncommented the matching rewrite rule in the htaccess..

- Mysql version is 5.5.28

- Php Version is 5.49 (Stable), safe mode is off

- Assets, and Files, Cache folders are set to 777

I'm really at a loss at what could cause this :/ It feels like this should be a library not loading, but why would the dragging work in other parts of the admin, but not the images field?

Cheers!

Phil

Share this post


Link to post
Share on other sites

Check js console for errors on page edit screen.

Ah, jQuery UI is throwing something. Do you have any custom fields in use? Or some modules that have hooks for page edit?

Share this post


Link to post
Share on other sites

Hmm. No Modules apart from the Site Import/Export Module..

Just noticed that the date picker field is not working either :/ very strange. Have an older 2.3 setup running on the same configuration / server without any trouble..

You think a custom field would cause this? I have a date time field, text fields and the image field, nothing fancy, and both fields and templates are named with an underscore (e.g. clientx_events) but that's it..

Has to be something very very obvious that I just don't see.

I will investigate further and update this thread when I know more.. Thx for the pointers apeisa!

Share this post


Link to post
Share on other sites

Solved it! 

The date field was the culprit!

I entered "5" instead of "+5" in the Date Picker Year Range and while I didn't see any errors when I saved that field,

apparently this breaks all jquery UI interaction on the post's edit page :)

  • Like 1

Share this post


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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By BrendonKoz
      Hello all! Has anyone with more JavaScript abilities been able to hook into ProcessWire's jQueryUI Panel functionality in order to handle onload events of the panel itself? I'm trying to simply set focus to the first input element of the form after clicking the button that activates the panel, but my click event does not run (I think due to the return false; in the panel.js as shown below).
      .../wire/modules/Jquery/JqueryUI/panel.js:
      // delegate events from toggler to pw-panel-button $toggler.click(function() { $btn.click(); return false; }).on('mouseover', function() { $btn.mouseover(); }).on('mouseout', function() { $btn.mouseout(); });  
    • By Xonox
      Hi,
       
      I'm trying to upload images from a folder into a page. I need to replace the images instead of adding. The image field already has the replace existing images turned on, but it doesn't seem to be enough.
       
      My code:
      foreach($files as $file) { if(substr($file, 0, 1) != '.' && $file != '.' && $file != '..') { // Get SKU $file_sku = substr($file, 0, 9); // Check for book $book = $pages->get('sku=' . $file_sku); if(!$book->id) { // Book doesn't exist } else { // Upload image into book !!! THIS CODE ADDS FILE INSTEAD OF REPLACING. HOW CAN I REPLACE? $book->book_images->add($upload_directory . '/' . $file); // Delete file unlink($upload_directory . '/' . $file); } // Save book if($book->id) $book->save(); } }  
      What am I missing?
    • By Guy Incognito
      I'm trying to implement a front-end image upload form for user profile pictures, to a field called 'profile_picture'. The code is based on the various examples found around these forums but isn't yet 100% right.
      The form successfully submits the image to the server and updates the field in the dashboard. When you submit the firm, the page reloads and uploads the image but the template still loads the old image path (now broken path as the old image has been removed).
      I can only get the new image to show if I hit enter in the address bar forcing the page to reload.
      Any ideas? Is it a caching issue, or something to do with the order of the script? It makes no difference if I call the image after the upload form.
      <?php //Display current user image $userImg = $user->profile_picture->first(); echo '<img src="'.$userImg->url.'">'; $upload_path = $config->paths->assets . "files/avatar_uploads/"; $f = new WireUpload('userimage'); $f->setMaxFiles(1); $f->setMaxFileSize(1*1024*1024); $f->setOverwrite(true); $f->setDestinationPath($upload_path); $f->setValidExtensions(array('jpg', 'jpeg', 'png', 'gif')); if($input->post->form_submit) { if(!is_dir($upload_path)) { if(!wireMkdir($upload_path)) throw new WireException("No upload path!"); } $files = $f->execute(); if ($f->getErrors()) { foreach($files as $filename) @unlink($upload_path . $filename); foreach($f->getErrors() as $e) echo $e; } else { $user->of(false); $user->profile_picture->removeAll(); // wirearray (line added by @horst: explanation is three posts beneath) $user->profile_picture = $upload_path . $files[0]; $user->save(); $user->of(true); @unlink($upload_path . $files[0]); } } ?> <form class="forum-form" accept-charset="utf-8" action="./" method="post" enctype="multipart/form-data" > <input type="file" id="attach" name="userimage" accept="image/jpg,image/jpeg,image/gif,image/png" /> <input type="submit" name="form_submit" value="Submit"/> </form>
       
    • By bot19
      Hey guys,
      Today I was uploading images and ran into an image I couldn't upload. This has never happened before since I got images uploading working.
      I had a dig around the forum but couldn't find anything relevant.
      Initially I thought it was due to the size ~1.3mb, but I had uploaded something bigger after and it was fine (~1.7mb). There are no size or dimension restrictions on this image field.
      After looking at the image some more, I realised its dimensions was HUGE: ~5300px
      There must be some sort of limit somewhere throwing an error due to this dimension size? Because after I resized the image down to 2560px, it uploaded fine.
      What does everyone think? I kind of just want to know. See below for more info. Thanks!
      Uploading the smaller file, everything is fine. If you look at the response, you can see:
      [{"error":false,"message":"Added file: mock-email-marketing-and-newsletters-smaller.png","file":"\/procwire\/site\/assets\/files\/1189\/mock-email-marketing-and-newsletters-smaller.png","size":340797,"markup":"<li id='file_551ac1043f1cbbe0b909dab963a1f28c' class='ImageOuter gridImage ui-widget'><div class='gridImage__tooltip'><table><tr><th>Dimensions<\/th><td>2560x2560<\/td><\/tr><tr><th>Filesize<\/th><td>333&nbsp;kB<\/td><\/tr><tr><th>Variations<\/th><td>0<\/td><\/tr><\/table><\/div>\n\t\t\t<div class='gridImage__overflow'>\n\t\t\t\t<img src=\"\/procwire\/site\/assets\/files\/1189\/mock-email-marketing-and-newsletters-smaller.0x260.png?nc=1512803364\" alt=\"\" data-w=\"2560\" data-h=\"2560\" data-original=\"\/procwire\/site\/assets\/files\/1189\/mock-email-marketing-and-newsletters-smaller.png?nc=10\" \/>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='gridImage__hover'>\n\t\t\t\t\t<div class='gridImage__inner'>\n\t\t\t\t\t\t<label for='' class='gridImage__trash'>\n\t\t\t\t\t\t\t<input class='gridImage__deletebox' type='checkbox' name='delete_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' value='1' title='Delete' \/>\n\t\t\t\t\t\t\t<span class='fa fa-trash-o'><\/span>\n\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t<a class='gridImage__edit'>\n\t\t\t\t\t\t\t<span>Edit<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\t\t\t\t<div class='ImageData'>\n\t\t\t\t\t<h2 class='InputfieldImageEdit__name'><span contenteditable='true'>mock-email-marketing-and-newsletters-smaller<\/span>.png<\/h2>\n\t\t\t\t\t<span class='InputfieldImageEdit__info'>333&nbsp;kB, 2560&times;2560 <\/span>\n\t\t\t\t\t<div class='InputfieldImageEdit__errors'><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__buttons'><small><button type='button' data-href='\/procwire\/admin123\/page\/image\/edit\/?id=1189&file=1189,mock-email-marketing-and-newsletters-smaller.png&rte=0&field=crm_feature_img' class='InputfieldImageButtonCrop ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='#non_rte_dialog_buttons button' data-autoclose='1' data-close='#non_rte_cancel'><span class='ui-button-text'><span class='fa fa-crop'><\/span> Crop<\/span><\/button><button type='button' data-href='\/procwire\/admin123\/page\/image\/variations\/?id=1189&file=mock-email-marketing-and-newsletters-smaller.png&modal=1&varcnt=varcnt_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' class='ui-button ui-corner-all ui-state-default pw-modal-large pw-modal' data-buttons='button'><span class='ui-button-text'><span class='fa fa-files-o'><\/span> Variations <span class='ui-priority-secondary'>(0)<\/span><\/span><\/button><\/small><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__core'><div class='InputfieldFileDescription'><label for='description_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' class='detail'>Description<\/label><input type='text' name='description_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' id='description_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' value='' \/><\/div><\/div>\n\t\t\t\t\t<div class='InputfieldImageEdit__additional'><\/div>\n\t\t\t\t\t<input class='InputfieldFileSort' type='text' name='sort_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' value='2' \/>\n\t\t\t\t\t<input class='InputfieldFileReplace' type='hidden' name='replace_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' \/>\n\t\t\t\t\t<input class='InputfieldFileRename' type='hidden' name='rename_crm_feature_img_repeater1189_551ac1043f1cbbe0b909dab963a1f28c' \/>\n\t\t\t\t<\/div>\n\t\t\t<\/li>","replace":true,"overwrite":0}]
      Uploading the original file, something happens and there is no response (see Content-Length: 0)

      Which in turn must trigger this issue in the JS.

      No response.

    • By gonzz
      Hi i'm having a recurrent problem I found on this forum: when using the image uploader I get the following error on console "Unexpected token < in JSON". But I couldn't solve it with any of the other proposed solutions:
      setting debug to true setting $config->uploadTmpDir = dirname(__FILE__) . '/assets/uploads/'; setting uploadTmpDir in php.ini  
      BUT This problem only appears for non superuser users (ie editors).
      Running on a Digitial Ocean Server with NGINX and PHP 7.1. Version is ProcessWire 3.0.62
      Note: Im using Fredi plugin, but i doubt that's the problem because I'm using it in other sites with no problem
       
      Any idea how i could solve this (even with non ajax image upload) I need to sort this as fast and simple as possible
      Thanks in advance
×
×
  • Create New...