Ifrit's avatar

How to save a drag and drop

I'm not sure if this falls under laravel or not. But I'm trying t save an image via drag and drag. When I save to the database nothing is put in there and if I print_r($input) nothing is displayed under image.

My FramesController.php

public function store()
    {
            $input = Input::all();

            Frame::create($input);
            $frames = Frame::all();
            return view('banners::admin.frames.index', compact('frames'));
    }

Frame.php

<?php namespace Modules\Banners\Models;

use Illuminate\Database\Eloquent\Model;


class Frame extends Model {

   //Allows the fields in the array to be fillable
    protected $fillable = array('title', 'content', 'image');
    //Doesn't allow the id to be changed
    protected $guarded = array('id');

    protected $table = 'frames';

    protected $casts = [
        'image' => 'array',
    ];

    //Validation rules
    public static $rules = array(
        'title' => '',
        'content' => '',
        'image' => ''
        );

    //Contects the banners table with the frames table
    public function banner(){
        return $this->belongsToMany('Banner', 'banner_frame', 'frame_id', 'banner_id');
    }

}

My create.blade.php

<!-- This gets the admin template from app/modules/templates/views -->
@extends('templates::layouts.admin')
<!-- This inserts the content below into the template -->
@section('content')

    {!! Html::script('js/admin/frames.js') !!}
    <div class="row">
        <div class="col-lg-12">
            @if($errors->any())
                <ul>
                    {{ implode('', $errors->all('<li class="error">:message</li>')) }}
                </ul>
            @endif

            {{ Form::open(array('route' => 'admin.frames.store', 'class' => 'add-form')) }}
                <div class="form">
                    <div class="title_input">
                        <div>
                            {{ Form::label('title', 'Title') }}
                        </div>
                        <div>
                            {{ Form::text('title','', array('id' => 'title', "class" => "form-control")) }}
                        </div>
                    </div>

                    <div class="content_input">
                        <div>
                            {{ Form::label('content', 'Content') }}
                        </div>
                        <div>
                            {{ Form::textarea('content','', array('id' => 'content', "class" => "form-control")) }}
                        </div>
                    </div>

                    <div class="title_input">
                        <div>
                            {{ Form::label('link', 'Link') }}
                        </div>
                        <div>
                            {{ Form::text('link','', array('id' => 'link', "class" => "form-control")) }}
                        </div>
                    </div>

                    <div class="images">
                        <input type="file" name="image[]" id="filer_input2" multiple="multiple">
                    </div>

                    <div class="submit_button">
                        {{ Form::submit('Submit', array("class" => "btn btn-info submit", "role" => "button")) }}
                    </div>
                </div>
            {{ Form::close() }}
        </div>
    </div>
@stop

My frames.js

$(document).ready(function(){
    $("#filer_input2").filer({
        //This is the settings for the uploading of the files
        uploadFile: {
            url: "../../../public/upload/upload.php?target=frame_images",
            data: null,
            type: 'POST',
            enctype: 'multipart/form-data',
            beforeSend: function(){},
            success: function(data, el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            error: function(el){
                var parent = el.find(".jFiler-jProgressBar").parent();
                el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                    $("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");    
                });
            },
            statusCode: null,
            onProgress: null,
            onComplete: null
        },
        //This allows the image to be dragged and uploaded. For drag and drop this must go with the uploadFile setting
        dragDrop: {
            dragEnter: null,
            dragLeave: null,
            drop: null,
        },
        //This allows the thumbnails to be show
        showThumbs: true,
        //This displays the thumbnail that was uploaded. Works with showThumbs settings
        templates: {
            box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
            item: '<li class="jFiler-item">\
                        <div class="jFiler-item-container">\
                            <div class="jFiler-item-inner">\
                                <div class="jFiler-item-thumb">\
                                    <div class="jFiler-item-status"></div>\
                                    <div class="jFiler-item-info">\
                                        <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
                                        <span class="jFiler-item-others">{{fi-size2}}</span>\
                                    </div>\
                                    {{fi-image}}\
                                </div>\
                                <div class="jFiler-item-assets jFiler-row">\
                                    <ul class="list-inline pull-left">\
                                        <li>{{fi-progressBar}}</li>\
                                    </ul>\
                                    <ul class="list-inline pull-right">\
                                        <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                    </ul>\
                                </div>\
                            </div>\
                        </div>\
                    </li>',
            itemAppend: '<li class="jFiler-item">\
                            <div class="jFiler-item-container">\
                                <div class="jFiler-item-inner">\
                                    <div class="jFiler-item-thumb">\
                                        <div class="jFiler-item-status"></div>\
                                        <div class="jFiler-item-info">\
                                            <span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name | limitTo: 25}}</b></span>\
                                            <span class="jFiler-item-others">{{fi-size2}}</span>\
                                        </div>\
                                        {{fi-image}}\
                                    </div>\
                                    <div class="jFiler-item-assets jFiler-row">\
                                        <ul class="list-inline pull-left">\
                                            <li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
                                        </ul>\
                                        <ul class="list-inline pull-right">\
                                            <li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
                                        </ul>\
                                    </div>\
                                </div>\
                            </div>\
                        </li>',
            progressBar: '<div class="bar"></div>',
            itemAppendToEnd: false,
            removeConfirmation: true,
            _selectors: {
                list: '.jFiler-items-list',
                item: '.jFiler-item',
                progressBar: '.bar',
                remove: '.jFiler-item-trash-action'
            }
        },
        //This is how the drag and drop looks
        changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
        
    });
});

0 likes
2 replies
jekinney's avatar

YouTube has a lot of tutorials that set up your own drop box if you don't want to use a package or API. You can set the drop box to add the file to the form.

Please or to participate in this conversation.