Level 65
DropzoneJS does multiple POSTs for each image/file. Just save it to the database like normal?
Hmm, are you saving it into some array in the database? Why not have a hasMany() or belongsToMany() relationship?
Sep 6, 2014
56
Level 51
Using Dropzone JS to do multiple uploads
Hi All,
Quick question I'm hoping someone can help me with. I'm using Dropzone.js to upload multiple images, but I'm unsure on how to then store the JSON response in the database (mysql)
I have a method called upload like so:
public function upload()
{
$user_id = Auth::user()->id;
$file = Input::file('file');
$fileName = $file->getClientOriginalName();
$file->move(public_path().'/uploads/products/', $fileName);
$products = Products::where('customer_id', '=', $user_id);
$products->file = array_merge($products->images_array, [$fileName]); // If not, this will work
$products->save();
return Response::json(array('filelink' => '/uploads/products/' . $fileName));
}
So in my 'store' method to store all the data from the form including these images how would I call it to save to db?
$product->images = $input['images']; // doesn't work
The form is as follows:
{{ Form::open(['route' => 'products.store', 'class' => 'form-horizontal', 'files' => true]) }}
<div class="form-group">
<div class="col-sm-2">Customer</div>
<div class="col-lg-3">
<input type="text" name="customer" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">Description</div>
<div class="col-lg-3">
<input type="text" name="description" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">Images</div>
<div class="col-lg-10">
<div id="dropzone" name="images">
Drop files here
</div>
</div>
</div>
{{ Form:close() }}
Anyone get any idea's, help etc?
Level 30
Maybe you have a look at https://github.com/sseffa/l4_file_upload
Level 65
Maybe you have a look at https://github.com/sseffa/l4_file_upload
There's no controller/model stuff in that.
Level 30
Just a little example that helped me out The actual store method is in
https://github.com/sseffa/l4_file_upload/blob/master/app/views/index.blade.php https://github.com/sseffa/l4_file_upload/blob/master/app/routes.php
Level 65
Oh it's in the routes file.. :P
Yeah @lstables has already got that far.
Level 51
Yes already got that far @bashy thanx, just need to grab the JSON array/response then store it in the DB
Level 51
Anyone have an answer to this?
Level 65
I asked questions but didn't get any answers to them so I can't help at the moment
Level 51
Ok hopefully someone else can, thanks anyway dude.
Level 65
Not sure if you understood me :P
DropzoneJS does multiple POSTs for each image/file. Just save it to the database like normal?
Hmm, are you saving it into some array in the database? Why not have a hasMany() or belongsToMany() relationship?
Level 51
It won't save as normal as it doesn't have a form nor does it have a form name on the field it's just a div with an id for styling.
But if you look at the upload method you will see that I call the save method within this function.
Level 65
Every POST request has fields you can read. A form is not needed if you have JavaScript doing the POST request for you instead of a form (user input/buttom).
Check dev tools on your browser and watch the network tab for POST. See the content and field names and use
Input::get('somename');
To read it.
Level 51
That's just it I can't grab with Input::get()
Level 65
Check what the fields are in the network tab and report back with them. Probably another underline issue if you can't read it with
Input::get('');
Input::file('');
Level 51
Ok I'll check this out thanx man
Level 51
After checking the network tab I get the following:
Level 65
If you click on that one and check the response, you can see what the error is.
Level 51
error: {type:ErrorException, message:Undefined property: Illuminate\Database\Eloquent\Builder::$images_array,…}
file: "/home/vagrant/code/engine/app/controllers/ProductController.php"
line: 112
message: "Undefined property: Illuminate\Database\Eloquent\Builder::$images_array"
type: "ErrorException"
Level 65
Not sure if this is it but
$products = Products::where('customer_id', '=', $user_id);
Should have one of these on the end
->get();
->find(1);
->take(1);
etc
Level 51
Yeah just noticed that myself so added both the ->get() and first() but still no joy!
Level 65
Re-check for the error...
You could also try
return $products;
Postman Chrome extension is a lifesaver if you do a lot of form testing
Level 51
In postman after adding ->get(); to the of the where clause, I get:
Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
But still get the same error in 'network tab'
error: {type:ErrorException, message:Undefined property: Illuminate\Database\Eloquent\Collection::$images,…}
file: "/home/vagrant/code/engine/app/controllers/ProductController.php"
line: 110
message: "Undefined property: Illuminate\Database\Eloquent\Collection::$images"
type: "ErrorException"
Level 65
Make sure to set the method to POST/PUT/PATCH or what ever you're using in the route.
Okay so now the error is $images. I would return the model data so you can see what you're working with.
I can't debug it for you, just single it down and try and return everything from the top down.
Level 51
I have put POST request and also returned $images and everything is working fine I just don't understand why because i have this set to upload once images are inserted.
<script type="text/javascript">
$(document).ready(function(){
$("div#dropzone").dropzone({
url: "/product/upload",
addRemoveLinks: true,
dictRemoveFile: 'X (remove)'
});
});
</script>
Level 65
I can't really help much more without looking at it fully. Hopefully you keep trying things and narrowing it down. This is also a great way to learn how code works and things you might not of known!
Level 51
Yeah maybe so im usually not bad at degugging but this is doing my head in.
Level 65
I had a few issues when getting DropzoneJS into it, hadn't used it before and I didn't fully understand how it was doing things.
You'll get there :)
Level 51
Hopefully I will yes I have use it before with laravel but for some reason it's not working
Level 9
Consider Checking this out
https://github.com/msurguy/frontend-book/tree/master/ch9/complete-application
There's an implementation of multiple uploads with dropzone js within the project. Open up the routes.php, views/multi.blade.php files to see how it is done.
You should be good to go.
or better yet buy the book
INTEGRATING FRONT END COMPONENTS WITH WEB APPLICATIONS by MAKS SURGUY
https://leanpub.com/frontend/packages/book/purchases/new
Its a good read.
Level 65
It's more his controller code than DropzoneJS.
Also that example doesn't save it to database or even though a controller/model.
Please or to participate in this conversation.