Add image upload field to a form in Laravel Spark

Mark, not sure I am getting what you want. Replicating the setup for photo upload from spark works (done it with upload to S3)

So if yours does not please sure your code and what error you get.

When uploading a photo you always have to save it somewhere and then use the url of wherever you saved it. That is because an image that comes from the user's system typically does not have a url that is accessible by laravel.

@EventFellows Thanks for coming back to me so quickly.

We've created a form that currently has two fields, both only requiring text entry, and we'd like to add a field that allows the user to upload a photo to accompany this text when the form is submitted.

On submission, all three fields should then update a database table with the newly entered data.

Does that help explain what we're after?

Thanks again,

Mark

This sounds like the default image photo upload you referred to with adding 2 text fields.

Image upload is a little tricky so I replicated spark photo upload logic and added additional form fields which works just fine. But you have to handle the photo uploading process which (in laymans terms) has several steps

• add the abilitiy to add photos to the form
• let user choose an image
• upload the photo to server into temp directory
• get photo from temp directory and store on the filesystem
• get the path of where you stored it (as full path or just the relevant fraction)
• save the path to the database

(hope this is at least roughly correct in terms what happens on the system level)

@EventFellows Thanks again for continuing to help.

Sounds like you've got what we're after exactly! Unfortunately, I'm not at all sure how to add two text fields to the default image upload.

Where would I begin to look to work this out? Or, would you be able to share an example of the code you used?

With kind regards,

Mark

From the top of my head (i dont have the repo accessible at the moment)

• add the fields to the form in the js file in data
• add the field names to the validation (if you do any)
• add the fields to the view so they get displayed

then you should have the input available off your $request->newfield in the controller.

re-compile gulp and it should work if I did not forget anything

@EventFellows Thanks for your continued help.

I'll give that a shot.

With kind regards,

Mark

Image upload has to happen separately from your form request

Your form will be responsible for linking the image and data to your user

The image uploader will be responsible for handling the image being saved

What you need to create is the logic for storing the image, linking the image to the user on submit

You would also need a fallback if the user aborts the process

Since images can be uploaded without being linked to a user you will need to create some form of garbage cleaner to remove images.

You can do this once a day with a Job

or

if the user doesn't submit the form within an hour of an upload, it should delete the image

@WebKenth if I am not mistaken, @SYPOMark talks about an image upload using vuejs with an ajax call.

Your comments seems to relate to a 'normal' form upload.

@WebKenth @EventFellows I'm afraid to say, I know so little about this Spark stuff that I don't really know which of you is right. It could be that you both are.

To express more specifically what I'm after doing is creating a form that will allow a user to upload a product to a database. This product will have some attributes that are entered via text fields and the product should also be able to have an image associated with it.

The user should be able to see their uploaded products in a simple table that displays the products' attributes and a thumbnail of the uploaded image.

@WebKenth If I understand you correctly, what I should be trying to build in the blade is a form with, say, two fields for the text attributes plus a button for the image and a submit button. The image will effectively be submitted via a route specified in the js which will show a preview of the image to be uploaded. Then the submit button will collect all the data and ascribe it to the appropriate table in the database, associated with the correct user.

Is that right?

@EventFellows What I think you've encouraged me to do is virtually the same thing.

Is that right?

If I've misunderstood, then, I apologise, I'm still pretty new to this. But, if either of you, or anybody else, could point me towards a tutorial on how to include a photo upload field in a basic form - complete with code examples - within Laravel Spark, that would be most appreciated.

With kind regards,

Mark

Here is a non-javascript file upload that I use.

Blade file:

<div class="col-md-8 col-md-offset-1">
    {!! Form::open(['method' => 'POST', 'route' => 'file-upload', 'class' => 'form-horizontal', 'files' => true]) !!}

        <div class="form-group{{ $errors->has('title') ? ' has-error' : '' }}">
            {!! Form::label('title', 'Input', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-9">
                {!! Form::text('title', null, ['class' => 'form-control']) !!}
                <small class="text-danger">{{ $errors->first('title') }}</small>
            </div>
        </div>

        <div class="form-group{{ $errors->has('image') ? ' has-error' : '' }}">
            {!! Form::label('image', 'File label', ['class' => 'col-sm-3 control-label']) !!}
            <div class="col-sm-9">
                {!! Form::file('image') !!}
                <p class="help-block">Here can be the restrictions</p>
                <small class="text-danger">{{ $errors->first('image') }}</small>
            </div>
        </div>

        <div class="btn-group pull-right">
            {!! Form::submit("Add", ['class' => 'btn btn-primary']) !!}
        </div>

    {!! Form::close() !!}

</div> 

Controller logic:

    public function fileUpload(Request $request)
    {
        if ($request->hasFile('image')) {
            $file = $request->file('image');
            $filename = $file->getClientOriginalName();
            $extension = $file->getClientOriginalExtension() ?: 'png';
            $folderName = '/accounts/' . Auth::user()->uuid . '/eventbackgrounds/';
            $picture = 'file_name_' . str_random(10) . '.' . $extension;
        }

        // from https://murze.be/2015/07/upload-large-files-to-s3-using-laravel-5/
        Storage::put($folderName . $picture, fopen($file, 'r+'));
    }

@EventFellows Thanks again for your help.

The place we're trying to add the photo upload facility is within the Settings Screen - we've added a few tabs there - so, if I understand correctly, we've got to use Vue, if we use any JS framework.

I don't know if this alters the code we'd have to write...

Yes, the code is different. I can share my upload code when I am back, the code above won't work in vuejs.

@EventFellows That would be most appreciated!

I look forward to having a read.

With kind regards,

Mark

@SYPOMARK - How did you get your form to work? I'm making a form for product information but it won't update into the new table. Any suggestions on what I should do?