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.

#5

I’m trying to attach an avatar image to a user model during frontend user registration, using the method as adviced on the documentation, but can’t get it to work. No image is attach to the user avatar.

the AajaxHandler

public function onRegisterAccount()
{
   // validate data first
        $rules = [
            'first_name' => ['required', 'string', 'max:255'],
            'last_name' => ['required', 'string', 'max:255'],
            'dob' => ['required', 'date'],
            'phone' => ['required', 'string', 'max:255'],
            'email' => ['required', 'between:3,255', 'email', 'unique:users'],            
           'avatar' => ['required', 'image', 'max:1024'] // this validation does not pass even if there is a file input in the post
        ];

    $validation = Validator::make(post(), $rules);
    if ($validation->fails()) {
         throw new ValidationException($validation);
    }

...

    $user->fill($data);
    
    // Avatar upload
    if ($avatarFile = files('avatar')) {
        $user->avatar = $avatarFile; // <- not working
   }
   $user->save();
      
}

EDIT: SOLVED
I found the answer, I didn’t know we needed to add data-request-files in the ajax form :slight_smile:

1 Like