So you want to give each image a title when uploading it? If you upload multiple files, they will all have the same title... Or if you're just uploading one file, you don't really need dropzone for that. But in that case you can just add an input field and when saving the image in the database, just save the title along with it..
Jul 24, 2016
4
Level 5
Dropzone js: save title along with image name in database
I have used dropzone js to upload multiple files and its working fine.But i want to add one input fields named "title" of image but i don't khow how to do this i hope you guys will help me
controller:
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Input;
use Validator;
use Request;
use Response;
use App\Image;
class DropzoneController extends Controller {
public function index() {
$data = Image::get();
return view('dropzone_demo',compact('data'));
}
public function uploadFiles() {
$input = Input::all();
$rules = array(
'file' => 'image|max:3000',
);
$validation = Validator::make($input, $rules);
if ($validation->fails()) {
return Response::make($validation->errors->first(), 400);
}
$destinationPath = 'uploads'; // upload path
$extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
$fileName = rand(11111, 99999) . '.' . $extension; // renameing image
$upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path
if ($upload_success) {
$images = new Image;
$images->image = $fileName;
//$images->title = Input::get('title');
$images->save();
return Response::json('success', 200);
} else {
return Response::json('error', 400);
}
}
}
view:
<!DOCTYPE html>
<html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
{{ Form::open(['route' => 'dropzone/uploadFiles', 'class' => 'form-horizontal', 'files' => true]) }}
<div class="form-group">
<div class="col-sm-2">Title:</div>
<div class="col-lg-3">
<input type="text" name="title" class="form-control">
</div>
</div>
<div class="dropzone" id="dropzoneFileUpload">
</div>
</div>
{{ Form:close() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<script type="text/javascript">
var baseUrl = "{{ url('/') }}";
var token = "{{ Session::getToken() }}";
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#dropzoneFileUpload", {
url: baseUrl + "/dropzone/uploadFiles",
params: {
_token: token
}
});
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
addRemoveLinks: true,
accept: function(file, done) {
},
};
</script>
</body>
</html>
routes:
Route::get('dropzone', 'DropzoneController@index');
Route::post('dropzone/uploadFiles', 'DropzoneController@uploadFiles');
model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Image extends Model
{
protected $table = 'images';
protected $fillable = [
'image',
'title'
];
}
Please or to participate in this conversation.