Simple Image upload Gallery


#1

I´m planning to create a site where i can upload an image in the frontend and display it directly in a Gallery beneath the form. What is the simplest way to achieve this?

Element%201-100


#2

For the form part, I’d suggest to use @mzur’s uniform plugin, it already comes with an upload action, I think.

For the Gallery display, that can probably best be achieved with some Ajax code, that fetches the uploaded images without reloading the page.


#3

Cool, that is exactly what i was looking for. But so far I get this error message and feel a little stuck.


#4

Have you installed the plugin correctly? Make sure to grab the version for Kirby 2, not the one for Kirby 3.


#5

yep, it was the wrong version. The installation worked fine so far. No error messages anymore, but after i uploaded an image i can´t find it anywhere after the page reloads. I left the target default [ ‘target’ => kirby()->;roots()->content(),].


#6

Apart from the fact that there is a typo in this code, if everything works as expected, the file should be uploaded to /content.


#7

i´m running it in mamp, so it should be in http://localhost:8888/mysite/content/ , right?


#8

Yes, exactly. But nothing gets uploaded to that folder?


#9

nope, can´t see anything there. neither in the browser or in the finder


#10

Hm, are you outputting the error messages in the template?


#11

after clicking the upload button the site simply reloads ( i have put the form on “home” of a starterkit (kirby 2.5.12))


#12

Please put a

<?php dump($form->errors()) ?>

before or after the upload form.


#13

ahaa, now i can see them and afterwards there´s this under my form:


#14

Yes, if everything was OK, the array should be empty because there are no errors. Otherwise, if you upload an image instead of a PDF or a file that is too big, you should get a message in that array.

Don’t forget to echo these errors for the user in case they happen and also give feedback if file upload was successful.


#15

Perfect, thanks! Guess, it won´t be the last question so far but i´m almost there :slight_smile: Awesome support btw!


#16

Alright i´m quite new to this so i guess it´s simple: how can i get the ‘target’ in the controller to the directory i want (i.e. content/home) instead of /content?


#17
 ‘target’ => kirby()->roots()->content() . '/home',

#18

Alright, it runs almost as Planned. there are two question left:

  1. How can I create subtitles (name & Title) via Upload?
  2. i have to reload the page to diplay the new images, how can i get rid of that? (absolute Ajax newbie)


#19

Apart from the upload, you’d have extend your form to submit and store name and title in the file meta data ($file->update()o Ajax recipe has an example that injects the additional projects into the DOM (after all, that is what JS is good for), so you would have to adapt that for your use case. If you are not familiar with Ajax, there are lots of tutorials if you google around.


#20

okay, after looking through the uniform docs I tried to extend my form like this, but really don’t know how to continue:

<?php

use Uniform\Form;

return function ($site, $pages, $page)
{
    $form = new Form([
        'filefield' => [
            'rules' => [
                'required',
                'file',
                'image',
                'filesize' => 5000,
            ],

            'message' => [
                'Please choose a file.',
                'Please choose an image.',
                'Please choose a file that is smaller than 5 MB.',
            ],
        ],
    ]);

    if (r::is('POST')) {
        $form->uploadAction(['fields' => [
            'filefield' => [
              'target' => kirby()->roots()->content() . '/4-class',
              'prefix' => false,
            ],

        $file->update([
            'title' => 'title',
            'author' => 'author'
        ])

        ]]);
    }



    return compact('form');
};

this is the form part of the template:

<form class="form" enctype="multipart/form-data" method="POST">


<input type="file" name="filefield" required/>


  <div>
  <?php echo honeypot_field() ?>
  </div>

  <label class='labelclass'>Name</label>
  <input<?php if ($form->error('author')): ?> class="error"<?php endif; ?> name="name" type="text" value="<?php echo $form->old('author') ?>">
  <label class='labelclass'>Titel</label>
  <input<?php if ($form->error('title')): ?> class="error"<?php endif; ?> name="titel" type="text" value="<?php echo $form->old('title') ?>">
  <?php echo csrf_field() ?>
  <input class="btn" type="submit" value="Hochladen">
  </form>

and the bluebrint where i need to generate “author” and “title”:

title: Class

files:
  fields:
    author:
      label: Author
      type: text
    title:
      label: Titel
      type: text