twg_'s avatar
Level 6

Image(s) upload on form

I've got a small little project I'm working on. I'm trying to figure out how to handle image upload on my form.

I need to upload and set a featured image but also allow a person to allow more images that will not be marked as featured.

<div class="row">
    <div class="col-sm-9">
        <form id="newItem" method="post" action="{{ URL::to('account/item/store') }}">
            {{ 
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" id="title" name="title" class="form-control">
            </div>
            <div class="form-group">
                <label for="description">Description</label>
                <textarea id="description" name="description" class="form-control" rows="9"></textarea>
            </div>
        </form>
    </div>
    <div class="col-sm-3">
    
    </div>
</div>

Can anyone help me?

0 likes
4 replies
RachidLaasri's avatar

First of all, you need to add this to your form tag :

enctype="multipart/form-data"
twg_'s avatar
Level 6

@RachidLaasri Thanks. I was just typing that up quickly. I guess my biggest issue was trying to figure out how to handle the multiple image parts in the form. Do they need to be their own separate forms or part of this form?

RachidLaasri's avatar

No, you don't need to separate forms for that.

There is two options here :

  1. Simply use a drag and drop plugin.
  2. Use arrays in your input file name and with the help of JavaScript/jQuery you can allow the user to add as many elements they want and just loop thought that with PHP:
<input type="file" name="image[]" class="form-control">

This is a great package for uploading/resizing... pictures:

http://image.intervention.io/getting_started/installation#laravel

twg_'s avatar
Level 6

@RachidLaasri ,

Thank you for the help. I was doing some research on dropzone.js and was hoping that I would be able to have one dropzone area where I can upload all the images and then just mark one as a primary or featured image. It appears that I can't do that. So would you just do two separate dropzone areas?

Please or to participate in this conversation.