Skip to content

Instantly share code, notes, and snippets.

@robertnicjoo
Last active December 5, 2017 04:58
Show Gist options
  • Save robertnicjoo/ea49239957f76aded57ec60599325014 to your computer and use it in GitHub Desktop.
Save robertnicjoo/ea49239957f76aded57ec60599325014 to your computer and use it in GitHub Desktop.
Laravel + DropzoneJs
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'my-awesome-dropzone' ]) !!}
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<input type="hidden" name="imageIds[]" value="">
{{Form::close()}}
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
protected $fillable = ['name'];
public function imageable()
{
return $this->morphTo();
}
public function product()
{
return $this->belongsTo(Product::class);
}
}
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Image;
use Session;
class ImageController extends Controller
{
public function dropzone()
{
return view('dropzone-view');
}
public function dropzoneStore(Request $request)
{
// works
$file = $request->file('file');
$filename = 'product' . '-' . time() . '.' . $file->getClientOriginalExtension();
$filePath = public_path('images/');
$request->file('file')->move($filePath, $filename);
return Image::create([
'name' => $filename,
'imageable_id' => $request->input('imageable_id'),
])->id;
}
}
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateImagesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('images', function (Blueprint $table) {
$table->increments('id');
$table->integer('imageable_id')->nullable();
$table->string('imageable_type')->nullable();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('images');
}
}
<script src="{{asset('js/dropzone.min.js')}}"></script>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("form#my-awesome-dropzone", {
headers: {
"X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
},
acceptedFiles: ".jpeg,.jpg,.png,.gif",
dictDefaultMessage: "Drag an image here to upload, or click to select one",
maxFiles: 15, // Maximum Number of Files
maxFilesize: 8, // MB
addRemoveLinks: true,
});
myDropzone.on("success", function (response) {console.log(response.xhr.response); });
</script>
<?php
namespace App;
use Spatie\Sluggable\HasSlug;
use Spatie\Sluggable\SlugOptions;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasSlug;
protected $fillable = [
'title', 'slug', 'imageOne', 'imageTwo', 'short_description', 'description', 'price', 'meta_description', 'meta_tags', 'arrivalDays', 'height', 'weight', 'lenght', 'width', 'sku', 'stock',
];
public function getSlugOptions() : SlugOptions
{
return SlugOptions::create()
->generateSlugsFrom('title')
->saveSlugsTo('slug');
}
public function images()
{
return $this->morphMany(Image::class, 'imageable');
}
}
//products multiple images
Route::post('dropzoneStore', 'ImageController@dropzoneStore')->name('dropzone.store');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment