Image upload in the Front-End

Need Help
#1

Hello, I’ve been tryin to figure out why my image file upload isn’t working and its been taking me forever. Maybe one of you guys will be able to help me. When I upload images from the backend everything’s fine.

Form snippet:

<form class="form" data-request="onCreateAuction" data-request-update="'auction/form': '#auction-create'" enctype="multipart/form-data">
....
    <div class="form-group">
        <label for="images">Upload Item Image</label>
        <input type="file" class="form-control-file {% if errors.getBag('auction').has('images') %}is-invalid{% endif %}" id="images" name="images">
        {% if errors.getBag('auction').has('images') %}
        <div class="invalid-feedback d-block">{{errors.getBag('auction').first('images')}}</div>
        {% endif %}
    </div>
...
</form>

In my Model I have:

    public $attachMany = [
        'images' => \System\Models\File::class
    ];

In my component function onCreateAuction() after all validation this is how i try to save images:

try {
            $data = \Input::post();
            $auction = new Auction; 

            $auction->name = $data['name'];
            .......
    
            $images = \Input::file('images');
            if ($images) {
                $auction->images()->create(['data' => $images]);
            }

            $auction->save();

            return \Redirect::to('/');
        } catch (\Exception $ex) {
            $this->page['errors']->getBag('auction')->add("general", $ex->getMessage());
            $this->page['data'] = \Input::post();
        }

I never get any errors. Everytime I create a new Auction with an image uploaded it is successful, but the image never gets uploaded since I don’t see it being displayed nor in the back-end nor in the front.

Thank you.

#2

Hi @Picke ,

This part of the documentation about File Uploads should help. There is a straightforward example on how to implement it.

#3

Uploader plugin - October CMS

you can try this frontend upload plugin

#4

The docs linked are the preferred way and supersede the plugin, although it is a nice example of a component design.