Level 52
I think you must change this line :
$request->file->move(public_path('path/image/'), $imageName);
for this one :
$file->move(public_path('path/image/'), $imageName);
Dec 25, 2020
31
Level 1
Upload multiple images laravel & dropzone
Hi guys I want to upload multiple images using dropzone and laravel
Controller
public function Upload(Request $request)
{
if ($request->hasFile('file')) {
foreach ($request->file as $file) {
$imageName = md5(time()) . '.' . $request->file->getclientoriginalextension();
$imageNameArr[] = $imageName;
$request->file->move(public_path('path/image/'), $imageName);
}
}
return response()->json(array(
'type' => 'success',
'msg' => 'Uploaded successfully.',
'data' => array(
'id' => $imageNameArr,
)));
}
Dropzone
const dropzone = new Dropzone(
'div#img-uploader-box', {
url: url,
params: {
_token: token
},
method: 'post',
paramName: 'file',
maxFilesize: 10,
parallelUploads: 5,
maxFiles: 5,
timeout: 50000,
previewTemplate: previewTemplate,
previewsContainer: "#upload-previews",
clickable: "div#img-upload-clickable",
acceptedFiles: "image/png,image/jpeg, image/gif"
},
);
Error
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Level 1
No the same problem
Level 1
dropzone.min.js:1 POST https://img.laravel.com/upload 500 (Internal Server Error)
value @ dropzone.min.js:1
value @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
transformFile @ dropzone.min.js:1
t @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
setTimeout (async)
value @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
accept @ dropzone.min.js:1
value @ dropzone.min.js:1
value @ dropzone.min.js:1
(anonymous) @ dropzone.min.js:1
Level 52
Look at error detail in browser network tab (you get it with F12)
Level 1
{
"message": "Undefined variable: imageNameArr",
"exception": "ErrorException",
"file": "C:\xampp\htdocs\img\app\Http\Controllers\Pages\UploadController.php",
"line": 26,
"trace": [
{
"file": "C:\xampp\htdocs\img\app\Http\Controllers\Pages\UploadController.php",
"line": 26,
"function": "handleError",
"class": "Illuminate\Foundation\Bootstrap\HandleExceptions",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Controller.php",
"line": 54,
"function": "Upload",
"class": "App\Http\Controllers\Pages\UploadController",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\ControllerDispatcher.php",
"line": 45,
"function": "callAction",
"class": "Illuminate\Routing\Controller",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Route.php",
"line": 254,
"function": "dispatch",
"class": "Illuminate\Routing\ControllerDispatcher",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Route.php",
"line": 197,
"function": "runController",
"class": "Illuminate\Routing\Route",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 692,
"function": "run",
"class": "Illuminate\Routing\Route",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 128,
"function": "Illuminate\Routing\{closure}",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Middleware\SubstituteBindings.php",
"line": 41,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Routing\Middleware\SubstituteBindings",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\VerifyCsrfToken.php",
"line": 78,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\VerifyCsrfToken",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\View\Middleware\ShareErrorsFromSession.php",
"line": 49,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\View\Middleware\ShareErrorsFromSession",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Session\Middleware\StartSession.php",
"line": 121,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Session\Middleware\StartSession.php",
"line": 63,
"function": "handleStatefulRequest",
"class": "Illuminate\Session\Middleware\StartSession",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Session\Middleware\StartSession",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse.php",
"line": 37,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Cookie\Middleware\EncryptCookies.php",
"line": 67,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Cookie\Middleware\EncryptCookies",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 103,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 694,
"function": "then",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 669,
"function": "runRouteWithinStack",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 635,
"function": "runRoute",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Routing\Router.php",
"line": 624,
"function": "dispatchToRoute",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php",
"line": 166,
"function": "dispatch",
"class": "Illuminate\Routing\Router",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 128,
"function": "Illuminate\Foundation\Http\{closure}",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php",
"line": 21,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\TransformsRequest",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php",
"line": 21,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\TransformsRequest",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\ValidatePostSize.php",
"line": 27,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\ValidatePostSize",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\PreventRequestsDuringMaintenance.php",
"line": 87,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Illuminate\Foundation\Http\Middleware\PreventRequestsDuringMaintenance",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\fruitcake\laravel-cors\src\HandleCors.php",
"line": 37,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Fruitcake\Cors\HandleCors",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\fideloper\proxy\src\TrustProxies.php",
"line": 57,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 167,
"function": "handle",
"class": "Fideloper\Proxy\TrustProxies",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php",
"line": 103,
"function": "Illuminate\Pipeline\{closure}",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php",
"line": 141,
"function": "then",
"class": "Illuminate\Pipeline\Pipeline",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php",
"line": 110,
"function": "sendRequestThroughRouter",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
},
{
"file": "C:\xampp\htdocs\img\public\index.php",
"line": 52,
"function": "handle",
"class": "Illuminate\Foundation\Http\Kernel",
"type": "->"
}
]
}
Level 52
You have your error :
Undefined variable: imageNameArr
On line 26 of your controller
Level 1
Yes but where is the problem request file works
Level 52
What is this line 26 ?
Level 1
Check it
if ($request->hasFile('file')) {
foreach ($request->file as $file) {
$imageName = md5(time()) . '.' . $request->file->getclientoriginalextension();
$imageNameArr[] = $imageName;
$file->move(public_path('path/image/'), $imageName);
}
}
return response()->json(array(
'type' => 'success',
'msg' => 'Uploaded successfully.',
'data' => array(
'id' => $imageNameArr, // This is the line 26
)));
Level 52
There is a scope issue with your variable $imageNameArr.
Level 1
The problem is uploading multiple files not passing foreach
Level 52
No the problem is a scope issue, define your variable before :
$imageNameArr = [];
Level 1
Then you will get the array with 0 object
Level 52
Before your loop.
$imageNameArr = [];
foreach ($request->file as $file) {
Level 1
i use $request->allFiles()
and its working but its giving the same name to all files
Level 52
Try with $request->file('file')
I have this working code in one of my projects :
public function store(Request $request)
{
$photos = $request->file('file');
if (!is_array($photos)) {
$photos = [$photos];
}
if (!is_dir($this->photos_path)) {
mkdir($this->photos_path);
}
if (!is_dir($this->thumbs_path)) {
mkdir($this->thumbs_path);
}
for ($i = 0; $i < count($photos); $i++) {
$photo = $photos[$i];
$name = str_random(30);
$save_name = $name . '.' . $photo->getClientOriginalExtension();
Image::make($photo)
->resize(150, null, function ($constraints) {
$constraints->aspectRatio();
})
->save($this->thumbs_path . '/' . $save_name);
$photo->move($this->photos_path, $save_name);
$upload = new Upload();
$upload->filename = $save_name;
$upload->original_name = basename($photo->getClientOriginalName());
$upload->index = $request->session()->get('index');
$upload->ad_id = 0;
$upload->save();
}
}
Level 1
The same problem it's giving the same name to all images
Level 75
You have to save image name also each iteration of the loop to database otherwise you only get last image name.
Level 1
Can you give me the code please
Level 122
all images are uploaded at the same time, so they all get the same timestamp
Level 1
I change it but i get the same problem Do you have any example can help
Level 122
i change it in my head and it works fine
Also, you have parallel uploads in dropzone so you are probably getting multiple file requests not one request with multiple files
Why not give the file a random string for filename
Level 1
I do that and i get the same problem
Level 122
yet you mark it soved?
Level 1
By mistake im on the phone
Level 122
what does your code look like now
Level 1
i change it to this one it's working but I get the all images in one
if ($request->hasfile('file')) {
foreach ($request->file('file') as $file) {
$string = md5(rand(1, 9999));
$ext = $file->getClientOriginalExtension();
$file_name = $string . '.' . $ext;
$file->move(public_path('path/image/'), $file_name);
$data[] = $file_name;
}
}
Response
["c494d9524143b2ebe567475e985c19f7.jpg","eb76c035d5d0a2bd2a0d0834b93c9c26.jpg","d5776aeecb3c45ab15adce6f5cb355f3.jpg"]
Level 75
Do some practicing with array's. And how to Loop through and get data.
File 1 is file [0], second file [1], etc.
See @bestmomo example
$photo = $photos[$i];
First iteration $I is 0, next iteration $I is 1, etc.
I upload multiple, and my technique is very similar to @bestmomo example, and it works fine.
I generally do not like uploading images with Ajax, I prefer regular form, just seems to work better, and just my opinion.
Level 122
use a properly random string. you are currently only using 1 to 10000 so a high risk of collision
Level 1
I know I'm just testing know
Level 9
@vironeer I prefer use laravel livewire it is easy to use for file uploading...
Please or to participate in this conversation.