API save back new arrangement of images field

[benbyf]

HIIIII

Was looking at the docs for the wireArray, files and images fields but cant work out the best strategy for rearranging files that already exist in the field ->  I'm trying to upload images in the admin, then in the front end rearrange and save back the new order to the field.

Any hope would be awesome

[Jan Romero]

What’s the bit you’re asking about specifically? A general strategy could be to markup your frontend form the same way ProcessWire does it in the admin (i.e. the names of the inputs) and let PW do the server-side work somewhat like this:

$yourImageField->processInput($input->post);

/* upload errors must be handled separately, but you only want
 * to rearrange existing images, so you’ll probably want to
 * reject submissions with new images somehow. */
if (count($yourImageField->getWireUpload()->getErrors())) {
    $errors++;
    $yourImageField->error('Upload failed, tough luck.');
}

if (count($yourImageField->getErrors())) {
    $errors++;
} else {
    // successful form submission, so populate the page with the new values.
    $page->set($yourImageField->name, $yourImageField->value);
}

if ($errors === 0) $page->save();

You’ll notice that PW uses hashes to identify individual PageImages. It keeps track of the name of the image field and the image’s hash in the name of an input element that contains the image’s sort value:

<input type='number' name='sort_<?=$yourImageField->name?>_<?=$image->hash?>' other-stuff-such-as-value />

For your use case it will likely be cleaner to just have a form with one number input per image, named after the hash, and hand rolling the sever-side processing. In fact, it may be easier to identify images by file name. Not sure how PW gets from the hash to the image. Since you’re likely using JavaScript to rearrange the images anyway, you might even get rid of the input element alltogether and just build the POST parameters from the actual order in the DOM before submitting.

[benbyf]

Hi @Jan Romero thanks but, im kinda lost. If I posted a list of numbers to the server say: 2,4,1,3 to represent second image should now be first, fourth should be second... and so on. How would I tel the image field to do the reorder..? Can i just get the values rearrange in the wireArray and use the set() and save()?

[benbyf]

F**k it dont worry, released it wont work anyways... I really need to starting talking to myself about these things before posting on here. Going to add videos to the mix too so going to have to track the order external to the imagefield order anyway ?‍♂️

[Jan Romero]

Huh, I thought you could just do $img->sort = 1 and save the field, but doing this does indeed require a small hack as described by Ryan here:

So you can totally just send a bunch of numbers and figure the new order out on the server:

$newOrder = [2,4,1,3,5];

$page->of(false);

for ($i = 0; $i < count($page->images); $i++) {
	$page->images->eq($newOrder[$i]-1)->sort = $i; // the sort property doesn’t exist on PageImage, we just introduce it so we can call sort on it below
}
  
$page->images->sort('sort'); // this is the key to the whole thing

$page->save('images');

Obviously IRL you would have to validate the input etc.

[benbyf]

Thought I'd post here how I solved my issue in the end by doing the arranging in the frontend and saving the data back to be used by the template.