Skip to content

Instantly share code, notes, and snippets.

@321zeno
Created May 24, 2015 16:36
Show Gist options
  • Save 321zeno/d60e0473371a92f338e3 to your computer and use it in GitHub Desktop.
Save 321zeno/d60e0473371a92f338e3 to your computer and use it in GitHub Desktop.
Replace a file input with a dropzone (for an image) in Laravel 4.x
<?php
class DropzoneController extends BaseController {
public function upload() {
$r = Util::uploadUnique('file', Config::get('website.dropzone_uploads'));
extract($r);
//return response
return [
'filename' => $uniqueFolder . '/' . $filename,
'path' => $path,
'img' => '<img src="' . $path . $uniqueFolder . '/' . $filename . '" alt="image" />'
];
}
}
{{HTML::dropzone('blog_image', 'Image', $post->blog_image)}}
{{HTML::dropzone('blog_image', 'Image')}}
///...
HTML::macro('dropzone', function($name, $label = null, $value = null)
{
//maybe it's already been submitted?
if (!empty(Input::old($name))) {
$value = Input::old($name);
}
$img = (!empty($value)) ? '<img src="' . Config::get('website.dropzone_uploads') . $value . '" alt="image" /> ' : '';
$str = '<div class="form-group">
<label class="control-label col-lg-2 col-sm-4">' . $label . ' </label>
<div class="col-lg-10 col-sm-8">
<div class="row dropzone-field">
<div class="col-md-6">
<div class="dropzone-upload dropzone spot" style="min-height: 160px;" data-file="' . $name . '" data-path="' . Config::get('website.dropzone_uploads') . '"></div>
</div>
<div class="col-md-6">
<div class="dropzone-preview">
' . $img . '
</div>
</div>
</div>
</div>
</div>' . Form::hidden($name, $value);
return $str;
});
// ...
Dropzone.autoDiscover = false;
$(".dropzone-upload").dropzone({
url: "/path-to/dropzone-uploads",
paramName: "file",
autoProcessQueue: true,
uploadMultiple: false,
maxFiles: 1,
maxFilesize: 2,
dictDefaultMessage: "Drop files to upload (or click)",
init: function() {
var myDropzone = this,
$element = $(this.element),
$wrapper = $element.parents('.dropzone-field').first(),
$preview = $wrapper.find('.dropzone-preview');
name = $element.data('file'),
path = $element.data('path');
this.on("success", function(file, response) {
$preview.html(response.img);
$('input[name="' + name + '"]').val(response.filename);
this.removeAllFiles()
});
}
});
<?php namespace App\Services;
use Illuminate\Support\Facades\Facade;
class Util extends Facade
{
public function uploadUnique($key, $path)
{
$uniqueFolder = base_convert(strtotime('now'), 10, 36);
if (is_string($key)) {
$file = \Input::file($key);
} else {
$file = $key;
}
$filename = $file->getClientOriginalName();
$uploadPath = public_path() . $path;
$file->move($uploadPath . '/' . $uniqueFolder , $filename);
return [
'filename' => $filename,
'uniqueFolder' => $uniqueFolder,
'path' => $path
];
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment